let變量

const常量

模板：const app=new Vue({

el:'選擇器'//掛載，作用范圍，也是事件的管理范圍，決定了它管理哪個(gè)dom

也可以這么寫el:document.querySelector('選擇器')

data:{//里面存取數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行定義和賦值。多用于數(shù)據(jù)綁定，以{{item}}的方式來調(diào)用

item:0,

counter:0,

movies:['星際','海賊王','妖尾']//數(shù)組以這種方式

},

methods:{
add:function (){
? ?this.counter++;
}

})

當(dāng)我們需要遍歷指定數(shù)據(jù)的內(nèi)容的時(shí)候，需要使用v-for="變量名 in 對(duì)象名",在引用的時(shí)候就用{{變量名}}

如：<li v-for="item in movies">{{item}}</li>

當(dāng)我們需要一些事件監(jiān)聽的時(shí)候，需要使用v-on:事件來進(jìn)行操作

這里我們可以給它加一個(gè)按鈕用于計(jì)數(shù)，如：

<button v-on:click="counter++"></button>

這樣每次點(diǎn)擊counter都會(huì)加一

如果需求變多，就不能在行內(nèi)寫了

這時(shí)候就需要在方法里寫函數(shù)

就需要在app里的methods中定義函數(shù)

（methods是一種屬性）

add:function?(){
? ?this.counter++;
}

或者你也可以寫成add(){

?this.counter++;

}

值得注意的是，我們這里的counter不是全局變量，所以得用this來指代當(dāng)前位置

那又有問題出現(xiàn)了，this指代當(dāng)前對(duì)象，這里應(yīng)該寫成this.data.counter++才對(duì)啊

這涉及到了代理問題，this.counter代替了this.data.counter

這時(shí)，按鈕就變?yōu)榱?lt;button v-on:click="add"></button>

官方還給出了語法糖用于簡寫

也就是這樣<button @click="add"></button>
mvvm，是model view view-model的縮寫

model也就是Vue對(duì)象里面的內(nèi)容

view就是給用戶看的內(nèi)容

view-model就是Vue這個(gè)對(duì)象，可以把它看成一個(gè)服務(wù)器，負(fù)責(zé)解析和回調(diào)

我們的數(shù)據(jù)不一定非得在data里面定義

也可以拿到外面來

比如:const test={

counter:0

}

data:test

這樣寫也可以，也是代理的一種應(yīng)用