【Vue.js学习笔记】5：双向数据绑定,计算属性

双向数据绑定

双向数据绑定往往会用到input、select、textarea等表单标签上，因为总是涉及一个数据数据的地方和输出数据的地方。

当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。

使用ref属性给这些标签做标记，那么就可以在函数中随时取得其中的数据，以实现双向绑定。

index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id="vue-app">
    <h3>双向数据绑定的实现,name在data里初始都设置为空串</h3>
    姓名:
    <input ref="name" type="text" v-on:keyup="bindName()" v-bind:value="name">
    {{name}}
    <br>
    姓名(仅仅用来测试从数据到视图的绑定):
    <input disabled type="text" v-bind:value="name">

    <hr>
    <h3>双向数据绑定在Vue里简便的实现方法,直接使用v-model</h3>
    <input type="text" v-model="name">
</div>
<script src="app4.js"></script>
</body>
</html>

app4.js

// 实例化vue对象
new Vue({
    el: "#vue-app",
    data: {
        name: "",
        age: ""
    },
    methods: {
        bindName: function () {
            this.name = this.$refs.name.value;
        }
    }
});

运行结果

在这里插入图片描述
在第一种实现方式中，使用ref="name"给这个表单元素打上标记，并在v-on:keyup="bindName()"的实现中使用this.name = this.$refs.name.value即实现了data中的数据随着表单元素的value走；使用v-bind:value="name"即传统的数据绑定来实现表单元素的value随着data中的数据走。

在第二种实现方式中，只要使用v-model="name"指定了要绑定的是data中的哪个属性即可，不用那么麻烦。

计算属性

这里主要是演示了传统的methods和computed的区别，在下面的代码中使用methods时，把注释的部分打开，可以看到无论点击哪个按钮，所有的methods中的方法都会被触发。

当使用computed时，要保证没有同名的methods所以也就是注释后的代码，这时点击某个按钮，只有那个方法（这里应该叫computed中的计算属性）会被调用，而其它的则不会。

index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id="vue-app">
    <h3>无论点击哪个按钮,两个方法都会执行以计算最新的值</h3>
    <h4>也就是说methods里的方法一旦触发,则会执行里面所有的方法
        <br>这是很耗费性能的,很多时候不是我们需要的</h4>
    <button v-on:click="a++">Add to a</button>
    a={{a}}
    <br>
    <button v-on:click="b++">Add to b</button>
    b={{b}}
    <hr>
    <!--<p>age+a={{addToA()}}</p>-->
    <!--<p>age+b={{addToB()}}</p>-->

    <h3>计算属性</h3>
    <h4>只有虚拟DOM和真实DOM不同的部分才会触发
        <br>计算属性不能加括号!见下面的function名称</h4>
    <p>age+a={{addToA}}</p>
    <p>age+b={{addToB}}</p>
</div>
<script src="app5.js"></script>
</body>
</html>

app5.js

// 实例化vue对象
new Vue({
    el: "#vue-app",
    data: {
        a: 0,
        b: 0,
        age: 21
    },
    methods: {
        /*
        addToA: function () {
            console.log("计算+a的方法执行了");
            return this.age + this.a;
        },
        addToB: function () {
            console.log("计算+b的方法执行了");
            return this.age + this.b;
        }
        */
    },
    computed: {//计算属性
        addToA: function () {
            console.log("计算+a的计算属性执行了");
            return this.age + this.a;
        },
        addToB: function () {
            console.log("计算+b的计算属性执行了");
            return this.age + this.b;
        }
    }
});

运行结果

在这里插入图片描述