(vue学习）记录1

缺乏、安全感 2022-09-12 04:58 129阅读 0赞

vue只关心视图层  
html+css+js视图层  
是双向数据绑定，视图发生变化时，数据也会发生变化。

网络通信 axios  
页面跳转 vue-route  
状态管理 vuex

大大减少DOM操作

# 1.基本语法 #

v-开头为指令  
v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。  
v-bind即把vm中的data与标签中的值绑定（如id，class等）

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
    
    </head>
    <body>
    
    <div id="app" class="demo">
        <span v-bind:title="message">hello</span>
    
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
    
        var vm = new Vue({
          
            el:"#app",
            data:{
          
                message:"hello vue"
            }
    
        })
    
    </script>
    </body>
    </html>

判断

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
    
    </head>
    <body>
    
    <div id="app" class="demo">
        <h1 v-if="ok">yes</h1>
        <h1 v-else> NO</h1>
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
    
        var vm = new Vue({
          
            el:"#app",
            data:{
          
               items:[
                   {
          message:1},
                   {
          message:2}
               ]
            }
    
        })
    
    </script>
    </body>
    </html>

循环

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
    
    </head>
    <body>
    
    <div id="app" class="demo">
        <h1 v-for="irem in items">
            {
       {irem.message}}
        </h1>
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
    
        var vm = new Vue({
          
            el:"#app",
            data:{
          
               items:[
                   {
          message:1},
                   {
          message:2}
               ]
            }
    
        })
    
    </script>
    </body>
    </html>

函数事件绑定

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
    
    </head>
    <body>
    
    <div id="app" class="demo">
     <button v-on:click="sayHi">adas</button>
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
    
        var vm = new Vue({
          
            el:"#app",
            data:{
          
               items:[
                   {
          message:1},
                   {
          message:2}
    
               ],
                methods:{
          
                   sayHi:function () {
          
                       alert(this.items);
                   }
                }
    
            }
    
        })
    
    </script>
    </body>
    </html>

动态绑定 v-model  
将传入的值传入v-model的message中，v-model的message再传入进vm的message中，再通过vm传到\{ \{message\}\}中

<body>
    
    <div id="app" class="demo">
        <input type="text" v-model="message">{
       {message}}
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
    
        var vm = new Vue({
          
            el:"#app",
            data:{
          
                message:null
              },
    
    
    
    
        })
    
    </script>
    </body>

双选框

<body>
    
    <div id="app" class="demo">
        <input type="radio" name="sex" value="man"v-model="checked" >man
        <input type="radio" name="sex" value="woman" v-model="checked">woman
        <p>
            {
       {checked}}
        </p>
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
    
        var vm = new Vue({
          
            el:"#app",
            data:{
          
                message:null,
                checked:''
              },
    
        })
    
    </script>
    </body>

# vue组件 #

组件component即为自定义标签，其中的props即为id，class等变量，这里用v-for将vm中的data里面的items取出，用item保存，再用v-bind把item的值与qin这个自定义变量绑定，即可通过qin将内容传入自定义组件中。  
数据传输顺序为 vm-component-component内部

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
    
    </head>
    <body>
    
    <div id="app" class="demo">
       <mcl v-for="item in items" v-bind:qin="item"></mcl>
    
    
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
    
        Vue.component("mcl",{
          
            props:['qin'],
            template:'<li>{
          {qin}}</li>'
        });
    
        var vm = new Vue({
          
            el:"#app",
            data:{
          
                message:null,
                checked:'',
                items:['as','asd','adsdas']
              },
    
        })
    
    </script>
    </body>
    </html>

![在这里插入图片描述][2a7ae9ed99ad4c99a6ef4fefa0ac5a57.png]

# Axios异步通信 #

用钩子函数axios获取信息，用data（）方法存到vm里面用。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
    
    </head>
    <body>
    
    <div id="app" class="demo">
        <div>
            {
       {info.address.xxx}}
            {
       {info.name}}
        </div>
    
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.4/axios.min.js" integrity="sha512-lTLt+W7MrmDfKam+r3D2LURu0F47a3QaW5nF0c6Hl0JDZ57ruei+ovbg7BrZ+0bjVJ5YgzsAWE+RreERbpPE1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
    
    
    
        var vm = new Vue({
          
            el:"#app",
    
                data() {
          
                    return {
          
                        info:{
          
                            name:null,
                            address:{
          
                                xxx:null,
                                yyy:null
                            }
                        }
    
                    }
                },
    
            mounted(){
          //钩子函数
                axios.get("").then(response=>(this.info=response.data));//往其中传入json
            }
    
        })
    
    </script>
    </body>
    </html>

# 计算属性 #

\{ \{方法\}\}  
computed：\{  
方法  
\}  
调用methods的方法每次都要计算，但用computed定义的方法可以缓存起来，减少系统开销。  
methods和computed里面的方法不能重名。

[2a7ae9ed99ad4c99a6ef4fefa0ac5a57.png]: /images/20220828/642eec07fd6040f49a27c6f784b238ab.png