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

Vue 的属性绑定与双向绑定

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

1. 属性绑定

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

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

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

    

        Hello Vue
    

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

    Hello Vue
 

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

2. 双向绑定

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

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

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

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

那么我们需要这样做：

        
        

            Hello vue: {{ msg }}
        
    

    

• v-model 是 Vue 中用于实现双向绑定的指令。

• 我们打开该 HTML 页面，首先显示的是如下结果：

2-1

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

  2-2