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