>v--cloak 遮蓋 當網絡較慢，網頁還在加載 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼，這時使用v-cloak會使這些樣式會在 Vue 實例編譯結束時，從綁定的 HTML 元素上被移除。 * 這個指令使用在元素上直到關聯實例結束編譯； * 因為指令生命周期的特殊性，`v--cloak`常用來處理雙括號語法閃爍問題； * 這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢 ~~~ <div id="app" v-cloak> <h2>{{message}}</h2> </div> <script> // 在vue解析之前, div中有一個屬性v-cloak // 在vue解析之后, div中沒有一個屬性v-cloak setTimeout(function () { const app = new Vue({ el: '#app', data: { message: '你好啊' } }) }, 1000) //setTimeout延遲1000毫秒 </script> ~~~ >v-bind -- 標簽屬性動態綁定 * v-bind 是讓標簽屬性可以動態的使用data參數或者寫一些簡單的js表達式; * 和`v-text`，`v-html`不同,它倆是針對標簽中的內容，v-bind 是針對標簽中的屬性， 但是這個三個指令和雙括號語法不同，這三個指令都是在標簽屬性中定義; * v-bind的縮寫是冒號':'; ~~~ <div id="app"> <img :src="imgURL" alt=""> <a :href="aHref">百度一下</a> </div> <script> const app = new Vue({ el: '#app', data: { imgURL: '圖片地址', aHref: 'http://www.baidu.com' } }) </script> ~~~ >v-on -- 綁定事件 * 可以用'v-on'指令監聽 DOM 事件 * 'v-on'中要處理的邏輯比較復雜，因此不支持直接在'v-on'中直接寫js代碼，但支持方法，內聯處理，和對象的形式(2.4.0+ 支持) * 著重說明不支持在'v-on'中寫js代碼指的是: ~~~ <button v-on:click="alert('a')">v-on按鈕</button> // 如果這么寫必須是在vue實例對象的method中有定義alter方法才行，否則不支持js的alert使用。 ~~~ * 'v-on' 的縮寫是@符號 >阻止事件冒泡 -- stop ~~~ <input type="button" value="點擊" @click.stop="inputClick"> ~~~ >事件修飾符 >*事件修飾符可以解決到點擊事件自身帶的一些事件效果* `.stop`: 阻止事件冒泡 `.prevent`: 阻止默認事件 `.capture`: 添加事件偵聽器時使用事件捕獲模式 `.self`: 只當事件在該元素本身（比如不是子元素）觸發時觸發回調 `.once`: 事件只觸發一次 `.native`: 給組件綁定點擊事件 http://www.hmoore.net/cyyspring/vuejs/936538