首页 > 代码库 > Vue笔记(一)

Vue笔记(一)

指令:

  1、v-if 指令用于标签的属性,绑定数据,当数据为true时,显示该标签,当属性为false时,移除该标签。

  2、v-bind 指令用于属性响应绑定数据,数据改变此绑定的属性也改变,例如:<v-bind:href=http://www.mamicode.com/"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="http://www.mamicode.com/输出" 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笔记(一)