Vue:模板语法学习

---

前言

这篇记录笔者对Vue模板语法学习

一、Vue模板语法分类

Vue语法分为两大类

插值语法

功能：用于标签体内容
写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性

指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:href="xxx"或简写为:href=“xxx”,xxx要写js表达式，且可以直接读取到data中的所有书信

二、数据绑定

Vue具有两种数据绑定的方式，如下：

• v-bind 只支持单向数据绑定，Vue中数据发生改变，容器中数据发生改变
• v-model 支持双向数据绑定，Vue实例、容器中任何一方数据发生改变，会影响另外一方；注意：双向绑定只能应用在表单元素上

简写

• v-bind:value= 可简写为:value=
• v-model:value= 可简写为v-model=