指令：
1、v-if 指令用于标签的属性，绑定数据，当数据为true时，显示该标签，当属性为false时，移除该标签。
2、v-bind 指令用于属性响应绑定数据，数据改变此绑定的属性也改变，例如：<a v-bind:href="url">链接</a>，数据url改变，则a的href属性值也改变。
3、v-on 指令用于监听dom事件，如click、mouseover、mouseout等事件，例如：<button v-on:click="doSomething">点击</button>，事件click，函数doSomething。
4、
计算缓存：
1、计算属性是基于依赖缓存的，只有在相关的依赖发生改变时才会重新取值，就是说只有他依赖的这个新建vue对象的数据改变了，他才会重新取值计算，只要依赖的数据没有改变，他只会返回之前的计算结果。
2、计算属性computed与methods比较，methods是无需依赖改变，即可调用的方法。如果不希望用缓存时，它可以代替计算属性
3、计算属性computed与watch比较，watch会监听vue实例的某个数据变化，当监听的数据发生改变的时候，会调用此函数
4 、
<!doctype html><html><head> <meta charset="utf-8"> <title>vue</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body> <div class="contanier"> <p>无依赖数据的computed：{{now}}</p> <p>有依赖数据的computed：{{computedFun}}</p> <p v-if="message"><span>{{message}}</span></p> <p><input type="text" v-model="messageTest"></p> <p><input type="button" value="输出" v-on:click="methodsFun" ></p> <p><span></span></p> </div> <script> var vm = new Vue({ el:".contanier", data:{ message:false, messageTest:"" }, computed:{ now: function () {//没有依赖数据，不执行，是计算缓存 return Date.now(); }, computedFun:function(){//有依赖数据this.messageTest，执行 return this.messageTest; } }, watch:{ messageTest:function(val){//当messageTest数据发生改变时调用 this.message="等待输出中..."; } }, methods:{//vue实例定义的方法 methodsFun:function(){ this.message=this.messageTest; } } }); </script></body></html>
时间： 2024-08-11 05:27:59