1.new Vue()创建一个新的 Vue 实例
2.el挂在原色
el绑定的元素内，都是Vue的作用范围
3.data数据对象
当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- data中绑定 -->
<h1>count: <input v-model="count"></input></h1><br/>
<!-- filters使用 -->
<!-- {{ count | format(2) }}
特别注意：
1.方法format默认第一个参数是count，且省略
2是第二个参数
-->
<h1>count: {{ count | format(2) }}</h1><br/>
<!-- methods使用 -->
<button @click="textalter" >alter</button><br/>
<!-- computed中getter -->
<div>computed中getter</div><br/>
<h1>countPlus: <span>{{countPlus}}</span></h1><br/>
<!-- computed中setter -->
<div>computed中setter</div><br/>
<button @click="add(1)" >add</button><br/>
<h1>countPlus: <span>{{countPlus}}</span></h1><br/>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data:{
count:1,
},
//方法
methods:{
textalter:function(){
alert(this.count);
},
add:function(v){
this.countPlus = this.countPlus + v;
},
},
//过滤器
filters:{
format: function (a,n) {
debugger;
return a + "--" + n
}
},
//钩子函数，钩子函数在Vue创建实例时调用
mounted:function(){
alert(this.count);
},
//计算属性: 所有getter和setter的this上下文自动地绑定为Vue实例
computed:{
countPlus:{
get:function(){
return this.count + 1
},
set:function(value){
this.count = value - 1
}
},
},
//侦听属性,观察和响应 Vue 实例上的数据变动
watch:{
//侦听:count
count: function (val) {
alert(this.count);
},
}
})
</script>
