Vue指令学习

v-text,v-html的区别：与JQuery的text()和html()方法差不多,v-text是会对其中的html标记进行转义，转换为字符串形式的文本，v-html则可正常显示html标记的作用；
v-show和v-if在设置内容显示时的区别:v-show方法是把元素的dispaly属性设置为none,而v-if则根据布尔值的改变通过销毁Dom和重建Dom来实现；v-else if,v-else与v-if配合使用，列表渲染：v-for循环使用简例:<li v-for="(item,index)of list" :key="index">{{item}}(设置key值可以增加浏览器的渲染效率),但在实际项目，index作为key值并不是一个很好的选择.因为如果要进行大量的dom操作，很可能会出现问题，通常我们选择ajax返回的数据中的id等作为唯一的key值.
v-bind:单向绑定，简写形式为 “:”,可用于属性绑定，如设置一个图片的title属性：v-bind:title:“title”（绑定Vue实例里的data属性里的值）；v-on:事件响应，简写形式为"@",可用于设置任何js事件如：click,focus,mousemove等；双向数据绑定：v-model:常用于与input标签绑定。
计算属性和侦听器：computed和watch
计算属性好处是可以缓存，比如说在计算属性中计算一个值需要进行大量的操作，如果将这个计算放在methods中，则只要每次进行重绘，都会触发这个计算，这样是会很耗性能的，但如果将这个计算放在计算属性中，只要这个值不发生变化，那就不会重新计算，返回的还是这个值，这样也可以节省性能。
watch用于监听数据的变化
使用实例：

<body>
    <div id="root">
    	姓：<input v-model="firstName">
        名：<input v-model="lastName">
        <div>{{fullName}}</div>
        <div>{{count}}</div>
    </div>
    <script>
    	new Vue({
    		el:"#root",
    		data: {
    		     firstName:'',
                 lastName:'',
                 count:0
    		},
            computed:{
                fullName: function(){
                    return this.firstName+" "+this.lastName
                }
            },
            watch:{
                fullName:function(){
                    this.count ++
                }
            }
    	})
    </script>
</body>

该简单实例中的watch用于监听fullName,即firstName和lastName的每一次变化count都会加一

猜你喜欢