v-bidn 属性绑定
所谓的属性绑定就是把Vue里面data属性值放到标签的属性里面去,操作很简单, v-bidn:属性名="属性名" 或者 :属性名="属性名" 也可以使用属性拼接的方式
<div id="app">
<a v-bind:href="url">淘宝</a> <!--使用 v-bind:属性名="属性名" 方式 -->
<p :style="color">改变成红色字体</p> <!--使用 :属性名="属性名" 方式 -->
<a :href="protocal + '//' + host">淘宝</a><!-- 使用拼接的方式来拼凑URL -->
</div>
<script>
new Vue({
el: "#app",
data: {
url: "https://www.taobao.com",
color: "color: red",
protocal: "https:",
host: "www.taobao.com"
}
})
</script>
methods 方法绑定
在Vue里面有属性那也会有方法,你可以把一个Vue看做一个java类,里面有属性和方法,方法可以直接调用属性,如果你想在外面调用Vue里面的属性或者方法,只写写一个var接收这个Vue,然后利用这个var直接调用就可以拿到值了
<div id="app">
<a v-bind:href="getUrl()" :style="getColor()">{{ getName("淘宝") }}</a> <!--调用方法来传参 -->
</div>
<script>
new Vue({
el: "#app",
data: {
color: "color: red",
protocal: "https:",
host: "www.taobao.com"
},
methods: {
getUrl: function () {
return this.protocal + "//" + this.host;
},
getColor: function () {
return this.color;
},
getName: function (name) {
return name;
}
}
})
alert(vm.protocal + "//" + vm.host);
alert(vm.getColor());
</script>
computed 计算属性
只要在我们属性计算条件不变的情况下,computed 里面的方法只会计算一次,然后把计算结果缓存起来,当以后在调用的时候他会直接从缓存里面拿这个值,不需要在重新计算了,当计算的属性发生改变时,他里面的监听器就会被触发,然后重新计算, 记住,调用computed 里面的方法时,后面不需要加()括号,因为这个不算方法