文章目录

• 数据绑定
• • 单向数据绑定
  • 双向数据绑定

上一篇：（三）Vue之模板语法

数据绑定

Vue中有2种数据绑定的方式：

• 1.单向绑定：数据只能从data流向页面。
• 2.双向绑定：数据不仅能从data流向页面，还可以从页面流向data。

单向数据绑定

数据只能从data流向页面。绑定形式有两种：

• 插值语法绑定
  写法：{{xxx}}，xxx是js表达式
• 指令语法绑定
  写法：使用v-bind:属性名=“xxx”，xxx同样要写js表达式，由于v-bind 使用非常频繁，Vue提供了简单的写法，可以去掉v-bind直接使用:即可。

Vue数据：

使用：

	
单向数据绑定
单向数据绑定：{{name}}
单向数据绑定：
单向数据绑定：

效果：

改变数据，打开Vue开发者工具，数据不变：

双向数据绑定

数据不仅能从data流向页面，还可以从页面流向data。
写法：v-model:value=”xxx“，可简写成v-model=“xxx”
注意：这里的xxx就不能写js表达式了，这里写的是data里面要绑定的属性名，并且只能绑定一个。v-model只能应用于表达类元素（输入类元素）
Vue数据：

使用：

	
双向数据绑定
双向数据绑定：
双向数据绑定：
双向数据绑定：

效果：第一个文本框绑定了age，第二个文本框绑定了name，可以理解为，先绑定了第一个，然后发现后面又有绑定，就把绑定换成后面那一个，以此类推，就绑定了最后一个，实际就是覆盖

改变文本框数据，Vue数据跟着改变：

松开以下代码注释

	双向数据绑定：

报错：
SyntaxError: Invalid left-hand side in assignment in，翻译为：语法错误：赋值给左侧无效。意思就是表达式不能赋值给v-model

把上面代码注释，松开以下代码注释

	
hello

效果：虽然正常显示，并且f12里元素没有显示x这个属性，但是控制台发出警告



翻译为：
编译模板时出错：

：此元素类型不支持v-model。如果您使用的是contenteditable，建议将专用于此目的的库包装在自定义组件中。

所以：v-model只能应用于表达类元素（输入类元素）