Vue笔记
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue笔记相关的知识，希望对你有一定的参考价值。
指令：
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>
以上是关于Vue笔记的主要内容，如果未能解决你的问题，请参考以下文章