在Vue项目中，每个Vue应用都是通过Vue构造器创建新的Vue实例开始。
1.创建Vue实例
Var vm = new Vue({})
Vue实例配置选项:
| 选项 | 说明 |
| data | Vue实例数据对象 |
| methods | 定义Vue实例中的方法 |
| components | 定义子组件 |
| computed | 计算属性 |
| filters | 过滤器 |
| el | 唯一根标签 |
| watch | 监听数据变化 |
2.el唯一根标签
在创建Vue实例时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。
<div id="app">
<p>{{msg}}</p>
</div>
<script>
vartest=newVue({
el:'#app',
data:{
msg:'Hello Vue.js'
}
})3.data初始数据
Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。
Vue实例创建之后，可以通过vm.$data访问原始数据对象。
Vue实例也代理了data对象上所有的属性，因此访问vm.name相当于访问vm.$data.name。
<div id="app">
<p>{{msg}}</p>
</div>
<script>
vartest=newVue({
el:'#app',
data:{
msg:'定义初始数据'
}
})
console.log(test.msg);
console.log(test.$data.msg);
</script>4.methods定义方法
methods属性用来定义方法，通过Vue实例可以直接访问这些方法。
在定义的方法中，this指向Vue实例本身。
定义在methods属性中的方法可以作为页面中的事件处理方法使用，当事件触发后，执行相应的事件处理方法
<div id="app">
<button@click="showinfo">请点击</button>
<p>{{msg}}</p>
</div>
<script>
vartest=newVue({
el:'#app',
data:{
msg:'定义初始数据'
},
methods:{
showinfo(){
this.msg='触发点击事件'
}
}
})
</script>5.computed计算属性
Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动，当有一些数据需要随着其他数据变动而变动时，就需要使用computed计算属性。
在事件处理方法中，this指向的Vue实例的计算属性结果会被缓存起来，只有依赖的响应式属性变化时，才会重新计算，返回最终结果。
<div id="app">
<p>总价格：{{totalprice}}</p>
<p>单价：{{price}}</p>
<p>数量：{{num}}</p>
</div>
<div>
<button@click="num==0?0:num--">减少数量</button>
<button@click="num++">增加数量</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
price:20,
num:0
},
computed:{
totalprice(){
returnthis.price*this.num
}
}
})
</script>6.watch状态监听
Vue中的事件处理方法是根据用户所需自行定义的，它可以通过单击事件、键盘事件等触发条件来触发，但不能自动监听当前Vue实例的状态变化。
为了解决上述问题，Vue提供了watch状态监听功能，只需监听当前Vue实例中的数据变化，就会调用当前数据所绑定的事件处理方法。
<div id="app">
<inputtype="text"v-model='cityname'>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
cityname:'shanghai'
},
watch:{
cityname(newname,oldname){
console.log(newname,oldname)
}
}
})
</script>7.filters过滤器
在前端页面开发中，通过数据绑定可以将data数据插入页面中，页面中的数据经过逻辑层处理后展示最终的结果。
数据的变化除了在Vue逻辑层进行操作外，还可以通过过滤器来实现。
过滤器常用于对数据进行格式化，如字符串首字母改大写、日期格式化等。
过滤器的两种使用方法：
①在插值表达式中使用过滤器
通过“{{data}}”语法，可以将data中的数据插入页面中，该语法就是插值表达式。
在插值表达式中还可以使用过滤器来对数据进行处理，语法为”{{data|filer}}”。
<div id="app">
<div>
{{message|toupcase}}
</div>
</div>
<script>
varvm=newVue({
el:'#app',
data:{
message:'hello,world'
},
filters:{
toupcase(value){
returnvalue?value.toupcase():''
}
}
})
</script> ②在v-bind属性绑定中使用过滤器
v-bind用于属性绑定，如”v-bind:id=”data””表示绑定id属性，值为data。
在data后面可以加过滤器，语法为”data|filter”。
<div id="app">
<div v-bind:id="data id|format id">helloworld</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
dataid:'dff1'
},
filters:{
formatid(value){
returnvalue?value.charAt(1)+value.indexOf('d') :''
}
}
})
</script>