学了前面的教学,下面我们又来继续学习Vue的其他内容
一、模板语法
Vue模板语法有2大类:
1.插值语法
插值语法就是将Vue实例中的数据插入到容器里
功能:用于解析标签体内容
写法:{{xxx}},xxx是js表达式,且可以读取到data中的所有属性
2.指令语法
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件......)
举例:v-bind:href="xxx" 或 简写为 :href="xxx",xxx同样要写成js表达式
备注:Vue中有很多指令,且形式都是 v-???,此处只是拿v-bind举例
二、 数据绑定
Vue中有两种数据绑定的方式
1.单向绑定(v-bind)
数据只能从data流向页面
2.双向绑定(v-model)
数据不仅能从data流向页面,还可以从页面流向data
注意:
1.双向绑定一般都应用在表单类元素上(如:input、select)
2.v-model:value 可以简写成v-model,因为v-model默认收集的就是value值
三、el与data的两种写法
1.el的两种写法(两种都可以用,只是第二种更灵活)
(1)第一种:new Vue时就配置el属性
(2)第二种:先创建Vue实例,随后再通过v.$mount("#root")指定el的值
2 .data的两种写法
(1)第一种(对象式)
(2)第二种(函数式):以后学到组件时,就必须要用函数式,否则报错