学习笔记(01):vue语法

• el：挂载点（实例el.html）

1. el是用来设置Vue实例挂载（管理）的元素
2. Vue会管理el选项命中的元素及其内部的后代元素
3. 可以使用其他选择器建议使用ID选择器
4. {{message}}可以放在其他的双标签内，但不能放在HTML和BODY内

 

• data数据对象

1. Vue用到的数据定义在data中
2. data中可以写复杂类型的数据
3. 渲染复杂类型的数据遵守js的语法规则即可

 

• v-test指令

1. 作用：设置标签的内容（textContent）
2. 默认写法会替换全部内容，使用差值表达式{{}}可替换指定内容
3. 内部支持写表达式

 

• v-html指令

1. 作用：设置元素的innerHTML
2. 内容有HTML结构就会被解析为标签
3. v-text指令无论内容是什么都只是解析为文本
4. 解析文本使用v-text，需要解析html使用v-html

 

• v-on指令

1. 作用：为元素绑定事件
2. 事件名不需要写on
3. 指令可以简写为@
4. 绑定的方法定义在methods属性中
5. 传递自定义参数，事件修饰符

 

• v-show指令

1. 作用：根据真假切换元素的显示状态
2. 原理是修改元素的display，实现显示和隐藏
3. 指令后面的内容，最终都会解析为布尔值
4. 值为true元素显示，值为false元素隐藏
5. 数据改变之后，对应的元素显示状态会同步更新

 

• v-if指令

1. 作用：根据表达式的真假切换元素的显示状态
2. 本质是通过操纵dom元素来切换显示状态
3. 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
4. 频繁的切换使用V-show，反之使用v-if，前者的切换消耗小。

 

• v-bind指令 ☆☆

1. 作用：为元素绑定属性
2. 完整写法是：v-bind：属性名
3. 简写：直接省略v-bind，只保留：属性名

 

• v-for指令

1. 作用：根据数据生成列表结构
2. 数组经常和v-for结合使用
3. 语法是（item，index） in 数据
4. item和index可以结合其他指令一起使用
5. 数组长度的更新会同步到页面上，是响应式的

 

• v-model指令

1. 作用：便捷的设置和获取表单元素的值
2. 绑定的数据会和表单元素值相关联
3. 绑定的数据←→表单元素的值