什么是指令

• 在vue中提供了一些对于页面+数据的更为方便的输出，这些操作就叫做指令，以v-xxx表示
• 在vue中 以v-xxx开头的就叫做指令
• 指令中风格装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相关DOM操作的绑定

插值表达式

在VUE中我们可以使用插值表达式来调用我们写在data里的数据

    <div id="app" >
        {{ msg }}  //引用data中的声明变量 在我们的{{}}里还能插入各种基础数据类型 还有表达式
    </div>

    const vm = new Vue({
        el:'#app',
        data:{
            msg:'hello Vue'
        }
    
    });

v-text 和 v-html

    <div id="app" >
       <h2 v-text='msg' ></h2>
       <div v-html='msg2' ></div>
    </div>

    const vm = new Vue({
        el:'#app',
        data:{
            msg:'插入标签',
            msg2:'<h3>核桃</h3>'
        }
    
    });

v-if 和 v-show

   <div id="app" >
       <div v-if = "isShow" >
           显示
       </div>
       <div v-else >
           隐藏
       </div>
       <h3 v-show = 'show' >
           hetao
       </h3>
    </div>

    const vm = new Vue({
        el:'#app',
        data:{
            isShow:Math.random() > 0.5,
            show:true
        }
    
    });

我们可以通过页面检视看到 当我们v-if那个标签不显示的时候，我们检查元素是看不到不现实的标签的，而v-show呢，不显示的时候是可以看到标签的，只是这个标签的style="display:none;"让他隐藏了，这说明v-show只通过改变样式display，而v-if则删除或添加这个元素。切换次数频繁的用v-show，切换次数不频繁的用v-if。

v-bind

   <div id="app" >
       <a v-bind:href = 'res.url' :title='res.title' >{{res.name}}</a> // v-bind 可以简写 直接写一个冒号:就可以
       
       <h3 v-bind:class="{active:isActve}"> v-bind的用法</h3>  // 如果isActive为true 就添加一个class='active'
    </div>
    
    <style>
        .active{
            color:red;
        }
    </style>

    const vm = new Vue({
        el:'#app',
        data:{
          res:{
              name:'百度',
              url:'https://www.baidu.com',
              title:'百度一下'
          },
          isActive:true
        }
    
    });

v-on

   <div id="app" >
        <h3>{{num}}</h3>
        <button v-on:click="handleClick" >点我+1</button>
        <div class='box' :class='{active:isActive}' >
            
        </div>
        <button @click='changeColor' >切换颜色</button>// v-on 也有简写 他的简写就是 @ 
    </div>
    
  <style>
      .box{
          width:200px;
          height:200px;
          background-color:red;
      }
      .active{
          background-color:green;
      }
  </style>

    const vm = new Vue({
        el:'#app',
        data:{
          num:0,
          isActive:false
        },
        methods:{
            handleClick(){
                this.num  += 1;
            },
            changeColor(){
                this.isActive = !this.isActive
            }
        }
    
    });

事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

• .stop

• .prevent

• .self

• .capture

• .once

• .passive

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 --> 
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

为什么在HTML中监听事件

1.扫一眼HTML模板便能轻松定位JavaScript代码里对应的方法。 2.因为你无需在JavaScript里手动绑定事件,你的ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。 3.当一个ViewModel被销毁时,所有的事件处理器都会自动被删除。无须担心如何清理它们。

v-for

   <div id="app" >
       <ul>
           // item是循环的每项 index是每项的索引
           // 对应的除了数组对象 我们也可以遍历数组 (val,key)
           <li v-for= '(item,index) in menus' :key = 'item.id' > 
           // key 用来给vue一个提示以便他能跟踪每个节点身份，从而重用和重新排序现有元素
               <h3> {{index}}  id:{{item.id}} 姓名:{{item.name}}</h3>
           </li>
       </ul>
   </div>
    

    const vm = new Vue({
        el:'#app',
        data:{
             msg:[
                 {id:1,name:'张三'},
                 {id:2,name:'赵四'},
                 {id:3,name:'王五'},
                 {id:4,name:'马六'}
             ]
        },
        methods:{
         
        }
    
    });

v-model

数据的双向绑定

   <div id="app" >
       <input type="text" v-model = 'msg'>
       <p>{{msg}}</p>
       </input>
   </div>
    

    const vm = new Vue({
        el:'#app',
        data:{
            msg:'hetao'
        },
        methods:{
         
        }
    
    });

v-model.lazy不实时变更 v-model.trim省略前后空格

侦听器watch

   <div id="app" >
       <input type="text" v-model = 'msg'>
      
       </input>
       <p>{{msg}}</p>
       <p>{{msg2}}</p>
       <button @click='msg2[0].name = "jack"' >改名</button>
   </div>
    

    const vm = new Vue({
        el:'#app',
        data:{
             msg:'1',
             msg2:[{name:'hetao'}]
        },
        methods:{
         
        },
        watch:{
            // 这也是键值对形式 key为data里声明属性名
            // value 监视后的行为
            'msg':function(newV,oldV){
                //newV新值 oldV旧值
                console.log(newV,oldV);
            },
            //深度检视： object | Array 复杂的数据类型
            "msg2":{
                deep:'true',
                handler:function(newV,oldV){
                    console.log（oldV[0.name],newV[0].name）
                }
            }
        }
    
    });

computed 计算属性

计算属性最大的优点：产生缓存 如果数据没有发生变化 直接从缓存中取

    <div id="app" >
       {{reverseMsg}}
       <h3>{{fullName}}</h3>
    </div>

    const vm = new Vue({
        el:'#app',
        data:{
            msg:'hello world',
            firstName:'核',
            lastName:'桃'
        },
        computed:{
            reverseMsg:function(){
                return this.msg.split('').reverse().join('')
            },
            fullName:function(){
                return this.firstName + this.lastName;
            }
        }
    
    });

filters 过滤器

    <div id="app" >
        <h3>{{price | myPrice('$')}}</h3>
        <h3>{{msg | myReverse}}</h3>
    </div>

    //创建全局过滤器
    Vue.filter('myReverse',(val)=>{
        return val.split('').reverse().join('')
    })
    const vm = new Vue({
        el:'#app',
        data:{
            price:10,
            msg:'hello 过滤器'
        },
        // 局部过滤器
        filters:{
            myPrice:function(price,a){
                return a + price;
            }
        }
    
    });