1. 數據綁定方式
```
<div>{{text}}</div>
<div v-html="text"></div>//可解析HTML標簽
<div v-text="text"></div>
```
2. 監聽事件綁定
```
<div @click="handleclick">{{text}}</div>
//阻止事件冒泡
<div @click.stop="handleclick">{{text}}</div>
//阻止默認事件
<div @click.prevent="handleclick">{{text}}</div>
//只執行一次
<div @click.once="handleclick">{{text}}</div>
//可同時添加
<div @click.prevent.stop="handleclick">{{text}}</div>
<div v-on:click="handleclick">{{text}}</div>
```
3. 屬性綁定
```
<div v-bind:title="title">屬性綁定</div>或者
<div :title="title">屬性綁定</div>
<input v-model="in_text"/>//v-model表示數據的雙向綁定
```
4. 計算屬性
```
<div >{{fullName}}</div>
<input v-model="firstName"/>
<input v-model="lastName"/>
computed:{
//一個屬性通過其他屬性計算得到
fullName :function(){
return this.firstName+this.lastName
}
},
```
5. 偵聽器
```
watch:{
//偵聽器，監聽某一數據的變化,并進行相應業務邏輯
firstName:function(){
this.count ++;
}
},
```
6. v-if，v-show
```
<div v-if="show">{{fullName}}</div>
<button @click="handleclick">點擊控制顯隱</button>
methods: {
handleclick: function() {
this.show = !this.show;
}
}
```
區別：v-if = false時，會把標簽從DOM樹中清除，
v-show=false時，只是把標簽隱藏，依然在DOM樹中存在，頻繁的顯示隱藏時，更節約性能
7. v-for數據的列表循環
```
<ul>
<li v-for="item of list" v-bind:key="item">{{item}}</li>
</ul>
```
{
// 讓vscode允許自定義的代碼片段提示出來
"editor.snippetSuggestions": "top",
"editor.formatOnPaste": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"update.channel": "none",
"files.autoSave": "onWindowChange",
// 如果為true，將使用單引號而不是雙引號
"prettier.singleQuote": true,
"prettier.semi": false,
"explorer.confirmDelete": false, //去掉代碼結尾的分號
}
