Vue2学习-模板语法与数据绑定

模板语法

Vue模板语法有2大类:

一、插值语法:

功能:用于解析标签体内容。

写法: {{xxx0},xxx是js表达式,且可以直接读取到data中的所有属性。

二、指令语法:

功能:用于解析标签(包括: 标签属性、标签体内容、绑定事件.....)

1、v-bind

举例:v-bind:href="xxx"或 简写为 :href="xxx",xxx同样要写is表达式,且可以直接读取到data中的所有属性。

备注: Vue中有很多的指令,且形式都是: v-????,此处我们只是拿v-bind举个例子。

2、v-model

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

1.单向绑定(v-bind): 数据只能从data流向页面。

2.双向绑定(v-model): 数据不仅能从data流向页面,还可以从页面流向data。

备注:

1.双向绑定一般都应用在表单类元素上 (如: input、select等)

2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值