資訊專欄INFORMATION COLUMN
摘要：指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于。對象形式佐客湯姆咪口修飾符修飾符是以半角句號指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。修飾符修飾符允許你控制由精確的系統修飾符組合觸發的事件。
指令
指令(Directives)是帶有v-前綴的特殊屬性。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于DOM。
v-if條件判斷Title
Paragraph 1
Paragraph 2
元素當做不可見的包裹元素
ABNot A/B/C
v-if是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
v-show顯示判斷Hello!
與v-if不同，v-show只是進行CSS的變換。
v-bind屬性綁定...
綁定url到href，當url有變化可響應dom重渲染，可縮寫成
...v-on事件綁定
...
綁定doSomething函數到a標簽的點擊事件，可縮寫成
...v-for循環
可循環渲染動態選項，數組形式
與react不同，react需要使用map方法遍歷返回組件，vue直接把循環掛在標簽屬性上。
對象形式
data: {
options: {
jock: "佐客",
tom: "湯姆",
miko: "咪口"
}
}
修飾符
修飾符(Modifiers)是以半角句號.指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。例如，.prevent修飾符告訴v-on指令對于觸發的事件調用 event.preventDefault()：
事件修飾符.prevent => event.preventDefault()
.stop => event.stopPropagation()
.capture 使用事件捕獲
.self 只當在 event.target 是當前元素自身時觸發處理函數，即事件不是從內部元素觸發的
.once 事件只觸發一次
按鍵修飾符全部的按鍵別名：
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
系統修飾鍵.ctrl
.alt
.shift
.meta
在 Mac 系統鍵盤上，meta 對應 command 鍵 (?)。在 Windows 系統鍵盤 meta 對應 Windows 徽標鍵 (?)。
.exact 修飾符.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。
鼠標按鈕修飾符
.left
.right
.middle
這些修飾符會限制處理函數僅響應特定的鼠標按鈕。
計算屬性computed基礎例子如下
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
var vm = new Vue({
el: "#example",
data: {
message: "Hello"
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split("").reverse().join("")
}
}
})
computed下的reversedMessage方法依賴data下的變量message，當message發生變量，reversedMessage會重新計算結果，與mobx中的computed的作用相同。
以上例子也可通過method屬性完成，如下
Reversed message: "{{ reversedMessage() }}"
// 在組件中
methods: {
reversedMessage: function () {
return this.message.split("").reverse().join("")
}
}
不同的是計算屬性是基于它們的依賴進行緩存的。
計算屬性computed也可同時設置setter和getter方法取代直接寫funciton，如下：
computed: {
fullName: {
// getter
get: function () {
return this.firstName + " " + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(" ")
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
偵聽器watch
new Vue({
data: {
watchData: ""
},
watch: {
watchData: function (newData, oldData) {
// doSomething
}
}
})
Class與Style
class的對象形式，與classnames模塊類似
class數組形式
data: {
activeClass: "active",
errorClass: "text-danger"
}
class對象與數組混合使用
在組件上使用
Vue.component("my-component", {
template: ""
})
結果為：
style對象形式
data: {
activeColor: "red",
fontSize: 30
}
style數組形式
表單輸入綁定
v-model指令在表單input及textarea元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。v-model會忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue實例的數據作為數據來源。你應該通過JavaScript在組件的data選項中聲明初始值。
如:
Message is: {{ message }}
多行文本
Multiline message is:.lazy{{ message }}
在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步：
.number
如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符：
.trim如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：
組件組件 (Component) 是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以表現為用is特性進行了擴展的原生 HTML 元素。
請注意，對于自定義標簽的命名Vue.js不強制遵循W3C規則 (小寫，并且包含一個短杠)，盡管這被認為是最佳實踐。
全局注冊組件
Vue.component("my-component", {
// 選項
})
局部注冊組件
var Child = {
template: "A custom component!"
}
new Vue({
// ...
components: {
// 將只在父組件模板中可用
"my-component": Child
}
})
由于html元素之間不能隨意嵌套，如table、ul、ol，所以在自定義組件中使用這些受限制的元素時會導致一些問題，例如：
自定義組件
但是如果代碼來自以下字符串模板，則沒有這個限制：