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指令的作用是便捷的设置和获取表单元素的值 - 绑定的数据会和表单元素值相关联 - 绑定的数据与表单元素的值是双向绑定的，无论修改哪一个都会同步更新