Vue中的常见指令以及修饰符

Vue中的常见指令：* v-text : 不能识别带标签的内容，会将整个标签中的内容完整替换掉* v-html : 可以识别到内容中的标签* v-pre : 不解析该标签中的内容，以原本形式呈现* v-cloak : 解决vue加载中显示源代码问题，只能写在vue实例绑定的标签上，没有加载完之前会有一个v-cloak属性存在，加载完之后属性消失* v-once : 只对当前标签内的内容做一次解析，之后不管发生任何变化都不会在响应* v-if : 条件渲染指令，根据条件的真假添加或删除对应的元素,真表示添加 假表示删除* v-else : 不需要给任何值，只写属性名即可，但是必须配合v-if来使用* v-else-if : 必须配合v-if来使用* v-show : 根据条件的真假来显示和隐藏元素，利用的是css中的display属性进行的显示和隐藏 * 当该元素显示与隐藏切换不频繁时，使用v-if 如果需要频繁切换显示与隐藏则使用v-show* v-if有更高的切换性能消耗，v-show有更高的初始渲染消耗 * v-bind : 用来动态绑定一个或者多个属性，常用绑定class，style，src等 绑定class类的实现: 1. 直接绑定一个数据 ： 这样会将该数据中的值作为类名绑定，值发生变化，类名会跟着变化 2. 绑定一个数组形式 ：同时添加多个类名时语法，数组中的每一项都是数据中的名字，会将该数据的值依次作为类名显示 3. 绑定一个对象形式： 对象的属性名就是类名，属性值是一个boolean类型的值，如果为true表示添加该类，false表示删除这个类 v-bind可以简写成 : 语法糖
* v-on: 主要作用就是绑定一个事件 简写 @ 如果不需要传递参数，则可以省略，如果需要传递参数，则需要加小括号，在小括号中传递需要的内容 如果不加小括号，则函数会默认传递一个参数，这个参数就是event对象 如果加小括号，则事件对象不会自动传递，我们需要手动传递一个$event的值，才能获取到event对象
v-on中的事件修饰符: .stop 阻止事件流 .prevent 阻止默认事件 .native 监听组件根元素的原生事件 .once 只触发一次事件
* v-for 列表渲染 可以遍历对象、数组、字符串以及数字 可以使用 for in 语法 也可以使用 for of 语法 每一次遍历可以的到两个参数 item index* v-for和v-if能同时作用于一个标签吗？ 能但是不推荐，因为v-for要比v-if有更高的优先级，这样就意味着v-if会在重复的运行在每一次v-for循环中，这样对于节点的性能消耗是有影响的，但是如果我们需要其中部分内容渲染,这样的语法又是可以使用的* v-for使用时 还需要注意一点 就是需要为每一个v-for提供一个唯一的key值，为每一个迭代的内容设置一个唯一标识符，这样在数组数据发生变化时，vue会根据唯一的key值来进行比对渲染，只会将key值发生变化的部分进行操作，这样会大大提高页面渲染效率
* v-model : 应用于表单的双向数据绑定 实际上就是v-bind:value 及 v-on:input 两个指令结合的语法糖
v-model的修饰符： .lazy :将双向绑定的input事件更改为change事件，也就是当表单失去焦点时才会触发响应 .number ：将用户输入的内容转换为number类型，只对纯数字有效 .trim ：去除用户输入的首尾空格