2vue指令可以直接赋值修改，vm.msg="爱您"。单向数据绑定 radio text address email s

解决闪烁问题 v-cloak

插值表达式 {{msg}}
由于单线程逐行进行运行
将network 中的online改为slow3G页面直接显示{{msg}}

可以在前后放任何内容

     <div id="app">
     <p>{{msg}}</p>
     </div>
     <script src="./lib/vue.js"></script>
     <script>
     var vm = new Vue({
      el: "#app",
      data: {
          msg: "123"
      }
      })
     </script>

出现页面闪烁的问题，看到了插值表达式

解决办法：v-cloak自动移除，解决闪烁问题， css属性+js

   <head>
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
    [v-cloak]{
       display: none;
    }
  </style>
  </head>
  
  <body>
      <div id="app">
          <p v-cloak>{{msg}}</p>
      </div>
      <script src="./lib/vue.js"></script>
      <script>
          var vm = new Vue({
              el: "#app",
              data: {
                  msg: "123"
              }
          })
      </script>
  </body>

没有闪烁问题 v-text

替换标签中原本内部内容

没有闪烁问题

  <head>          
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
 </head>
 
 <body>
     <div id="app">
         <p v-cloak>{{msg}}</p>
         <p v-text="msg"></p>
     </div>
     <script src="./lib/vue.js"></script>
     <script>
         var vm = new Vue({
             el: "#app",
             data: {
                 msg: "123"
             }
         })
     </script>
 </body>

将标签渲染到div中去 v-html

     <div id="app">
            <p v-cloak>{{msg}}</p>
            <p v-text="msg"></p>
            <div v-html="msg2"></div>        
        </div>
        <script src="./lib/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: "123",
                    msg2:"<h1>我爱你</h1>"
                }
            })
        </script>

将属性值放到属中，绑定属性指令 v-bind:title="mytitle" 缩写v-bind<=>:

v-bind 会将mytitle当作js解析代码执行 mytitle是变量
v-bind:title="mytitle + '123'" 表达式来执行字符串的连接符

内部可以写合法js表达式

 <div id="app">
     <input type="button" value="按钮" v-bind:title="mytitle">       
 </div>
 <script src="./lib/vue.js"></script>
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             mytitle:"我是hover的属性"
         }
     })
 </script>

v-on: <=>@ 时间绑定机制常见的事件都可以应用

v-on:click="alert('hello')"中间是表达式，不能出来弹框会报错

需要用方法来代替，methods属性实现该功能

  <div id="app">
      <input type="button" value="点击事件" v-bind:title="mytitle" v-on:click="show">          
  </div>
  <script src="./lib/vue.js"></script>
  <script>
      var vm = new Vue({
          el: "#app",
          data: {
          },
          methods:{
              // 这个定义方法
              show:function(){
                  alert("我喜欢你")
              }
          }
      })
  </script>

在vm实例中，想要调用data中的数据，调用methods中方法用this.属性名或者this.方法名
this指new中创建的vm实例对象
事件修饰符
- .stop阻止冒泡从里向外，写在里面
- .prevent阻止默认行为 a链接的跳转
- .capture 添加事件监听时，事件捕获模式从外向里写在外面
- .self 当事件在该元素本身触发时触发回调（自身触发），点击本身时的冒泡行为
- .once 事件触发一次只阻止一次事件触发

stop

    <div id="app"> 
        <div class="inner" @click="divHandler">
            <input type="button" value="戳他" v-bind:title="mytitle" @click.stop="btnHandler">  
        </div>   
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: { 
            },
            methods:{
                // 这个定义方法
                divHandler:function(){
                    alert("div的我喜欢你")
                },
                btnHandler:function(){
                    alert("btn的我喜欢你")
                }
            }
        })
    </script>

prevent

无顺序的问题 .prevent.stop

      <div id="app"> 
            <div class="inner" @click="divHandler">
                <!-- <input type="button" value="戳他" v-bind:title="mytitle" @click.stop="btnHandler">   -->
                <a href="www.baidu.com" @click.prevent.stop="baidu">不跳转到百度</a>
            </div>   
        </div>
        <script src="./lib/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: { 
                },
                methods:{
                    // 这个定义方法
                    divHandler:function(){
                        alert("div的我喜欢你")
                    },
                    baidu:function(){
                        alert("百度不跳转")
                    }
                }
            })
        </script>

capture 捕获外层向里

     <div id="app"> 
         <div class="inner" @click.capture="divHandler">
             <input type="button" value="戳他" v-bind:title="mytitle" @click="btnHandler">   
         </div>   
     </div>
     <script src="./lib/vue.js"></script>
     <script>
         var vm = new Vue({
             el: "#app",
             data: { 
             },
             methods:{
                 // 这个定义方法
                 divHandler:function(){
                     alert("div的我喜欢你")
                 },
                 btnHandler:function(){
                     alert("btn的我喜欢你")
                 }
             }
         })
     </script>

.self 点击时才触发本身的事件

               <div id="app"> 
                 <div class="inner" @click.self="divHandler">
                     <input type="button" value="戳他" v-bind:title="mytitle" @click="btnHandler">  
                     <!-- <a href="www.baidu.com" @click.prevent.stop="baidu">不跳转到百度</a> -->
                 </div>   
             </div>
             <script src="./lib/vue.js"></script>
             <script>
                 var vm = new Vue({
                     el: "#app",
                     data: { 
                     },
                     methods:{
                         // 这个定义方法
                         divHandler:function(){
                             alert("div的我喜欢你")
                         },
                         btnHandler:function(){
                             alert("btn的我喜欢你")
                         }
                     }
                 })
             </script>

.once 阻止一次

   <div id="app">  
                 <a href="http://www.baidu.com" @click.prevent.once="baidu">不跳转到百度</a> 
         </div>
         <script src="./lib/vue.js"></script>
         <script>
             var vm = new Vue({
                 el: "#app",
                 data: { 
                 },
                 methods:{
                     // 这个定义方法 
                     baidu:function(){
                         alert("百度不跳转")
                     }
                 }
             })
         </script>

v-model 数据的双向绑定

属性挂在到vm实例中，this.msg调用
可以直接赋值修改，vm.msg="爱您"。单向数据绑定

双向数据绑定，利用表单元素与用户交互

  <input type="text" name="" id="" value="msg">//不对

属性绑定 v-bind只能实现数据的单项绑定，从m自动保存到v中去，无法实现双向绑定
```
  <input type="text" name="" id="" v-bind:value="msg">
```
v-model 双向绑定可以实现数据表单元素和model中数据的双向绑定
```
  <input type="text" name="" id="" v-model:value="msg">
```

radio text address email select checkbox textarea....

2vue指令