Vue常用指令（精简）

# Vue系列

## el:挂载点 demo01.html

- vue实例作用范围：vue会管理el选项命中的元素及其内部的后代元素，可以使用其他选择器（class、el标签），建议使用id选择器，因为id是唯一的。可以使用其他双标签，但是不能使用body和html。

## data：数据对象 demo02.html

- vue中用到的数据定义在data中

- data中可以写复杂类型的数据

- 渲染复杂类型数据时，遵守js的语法即可

## vue指令

- 内容绑定，事件绑定

- 显示切换，属性绑定

- 列表循环，表单元素绑定

## v-text指令 demo03.html

- v-text指令的作用是：设置标签的内容（textContent）

- 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

- 内部支持写表达式

## v-html指令 demo04.html

- v-html指令的作用是：设置的标签innerHTML

- 内容中有html结构会被解析为标签

- v-text指令无论内容是什么，只会被解析为文本

- 解析文本使用v-text，需要解析html结构使用v-html

## v-on指令 demo05.html

- v-on指令的作用是：为元素绑定事件

- 时间名不需要写on

- 指令可以简写为@

- 绑定的方法定义在methods属性中

## 计数器 demo06.html

- 创建vue实例是：el（挂载点），data（数据），methods（方法）

- v-on指令的作用是绑定事件，简写@

- 方法中通过this，关键字获取data中的数据

- v-text指令的作用置元素的文本值，简写为{{}}

- v-html指令的作用是：设置元素的innerHTML

## v-show指令 demo07.html

- v-show指令的作用是：根据真假切换元素的显示状态

- 原理是修改元素的display，实现显示隐藏

- 指令后面的内容，最终会解析为布尔值

- 值为true元素显示，值为false元素隐藏

- 数据改变之后，对应的元素的显示状态会同步更新

## v-if指令 demo08.html

- v-if的指令的作用是：根据表达式的真假切换元素的显示状态

- 本质是通过操纵dom元素来切换显示状态

- 表达式的值true，元素存在dom树中，为false，从dom树中移除

- 频繁的切换使用v-show，反之使用v-if，前者的切换消耗小

## v-bind指令 demo09.html

- v-bind指令的作用是：为元素绑定属性

- 完整写法是v-bind：属性名

- 简写的话可以直接省略v-bind，只保留:属性名

- 需要动态的增删class建议使用对象的方式

## 图片切换 demo10.html

- 列表数据使用数组保存

- v-bind指令可以设置元素属性，比如src

- v-show和v-if都可以切换元素的显示状态，频繁切换用v-show

## v-for指令 demo11.html

- v-for指令的作用是：根据数据生成列表结构

- 数组经常和v-for使用

- 语法是(item,index) in 数据

- item和index可以结合其他指令一起使用

- 数组长度的更新会同步到页面上，是响应式的

## v-on补充 demo12.html

- 时间绑定的方法写成函数调用的形式，可以传入自定义参数

- 定义方法时需要定义形参来接收传入的实参

- 时间的后面跟上.修饰符可以对事件进行限制

- .enter可以触发的按键为回车

- 事件修饰符有多种

## v-model指令 demo13.html

- v-model指令的作用是便捷的设置和获取表单元素的值

- 绑定的数据会和表单元素值相关联

- 绑定的数据与表单元素的值是双向绑定的，无论修改哪一个都会同步更新