vue.js 四（指令和自定义指令）
官方的指令說明已經(jīng)很簡單了，這里再寫一遍，也是自己加深一下印象
v-text 就是寫入單純的文本，可以忽略這個指令直接雙花括號代替
<span v-text="msg"></span> <!-- 和下面的一樣 --> <span>{{msg}}</span>v-html 更新元素的 innerHTML，如果取回的值里面包含了html的樣式，可以使用這個指令。
以下抄寫了官方注意事項，對于用戶輸入的HTML，顯示的時候需要謹慎處理。如果是服務(wù)器自己生成的HTML，完全由開發(fā)者掌控的代碼，可以忽略
注意：內(nèi)容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯?。如果試圖使用?v-html?組合模板,可以重新考慮是否通過使用組件來替代。
在網(wǎng)站上動態(tài)渲染任意 HTML 是非常危險的，因為容易導(dǎo)致?XSS 攻擊。只在可信內(nèi)容上使用?v-html，永不用在用戶提交的內(nèi)容上。
v-show?
根據(jù)表達式之真假值，切換元素的?display?CSS 屬性。
當條件變化時該指令觸發(fā)過渡效果。
簡單說就是控制當前指令的標簽是否顯示
v-if，v-else, v-else if
根據(jù)表達式的值的真假條件渲染元素。在切換時元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建。如果元素是?<template>，將提出它的內(nèi)容作為條件塊。
當條件變化時該指令觸發(fā)過渡效果。
條件判斷，這里簡單的條件判斷還行，復(fù)雜的判斷還是直接在模型里處理吧。
v-on
綁定事件監(jiān)聽器。事件類型由參數(shù)指定。表達式可以是一個方法的名字或一個內(nèi)聯(lián)語句，如果沒有修飾符也可以省略。
用在普通元素上時，只能監(jiān)聽?原生 DOM 事件。用在自定義元素組件上時，也可以監(jiān)聽子組件觸發(fā)的自定義事件。
在監(jiān)聽原生 DOM 事件時，方法以事件為唯一的參數(shù)。如果使用內(nèi)聯(lián)語句，語句可以訪問一個?$event?屬性：?v-on:click="handle('ok', $event)"。
修飾符
- .stop?- 調(diào)用?event.stopPropagation()。
- .prevent?- 調(diào)用?event.preventDefault()。
- .capture?- 添加事件偵聽器時使用 capture 模式。
- .self?- 只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。
- .{keyCode | keyAlias}?- 只當事件是從特定鍵觸發(fā)時才觸發(fā)回調(diào)。
- .native?- 監(jiān)聽組件根元素的原生事件。
- .once?- 只觸發(fā)一次回調(diào)。
- .left?- (2.2.0) 只當點擊鼠標左鍵時觸發(fā)。
- .right?- (2.2.0) 只當點擊鼠標右鍵時觸發(fā)。
- .middle?- (2.2.0) 只當點擊鼠標中鍵時觸發(fā)。
- .passive?- (2.3.0) 以?{ passive: true }?模式添加偵聽器
在子組件上監(jiān)聽自定義事件（當子組件觸發(fā) “my-event” 時將調(diào)用事件處理器）：
<my-component @my-event="handleThis"></my-component> <!-- 內(nèi)聯(lián)語句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- 組件中的原生事件 --> <my-component @click.native="onClick"></my-component>注意上面對于vue版本的限制，低版本不支持！主要適用于各類事件的處理。
v-bind?
動態(tài)地綁定一個或多個特性，或一個組件屬性到表達式。
在綁定屬性時，屬性必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
沒有參數(shù)時，可以綁定到一個包含鍵值對的對象。注意此時?class?和?style?綁定不支持數(shù)組和對象。
?v-model
v-model指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。
常用的表單控件如select， input，textarea 等
如果是select綁定的值會直接選中，其他的輸入則直接選擇文本
v-pre
官方的解釋是：跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節(jié)點會加快編譯。
至今沒有怎么用過
v-cloak
這個指令保持在元素上直到關(guān)聯(lián)實例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。
這個指令使用場景比較特殊，在初始化的時候會顯示原始的代碼，例如
<ul v-for="item in items"><li>{{ item.name }}</li> </ul>頁面加載未完成時會顯示
{{ item.name }}這時候如果加入了這個指令標簽在ul上
<ul v-cloak v-for="item in items"><li>{{ item.name }}</li> </ul>然后對應(yīng)的全局css上加入
[v-cloak] {display: none; }頁面初始化未完成的時候，整個標簽會被隱藏，加載完成后這個標簽會自動去掉，顯示完整的結(jié)果。
v-once
只渲染元素和組件一次。隨后的重新渲染,元素/組件及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容并跳過。這可以用于優(yōu)化更新性能。
<div v-once><p>{{msg}}</p></div><div v-on:click="changeValue">點擊修改msg的值</div>我們綁定一個點擊事件試圖網(wǎng)頁渲染完成后去修改msg的值，事件觸發(fā)有此標簽的內(nèi)容不會再更改。
---------------------------------------------------------------------------------------------------------
標簽內(nèi)容有的直接拷貝的官方網(wǎng)頁上的說明，部分附上了簡單的實例
所有的內(nèi)容嘗試一遍，還是有些意外的收貨的
可能剛開始項目使用過程中，只用到了部分指令，在都了解了一遍后，我又把原來項目里面部分功能重新修改了一遍
有的功能一個指令能完成的，我可能用了好幾個指令去協(xié)作完成，畢竟剛開始看官方文檔的時候，看得不是很全面
看文檔還是要多動手嘗試，加深印象，將來用起來更加得心應(yīng)手
下面附上一個自定義指令
main.js
import Vue from 'vue' import App from './App' import router from './router'Vue.config.productionTip = falseVue.directive('title', {inserted: function (el, binding) {let title = binding.value;if (title) {document.title = binding.value;}} });/* eslint-disable no-new */ new Vue({el: '#app',router,template: '<App/>',components: { App } })然后我們的vue文件里面就可以使用v-title指令了
<template><div v-title="'這里是標題'">這里是內(nèi)容</div> </template><script>export default {name: 'home',components: {},data() {return {}} } </script> <style lang="scss" scoped></style>注意指令內(nèi)容里面單引號標識這是個字符串，不用單引號，指令值表示變量的名稱，要在data里面聲明對應(yīng)的變量名
<template><div v-title="title">這里是內(nèi)容</div> </template><script>export default {name: 'home',components: {},data() {return {title:"這里是標題"}} } </script> <style lang="scss" scoped></style>全局指令注冊屬于全局API，全局注冊指令用法
// 注冊 Vue.directive('my-directive', {bind: function () {},inserted: function () {},update: function () {},componentUpdated: function () {},unbind: function () {} })// 注冊（傳入一個簡單的指令函數(shù)） Vue.directive('my-directive', function () {// 這里將會被 `bind` 和 `update` 調(diào)用 })指令定義函數(shù)提供了幾個鉤子函數(shù)說明，只需要聲明用到的函數(shù)，不需要的可以省略：
-
bind: 只調(diào)用一次，指令第一次綁定到元素時調(diào)用，用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作。
-
inserted: 被綁定元素插入父節(jié)點時調(diào)用（父節(jié)點存在即可調(diào)用，不必存在于 document 中）。
-
update: 被綁定元素所在的模板更新時調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新。
-
componentUpdated: 被綁定元素所在模板完成一次更新周期時調(diào)用。
-
unbind: 只調(diào)用一次， 指令與元素解綁時調(diào)用。
鉤子函數(shù)被賦予了以下參數(shù)：
- el: 指令所綁定的元素，可以用來直接操作 DOM 。
- binding: 一個對象，包含以下屬性：
- name: 指令名，不包括?v-?前綴。
- value: 指令的綁定值， 例如：?v-my-directive="1 + 1", value 的值是?2。
- oldValue: 指令綁定的前一個值，僅在?update?和?componentUpdated?鉤子中可用。無論值是否改變都可用。
- expression: 綁定值的字符串形式。 例如?v-my-directive="1 + 1"?， expression 的值是?"1 + 1"。
- arg: 傳給指令的參數(shù)。例如?v-my-directive:foo， arg 的值是?"foo"。
- modifiers: 一個包含修飾符的對象。 例如：?v-my-directive.foo.bar, 修飾符對象 modifiers 的值是?{ foo: true, bar: true }。
- vnode: Vue 編譯生成的虛擬節(jié)點，查閱?VNode API?了解更多詳情。
- oldVnode: 上一個虛擬節(jié)點，僅在?update?和?componentUpdated?鉤子中可用。
參數(shù)使用如下
Vue.directive('demo', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: ' + s(binding.name) + '<br>' +'value: ' + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: ' + s(binding.arg) + '<br>' +'modifiers: ' + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')} })?
指令在綁定網(wǎng)頁元素值有優(yōu)勢，例如某些網(wǎng)頁上的值顯示需要保留兩位小數(shù)
但是涉及到需要附帶元素的css樣式，需要附帶一些參數(shù)控制等，還是需要選擇使用插件解決。
轉(zhuǎn)載于:https://www.cnblogs.com/stealth7/p/6958252.html
總結(jié)
以上是生活随笔為你收集整理的vue.js 四（指令和自定义指令）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Android 四大组件之Conten
- 下一篇： vue 组件之间数据传递（七）