乘著下班之前再來一篇，不知道為什么就是托著不讓我走??
1.插值
插入文本
就是簡單的innerHTML的值綁定
<span>Message: {{ msg }}</span>
就是當Vue實例的msg屬性發(fā)生變化的時候界面上的顯示內(nèi)容也會發(fā)生相應的變化。
也可以讓界面上的值只綁定一次，后面msg變化時不隨著改變。
<span v-once>This will never change: {{ msg }}</span>
加一個 v-once 指令即可
插入HTML節(jié)點
<div v-html="rawHtml"></div>
當指令執(zhí)行結束后 div 會被替換成 rawHtml
插入屬性
<div v-bind:id="dynamicId"></div>
同樣適用于BOOL類型的值
<button v-bind:disabled="isButtonDisabled">Button</button>
插入JavaScript表達式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
下面兩種寫法是錯的
<!-- 這是聲明變量，不是表達式-->
{{ var a = 1 }}
<!--控制流語句不會工作，適用三元表達式 -->
{{ if (ok) { return message } }}
要注意的是只能訪問到系統(tǒng)自帶的全局數(shù)據(jù)，例如 split() reverse() Date() Math(),不能在表達式中訪問自定義的全局變量
2.指令
Vue.js的指令都是以 v- 開頭的，指令的作用是當和DOM相關的數(shù)據(jù)發(fā)生變化的時候對DOM進行的相應的操作。
例如：
<p v-if="seen">Now you see me</p>
當 seen == true 的時候 p 標簽會被加載到父標簽。反之就會從父標簽刪除。
指令傳入?yún)?shù)
有些指令需要傳入?yún)?shù)，參數(shù)加載" : " 后面例如：
<a v-bind:href="url"></a>
這里的表示的是 a 標簽的 herf 屬性會隨著 url 的值變化而變化。使用 v-bind 可以很好的將系統(tǒng)的屬性和Vue的變量綁定在一起。
另一個例子??
<a v-on:click="doSomething">
這里是將 a 標簽的點擊事件和 Vue 的 doSomething 函數(shù)綁定在一起
修飾符
修飾符是以 " . " 表示的。表示指令是以一種特殊的方式綁定的。
例如：
<form v-on:submit.prevent="onSubmit"></form>
.prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:
.prevent 告訴 v-on 當submit被觸發(fā)的時候調用 onSubmit 函數(shù)的同時調用 event.preventDefault()
3.過濾器
過濾器用 " | " 表示，常常放在JavaScript末尾。只能使用在 "{{}}" 和 v-bind 指令中
例子??
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
上面怎么理解，我現(xiàn)在就跟你講講
過濾器是一種接受一個值，返給你一個值的存在
例如：
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
" | " 前面一個是參數(shù)，后面一個數(shù)過濾器
{{ message | capitalize }}例子中 message 是傳入的參數(shù)， capitalize 是表示過濾器
過濾器是可以連著起來玩得??。例如：
{{ message | filterA | filterB }}
可以這樣玩，完全是取決于過濾器是一種有輸入有輸出的特點。
解釋一下上面的那個例子??吧，把message輸入到filterA,產(chǎn)生一個結果，然后把結果輸入到filterB，最后得到是最終結果。
filter 是一個JavaScript的函數(shù)，所以可以引用參數(shù)
例如：
{{ message | filterA('arg1', arg2) }}
message是filterA的第一個參數(shù)，字符串'arg1'是第二個參數(shù)，變量arg2是第三個參數(shù)。
4.簡寫
Vue.js給兩個常用的指令提供了簡寫
例子??
v-bind
<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>
v-on
<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>
總結：
??又下班啦，好嚇人剛剛有個上級突然來問我問題。。。
