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, //去掉代码结尾的分号
}
