Vue 2.5从零开始学习 — Vue 的属性绑定与双向绑定

Vue 的属性绑定与双向绑定

首先我们花 30s 的时间创建如下这样的一个 HTML 文档：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title> 属性绑定和双向数据绑定 </title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"></div>

    <script>
        new Vue({
            el: "#root"
        })
    </script>

</body>
</html>

1. 属性绑定

我们都知道在 HTML 文档中有一种元素属性叫做 title。

其功能是：当鼠标悬停在该元素上一小会儿后，就会显示出 title 的内容。

那么这里我们试着添加一个 title 属性：

<div id="root">
    <div title="This is a title tip">
        Hello Vue
    </div>
</div>

如果我希望这个 title 的文本是可变的，不是写死在代码文本中的，那么我们可以设置一个条目专门记录、存储该数据，即在 Vue 实例定义一个 " title ":

<div v-bind:title="title">
    Hello Vue
</div> 

<script>
    new Vue({
            el: "#root"
            data: {
                title: "this is a new title tip";
            }
    })
</script>

这时我就实现了属性与数据的单向绑定，即数据可以决定页面的内容。
v-bind:某属性 = " ... " 的语法中：在 " ... " 中 ... 的内容是 JS 内容哦！
v-bind: 可以就简化为一个冒号 : 例如 v-bind:title="title" 可以写作 :title="title"

2. 双向绑定

既然上面说到了，可以由数据决定页面内容，那么页面内容可不可以反过来作用于数据呢？

这就要讲到我们的双向绑定啦！

众所周知，<input/> 这个标签即可以输入数据改变内容，也可以显示内容。

我们想要实现一个需求，在 input 输入框中输入时，msg 的数据值会实时跟随着变化，并且显示出来：

那么我们需要这样做：

<div id="root">
        <input v-model="msg"/>
        <div v-bind:title="title">
            Hello vue: {{ msg }}
        </div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                msg:"abcd",
                title: "this is a new title tip"
            }
        })
    </script>

v-model 是 Vue 中用于实现双向绑定的指令。
我们打开该 HTML 页面，首先显示的是如下结果：

2-1

然后我们在输入框中随便输入一些东西后......

2-2

最后编辑于：2018.12.17 19:29:07