vue入门案例详解
Vue實例
創(chuàng)建Vue實例
每個 Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個新的 Vue 實例開始的：
var vm = new Vue({// 選項 })在構(gòu)造函數(shù)中傳入一個對象，并且在對象中聲明各種Vue需要的數(shù)據(jù)和方法，包括：
-
el
-
data
-
methods
等等
接下來我們一 一介紹。
?
模板或元素
每個Vue實例都需要關(guān)聯(lián)一段Html模板，Vue會基于此模板進行視圖渲染。
我們可以通過el屬性來指定。
例如一段html模板：
<div id="app"></div>然后創(chuàng)建Vue實例，關(guān)聯(lián)這個div
xxxxxxxxxx?var vm = new Vue({ el:"#app"})這樣，Vue就可以基于id為app的div元素作為模板進行渲染了。在這個div范圍以外的部分是無法使用vue特性的。
數(shù)據(jù)
當(dāng)Vue實例被創(chuàng)建時，它會嘗試獲取在data中定義的所有屬性，用于視圖的渲染，并且監(jiān)視data中的屬性變化，當(dāng)data發(fā)生改變，所有相關(guān)的視圖都將重新渲染，這就是“響應(yīng)式“系統(tǒng)。
html：
<div id="app"><input type="text" v-model="name"/> </div>js:
var vm = new Vue({el:"#app",data:{name:"劉德華"} })-
name的變化會影響到input的值
-
input中輸入的值，也會導(dǎo)致vm中的name發(fā)生改變
方法
Vue實例中除了可以定義data屬性，也可以定義方法，并且在Vue實例的作用范圍內(nèi)使用。
html:
<div id="app">{{num}}<button v-on:click="add">加</button> </div>js:
var vm = new Vue({el:"#app",data:{num: 0},methods:{add:function(){// this代表的當(dāng)前vue實例this.num++;}} })?
總結(jié)
