vue框架學習

通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定：

<span v-once>這個將不會改變: {{ msg }}</span>

 

指令是帶有 v- 前綴的特殊屬性。

指令用於在表達式的值改變時，將某些行爲應用到 DOM 上。

數據綁定最常見的形式就是使用 {{...}}（雙大括號）的文本插值

使用 v-html 指令用於輸出 html 代碼

HTML 屬性中的值應使用 v-bind 指令。

v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入元素。

修飾符是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。

v-model 指令用來在 input、select、text、checkbox、radio 等表單控件元素上創建雙向數據綁定，根據表單上的值，自動更新綁定的元素的值。

按鈕的事件我們可以使用 v-on 監聽事件，並對用戶的輸入進行響應。

v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組並且 site 是數組元素迭代的別名。

我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時纔會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。

事件修飾符

Vue.js 爲 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通過由點(.)表示的指令後綴來調用修飾符。

• .stop
• .prevent
• .capture
• .self
• .once

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能點擊一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

 

自定義事件

父組件是使用 props 傳遞數據給子組件，但如果子組件要把數據傳遞回去，就需要使用自定義事件！

我們可以使用 v-on 綁定自定義事件, 每個 Vue 實例都實現了事件接口(Events interface)，即：

• 使用 $on(eventName) 監聽事件
• 使用 $emit(eventName) 觸發事件

另外，父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。

鉤子

鉤子函數

指令定義函數提供了幾個鉤子函數（可選）：

• bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。

• inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）。

• update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前後的綁定值，可以忽略不必要的模板更新（詳細的鉤子函數參數見下）。

• componentUpdated: 被綁定元素所在模板完成一次更新週期時調用。

• unbind: 只調用一次， 指令與元素解綁時調用。

鉤子函數參數

鉤子函數的參數有：

• 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: 傳給指令的參數。例如 v-my-directive:foo， arg 的值是 "foo"。
  • modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。
• vnode: Vue 編譯生成的虛擬節點。
• oldVnode: 上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。