属性绑定、方法绑定、计算属性、侦听器

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 里面的方法时,后面不需要加()括号,因为这个不算方法