vue视频教程系列第八节-vue中的属性绑定和双向数据绑定

vue视频教程系列第八节-vue中的属性绑定和双向数据绑定

今天主要讲vue中的属性绑定和双向数据绑定

属性绑定：

例如：

所有过往，皆为序章

 

在项目开发中，这个title属性值并不是固定的，而是变化的动态的。想想我们前几节的知识点就很容易的知道，把title里的属性值指向data里的变量，只要改变这个变量，我们就可以达到目的。所以我们把data改成如下：

data() {

      return {

         title: "所有过往，皆为序章",

      }

    }

只要将dom里的title属性值指向data里的title就OK了！很简单是不是？可是问题来了，这个data里的title如何写在dom里呢？似乎直接嵌入或者以{{}}的形式都不行。怎么办？

这次出场的救星就是“v-bind:”，这位也是一个模板指令，意是将属性值与data里的变量进行绑定。那么我们在dom中，就该这样改一下：

所有过往，皆为序章

 

这下我们要的效果就出来喽！

PS：v-bind:title的简写形式是:title 所以上面那段代码还可以写成

所有过往，皆为序章

讲完属性绑定，我们讲下双向数据绑定

双向数据绑定为何物呢？要明白这个概念，我们需要先了解一下单向绑定。

单向绑定：只有data里的数据能够决定dom里的数据显示，而不能反过来。就拿上面的例子举例：data里的变量值决定着dom里的title属性值，但dom里的title值决定不了data里的title值。

那么双向绑定就顾名思义--双方可以互相决定对方的值！

举例喽：

html里：

 //input标签既可以显示内容，也可以输入内宾，value值与data里的数据单向绑定

{{ content }}

//与data里的数据进行单向绑定，这里的数据可以反映data里的数据

js部分：

data() {

      return {

         content: "所有过往，皆为序章"

      }

    }

我们可以看下页面效果，超初input里的显示的是data里的数据"所有过往，皆为序章"，但当我改变input里的值时，data里的数据没有改变。怎么看出来的呢？div里的内容和data里的数据绑定，如果div里的内容没有变化说明data里的数据没有变化。如果我想改变input里的值，data里的数据也跟着变化，如何做呢？这就用到了另一个常用的模板指令“v-model”。我们把上面的html代码改成如下形式：

{{ content }}

 

我们再看下页面效果，是不是我们在改变input的值时，data数据也变化了呢？

总结一下：我们今天讲到了两个小家伙：

1. v-bind: 或者缩写成 ：=> 属性绑定，属性值可以跟着data里的数据的变化而变化

2. v-model => 双向数据绑定。dom里和data里的数据可以互相改变

微信公众号：duzhan99