vue实例属性
new Vue({
el:'', -->必须的,(视图，html结构)——>必须的，用来指定Vue实例绑定的对象
data: { -->(数据)——>不是必须的，用来定义Vue实例里面用到的数据（key-value）
},
methods:{ ——>可选的，用来定义Vue实例的方法
},
computed:{ ——>可选的，计算属性，本质上和data中定义的属性是一样的，协助数据的绑定操作，实现一些复制的功能，定义的函数在使用时可以和data的属性一样使用，不需要（）
},
watch:{} --->监听属性，通过 watch 来响应数据的变化
})
其中的el、data、methods在Vue指令总结中已经熟悉使用了。
computed属性
计算属性，在继续数据绑定的时候，要对数据进行一定的处理才能展示到HTML上。vue提供的计算属性允许开发者编写一些方法，协助进行绑定数据的操作。（需要对数据进行转换运算时，使用计算属性）
<div id="app">
<p>你的生日是：{{getBirthday}}</p>
</div>
<script>
console.log(new Date(98182080000)) //输出的是中国标准时间
new Vue({
el:'#app',
data:{
birthday:98182080000
},
computed:{
getBirthday:function(){
var m=new Date(this.birthday)
var str=m.getFullYear()+'年'+(m.getMonth()+1)+'月'+m.getDate()+'日';
return str
}
}
})
</script>
watch属性
监听属性：watch属性用来观察和响应Vue实例上的数据变动，watch属性是一个对象，它有两个属性：（1）键，（2）值。键是需要观察的表达式，值是对应的回调函数，回调函数得到的参数为新值和旧值。
建立监听：
<div id="app">
<button @click="a--">a减1</button> //按钮v-on:click绑定事件
<p>{{message}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
a:2,
message:''
},
watch:{
a:function(val,oldVal){
this.message='a的旧值是:'+oldVal+"，a的新值是:"+val;
}
}
//这里的键是a,值是后面的function回调函数，参数val和oldVal为新值和旧值
})
</script>
取消监听：
// $watch是取消观察函数
var vm=new Vue({
el:'#app',
data:{
a:10,
message:''
}
})
var unwatch=vm.$watch('a',function(val,oldVal){
if(val===1){
unwatch(); //取消观察
}
this.message="a的旧值是："+oldVal+"，a的新值是："+val
})
当a的值更新到1时，触发unwatch函数来取消观察。单击按钮时，不再触发watch的回调函数。a的值不变。
computed，methods，watch区别
（1）computed是计算属性，用来声明式地描述一个值依赖了其他值。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值（基于它们的依赖进行缓存）。
（2）methods是方法，绑定事件的调用，不会使用缓存。
（3）watch是监听，监听的是定义的变量，当定义的变量的值发生变化时，调用对应的方法。
当有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ，这时候，我们就需要缓存。也就是使用 computed 而不是 methods。但对于每次都需要进行重新计算的属性比如下面这个函数的返回值：
function () {
return Date.now()
}
我们最好使用 methods。
- 数据量大，需要缓存的时候用 computed ；
- 每次确实需要重新加载，不需要缓存时用 methods ;
computed主要用于对同步数据的处理，watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑
- 当需要进行数值计算时，并且依赖于其他数据时，应该使用computed；
- 当需要在数据变化时执行异步或者开销较大的操作时，应该使用watch.
Vue中的三种模板
html模板
是基于DOM 的模板，模板都是可解析的有效的HTML插值。
- 文本：使用{{}}语法，替换实例上的属性值，当值改变时，插值处的内容会自动更新
- 原生html：双大括号输出的是文本，不会解析html（想要解析html，可以使用指令
v-html） - 属性：使用v-bind进行绑定，可以响应变化
在Vue指令总结中已经使用过此类模板了。
字符串模板
先定义字符串模板，然后在vue 的选项对象里面利用template绑定。
- 字符串模板的优先级会比html模板高
<div id="app"></div>
<script>
let mydata={
content:'World'
}
var str=`<div>Hello {{content}}</div>`
var vm=new Vue({
el:'#app',
data:mydata,
template:str
})
</script>
render函数模板
方法：
render(createElement){
createElement(标签名，[数据对象]，子元素) //子元素为数组或对象
}
数据对象的属性：
class：绑定classstyle：绑定样式attrs：添加行间属性domProps：DOM元素属性on：绑定事件
<style>
.bg{
background-color: darkorange;
}
</style>
<div id="app">
<p>你的姓名是：{{list.name}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
list:{
name:'小猪'
}
},
render(createElement){
return createElement(
"ul",
{
class:{bg:true}, //为true时，样式显示
style:{listStyle:"none"},
attrs:{
name:'ddd'
}
},
[
createElement('li',"AAAAA"),
createElement('li','BBBBB'),
createElement('li','CCCCC')
]
)
}
})
</script>
模板渲染
（1）条件渲染
- v-if方式
- v-show方式
（2）列表渲染
- v-for
<div class="app">
<ul>
<li v-for="item in arr">{{arr.text}}</li>
</ul>
</div>
具体用法请查看博客Vue指令总结。