Vue 内置指令（三）

v-on和v-bind这里我们就不说了，不知道的可以去看我之前的文章

v-model

v-model指令用来在表单、及元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素，尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据

 <div id="app">
        <input type="text" v-model="message">{{message}}</div>
    <script src="./Vue.js/vue.js"></script>
    <script>
        const app = new Vue({
       el: "#app",
       data: {
           message: '你好啊'
   }
   })
    </script>

效果就是实现了双向绑定，会同时改

一般我们怎么用呢？

 <div id="app">
    <label for="male">
      <input type="radio"  id="male" v-model="sex" value="男">男 
      <!-- 当使用v-model进行绑定时可以省略name="sex" -->
      </label>
      <label for="female">
      <input type="radio"  id="female" v-model="sex" value="女">女
      </label>
   <h3>你的性别是: {{sex}}</h3>
  </div>
  <script src="../vue.js"></script>
  <script>
  const app = new Vue({
  el: "#app",
   data: {
   sex:"男"
   }
   })
    </script>

v-text

用于更新元素的文本内容

<div id="app">
       <span>{{message}}</span>
        <span v-text="message"></span>
    <script src="./Vue.js/vue.js"></script>
    <script>
        const app = new Vue({
       el: "#app",
       data: {
           message: '你好啊'
   }
   })
    </script>

v-html

v-html指令用于更新元素的innerHTML，该部分内容作为普通的HTML代码插入。不会作为Vue的模板进行编译

        <span v-html="message"></span>
    <script src="./Vue.js/vue.js"></script>
    <script>
        const app = new Vue({
       el: "#app",
       data: {
           message: '<h1>你好</h1>'
   }
   })
    </script>

v-once

v-once指令可以让元素或组件只渲染一次，该指令不需要表达式。之后再次渲染时，元素/组件及其所有的子节点将被视为静态内容被跳过。这可以用于优化性能

 <div id="app">
        <h1>{{title}}</h1>
        <a v-for="nav in navs" :href="nav.url" v-once>{{nav.name}}</a>
        </div>
    <script src="./Vue.js/vue.js"></script>
    <script>
        const app = new Vue({
       el: "#app",
       data: {
           title:'v-once的用法',
           navs:[
               {name:'首页',url:'/home'},
               {name:'新闻',url:'/news'},
               {name:'视频',url:'/video'}
           ]
   }
   })
    </script>

pre

v-pre指令也不需要表达式，用于跳过这个元素和它的子元素的编译过程。v-pre指令可以用来显示原始Mustache标签。对于大量没有指令的节点使用v-pre指令可以加快编译速度

 <div id="app">
        <h1 v-pre>{{message}}</h1>
        </div>
    <script src="./Vue.js/vue.js"></script>
    <script>
        const app = new Vue({
       el: "#app",
       data: {
          message:"你好"
   }
   })
    </script>

页面直接显示： {{message}}

v-on事件修饰符

在事件处理程序中调用 event.preventDefault()或event.stopPropagation()是非常常见的需求。为了解决这个问题，Vue.js提供了事件修饰符

.stop : 调用event.stopPropagation()
.prevent :调用event.preventDefault()
.capture :添加事件监听器时使用capture模式（即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发，就是谁有该事件修饰符，就先触发谁。 ）
.self :只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyCode|keyAlias} :只当事件是从特定按键触发时才触发回调
.native :监听组件根元素的原生事件
.once ：只触发一次回调
.left :只当按鼠标左键时才触发
.right :只当按鼠标右键时才触发
.middle :只当按鼠标中键时才触发
.passive:以{passive:true}模式添加侦听器