Vue實(shí)例
新建一個(gè)Vue實(shí)例
-
每個(gè)Vue應(yīng)用都是通過
Vue函數(shù)創(chuàng)建一個(gè)新的Vue實(shí)例開始的：let data = {a: 1} let vm = new Vue({ //數(shù)據(jù)實(shí)例一 data: data //數(shù)據(jù)實(shí)例二 data:{ newTodoText: '', visitCount: 0, hideCompletedTodos: false, todos: [], error: null } })?
數(shù)據(jù)與方法
- 當(dāng)一個(gè)Vue實(shí)例被創(chuàng)建時(shí)，它向Vue的響應(yīng)式系統(tǒng)中加入了新建對(duì)象的
data對(duì)象中能找到的所有的屬性。當(dāng)這些屬性的值發(fā)生改變時(shí)臣缀，視圖將會(huì)產(chǎn)生響應(yīng)，即匹配更新為新的值获印。（上一篇介紹中寫了個(gè)小型的響應(yīng)demo） - 若數(shù)據(jù)單一的時(shí)候可直接使用數(shù)據(jù)實(shí)例一。但若數(shù)據(jù)多或者某些數(shù)據(jù)需要某個(gè)操作觸發(fā)才有效街州，可先定義并且賦初值兼丰，如數(shù)據(jù)實(shí)例二。
- Vue實(shí)例還暴露了一些有用的實(shí)例屬性與方法唆缴，他們都有前綴
$鳍征，以便于與用戶定義的屬性區(qū)分開來。例如：-
vm.$data === data//=>true -
vm.$sl === document.getElementById('example')//=>true -
vm.$watch('a' , function(newValue , oldValue){})//監(jiān)聽變量的變化面徽，以便于dom的響應(yīng)艳丛。
-
模板語法
- Vue.js使用了基于HTML的模板語法匣掸，允許開發(fā)者聲明式地將DOM綁定至底層Vue實(shí)例的數(shù)據(jù)。所有的Vue.js的模板都是合法的HTML氮双，所以都能被遵循規(guī)范的瀏覽器和HTML解析器解析碰酝。在底層的實(shí)現(xiàn)上，Vue將模板編譯成虛擬DOM渲染函數(shù)戴差。結(jié)合響應(yīng)系統(tǒng)送爸，在應(yīng)用狀態(tài)改變時(shí)，Vue能夠智能的計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到DOM操作上暖释。
插值
文本
- 數(shù)據(jù)綁定最常見的形式是使用“Mustache”語法（雙大括號(hào)）的文本插值：
-
<span> Message: {{ msg }}</span>類似angular的雙向綁定袭厂，只要一邊發(fā)生改變，另一邊也會(huì)做出相應(yīng)的變化球匕。
-
原始HTML
- 雙大括號(hào)會(huì)將數(shù)據(jù)解釋為普通文本纹磺，而非HTML代碼。為了輸出真正的HTML亮曹，需要使用
v-html指令：-
<div v-html="realHTML"></div>這個(gè)div的內(nèi)容將會(huì)被替換成為屬性值realHTML橄杨，直接作為html會(huì)忽略解析屬性值中的數(shù)據(jù)綁定。注意照卦，不能使用v-html來符合局部模板讥珍，因?yàn)関ue不是基于字符串的模板引擎。反之窄瘟，對(duì)于用戶UI，**組件更適合作為可重用和可組合的基本單位 **趟卸。
-
特性
- Mustache語法不能作用在HTML特性上蹄葱，遇到這種情況應(yīng)該使用
v-bind指令：-
<div v-bind:id="dynamicId"></div>若綁定的是bool類型的值，則結(jié)果為控制特性的使用/消失锄列。
-
使用javascripts表達(dá)式
- 對(duì)于所有的數(shù)據(jù)綁定图云，Vue.js都提供了完全的JavaScript表達(dá)式支持，正確的表達(dá)式會(huì)在所屬的Vue實(shí)例的數(shù)據(jù)作用域下作為js被解析邻邮。但是有個(gè)限制竣况，就是每個(gè)綁定都只能包含單個(gè)表達(dá)式。
指令（Directives）
- 指令是帶有
v-前綴的特殊屬性筒严。指令屬性的值預(yù)期是單個(gè)js表達(dá)式（v-for除外）丹泉。指令的職責(zé)是當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響鸭蛙，響應(yīng)式地作用與DOM摹恨。回顧上一篇的例子：<p v-if="seen">here</p >
- 這里娶视，根據(jù)seen的值為true/false來插入/移除
<p>元素
指令的縮寫
v-bind縮寫<!--完整語法--> <a v-bind:href="url"></a > <!-- 縮寫 --> <a :href="url"></a >-
v-on縮寫<!--完整語法--> <a v-on:click="dosomething"></a > <!-- 縮寫 --> <a @click="dosomething"></a > 再來一遍晒哄，文檔睁宰！文檔！文檔寝凌！左轉(zhuǎn)vue.js
