技術標籤：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}模式新增偵聽器