總結(jié)下vue的語(yǔ)法贰军，雖然文檔都能查到，但偏于教程不易查找蟹肘。
1.內(nèi)容綁定 {{}}
雙大括號(hào)綁定內(nèi)容词疼，微信小程序也是這樣。支持js表達(dá)式帘腹。
<div>{{message}}</div>
雙大括號(hào)輸出的僅是字符串寒跳，可以用v-html將其轉(zhuǎn)化為html代碼，類似危險(xiǎn)html操作竹椒。
2.元素屬性綁定 v-bind
v-bind:屬性名稱∶追可以縮寫成 :屬性名稱
可以將元素的屬性與vue實(shí)例的數(shù)據(jù)進(jìn)行單向綁定胸完，即：數(shù)據(jù)變化界面會(huì)刷新，但界面上的變化不會(huì)更新vue實(shí)例中的數(shù)據(jù)翘贮∩蘅可以用方括號(hào)實(shí)現(xiàn)動(dòng)態(tài)綁定。
示例
<input v-bind:value="message"/>
<input :value="message"/>
// 動(dòng)態(tài)綁定
<input v-bind:['value']="message"/>
2.5表單輸入雙向綁定 v-model
// 這樣在input框輸入內(nèi)容時(shí)候會(huì)一起修改vue實(shí)例中的message變量
<input v-model="message" placeholder="edit me">
// 其實(shí)上面這個(gè)v-model等同于一個(gè)v-bind與v-on組合
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
// 自定義組件內(nèi)部需要有一個(gè)名為value的props狸页，并且將其綁定到自己的模板中某個(gè)輸入框的value屬性上锨能。
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
// 然后就可以使用v-model了
<custom-input v-model="message" />
// 上面這個(gè)基于value屬性和input事件的綁定是默認(rèn)行為，可以通過(guò)在組件中加入model屬性進(jìn)行修改
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
2.6 在自定義組件上使用v-model的問(wèn)題
注意是組件上芍耘，不是組件中址遇。類似react自定義組件中，將值通過(guò)props傳入組件斋竞，在組件內(nèi)部適當(dāng)時(shí)候通過(guò)callback的方式通知父組件倔约，然后父組件在setState改變這個(gè)值，然后由于setstate會(huì)刷新父組件坝初，最后修改過(guò)的值又傳回給子組件浸剩。這個(gè)過(guò)程在react中比較繁瑣。Vue中可以通過(guò)v-model簡(jiǎn)單實(shí)現(xiàn)鳄袍。但是有時(shí)候這種子組件可以改變父組件值的行為會(huì)產(chǎn)生一些問(wèn)題绢要，并且隱藏了改變的過(guò)程，有些時(shí)候希望在chagne的時(shí)候順便做些其他事情拗小，這種自動(dòng)的方式就不合適了重罪。
3.事件監(jiān)聽 v-on
v-on:事件名稱。可以縮寫成 @事件名稱
將元素的事件與vue實(shí)例的方法綁定蛆封。同樣支持動(dòng)態(tài)唇礁。
示例1 原生html元素的事件監(jiān)聽
<div v-on:click="sayHello" />
<div @click="sayHello" />
// 動(dòng)態(tài)
<div v-on:['click']="sayHello" />
示例2vue組件的事件監(jiān)聽
可以通過(guò)v-on:event-name 來(lái)監(jiān)聽vue組件中的事件，在被監(jiān)聽組件內(nèi)部通過(guò)this.$emit('event-name)發(fā)送事件惨篱，注意vue中推薦使用kebab-case的形式命名事件盏筐，不使用駝峰命名法，因?yàn)槎紩?huì)被轉(zhuǎn)為小寫砸讳。
<my-component v-on:my-event="doSomething"></my-component>
// 內(nèi)部emit發(fā)送事件琢融，可攜帶參數(shù)
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
但是有時(shí)候僅僅想監(jiān)聽一下這個(gè)組件的click事件，這時(shí)候在組件內(nèi)部通過(guò)emit的方式就有點(diǎn)繁瑣了簿寂，這時(shí)候可以使用v-on的 .native修飾符漾抬。
<my-component v-on:click.native="onClick"></my-component>
注意這里只是監(jiān)聽了組件內(nèi)部根元素的事件，也就是說(shuō)根元素必須有這個(gè)事件常遂，如根元素是個(gè)div此時(shí)監(jiān)聽他的input事件是不行的纳令。
4.條件渲染 v-if 、v-else-if克胳、v-else與v-show
當(dāng)條件為truthy的時(shí)候才渲染一個(gè)模塊平绩。v-else-if、v-else必須緊根 v-if后面漠另，否則無(wú)效捏雌。
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ??</h1>
也可以一次性判斷多個(gè)模塊，外面套個(gè)template元素笆搓，這個(gè)template即看不見也不影響布局性湿，微信小程序里面同樣的元素叫做black。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-show與v-if差不多满败，區(qū)別是v-show不支持template也不支持else啥的肤频，最重要的是v-show和css中visibility屬性類似，元素即使不顯示的時(shí)候也占有空間算墨。
5.循環(huán)渲染 v-for
實(shí)現(xiàn)類似react中用基于某個(gè)數(shù)組使用map循環(huán)渲染一個(gè)列表的功能着裹。
// items是vue實(shí)例中的數(shù)據(jù)源，item是別名米同，index是索引骇扇。和react一樣這里最好給個(gè)唯一key，便于更新和重用面粮。
<ul id="example-2">
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.message }}
</li>
</ul>
// 也可以使用template
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
在vue組件上使用v-for的時(shí)候要把item作為屬性綁定到組件的prop少孝，item不會(huì)自動(dòng)傳進(jìn)組件。
// 組件內(nèi)有item index key三個(gè)props
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id"
></my-component>
