Vue实例属性及其区别、三种模板、模板渲染

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：绑定class
• style：绑定样式
• 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指令总结。