1.官網：cn.vuejs.org
Stript標籤引入要在head裏面
2.掛載點，模板，實例之間關係
<div id="root"> </div> -- >掛載點,掛載點之內的內容，是模板
<script>
new Vue({
el:"#root",
template:'<h1>hello</h1>', 模板可以放在實例裏
data:{
msg:"world"
}
})
</script>
3.Vue實例中的數據，事件和方法
<h1>{{number}}<h1/> 插值表達式
<h1 v-text="contect"><h1/>
<div v-html="contect"> </div>二者差別在於，v-text能轉義，將標籤以字符串方式展現
綁定事件： <div v-on：click=“handleClick”> </div>
handleClick定義在Vue實例的methods裏
事件綁定簡寫：v-on: 可替換成 @
4.Vue中的屬性綁定和雙向數據綁定
<div v-bind:title="title"></div> title變量指的是實例裏的data中title的值
v-bind: 可簡寫爲 ：
雙向綁定：<input v-model="contect"/> input 內容改變，實例中的contect內容也跟着改變
5.Vue中的計算屬性和偵聽器
compute:一個屬性由其他屬性計算而來。其他屬性沒改變，該屬性用的是緩存值
偵聽器：
<div>{{count}}</div>
data：{
count:0
}
watch:{
firstName:function(){
this.count++ 只要firstName的值發生變化，count+1
}
}
6.v-if,v-show,v-for指令
v-if 當他對應的數據項的值是false時，會直接將該標籤清除，
v-show 當他對應的數據項的值爲false時，將該標籤增加display:none 屬性
隱藏顯示頻繁時用v-show性能更好
v-for：
<ul>
<li v-for="item of list" :key="item">{{item}}</li> 使用key提升渲染效率，但要求key值都不同，若item值相同，
可以用index做key值 v-for="（item ，index）of list"
</ul>
data{list:[1,2,3]}
7.組件的拆分及全局組件，局部組件
全局組件↑
局部組件↑
組件的拆分↑
props屬性：意爲該組件接收從外部傳過來的名爲content的屬性
8.組件與實例的關係
每一個vue的組件就是一個vue實例，每一個組件也可以寫method等屬性
當小組件被點擊時，觸發了handelClick方法 ，該方法向外觸發一個事件，事件名爲delete，事件對應的值爲index；由於父組件在創建子組件時，有一個監聽事件，當監聽到delete方法被觸發時，就會執行handelDelete方法，該方法定義在父組件的模板裏，爲父組件的方法
將list中對應的index下標的值刪掉。一旦list發生變化，todo-item會將對應的該組件從列表刪掉
總結一下大概的邏輯過程：
（1）：父組件通過prop向子組件傳值 子組件獲得父組件傳來的內容和索引。
（2）：子組件通過$emit向父組件拋出觸發事件名稱（delete）和觸發事件的list索引值。
（3）：父組件通過監聽對應事件名稱（@delete）觸發函數handleDelete。函數通過子組件拋出的索引值對應刪除list
vue-cli相關用法：
1.template中只能有有個標籤包裹其他所有標籤
2.data 不再是一個對象而是一個函數，返回值爲對應數據