Vue-指令知识点-总结
内容渲染指令v-text指令缺点：会覆盖元素内部原有内容！{{}}插值表达式：实际开发中多用到，只是内容的占位符，不会覆盖原来的内容！v-html指令的作用：可以将标记后的字符串渲染成真正的HTML内容！属性绑定说明注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！在vue中，可以使用v-bind:指令为元素的属性动态绑定值；缩写为英文：v-bind属性绑定时，如果绑定内容需要动态拼接，则字符串外面要用单引号括起来，例如：Thisisadiv
在Vue提供的模板渲染语法中绑定了事件，除了支持绑定简单的数据值外，还支持Javascript表达式的操作示例：{{OK?'YES':'NO'}}{{message.split('').reverse().join('')}}vue提供了v-on事件绑定指令，用于协助程序员为DOM元素绑定事件监听器.
count的值为：{{count}}
+1注意：原生DOM对象有onclick、oninput、onkeyup等原生事件，替换成vue的事件绑定形式后，分别为：v-on:click,v-on:input,v-on:keyupv-on绑定的事件处理器需要在methods节点声明：constvm=newVue({el:'#app',data:{count:0},methods:{//v-on绑定的事件处理器，需要在methodsnodeaddCount()中声明{//事件处理器的名字//这个代表当前new出来的vm实例对象，//经过可以通过这个this.count+=1}},})v-on:缩写为@语法格式为:methods:{add(){//如果想在方法中修改data中的数据，可以通过this访问this.count+=1}}$event的应用场景：如果默认的事件对象e被覆盖，可以手动通过a$event例如：methods:{add(n,e){//如果要在方法中修改data中的数据，可以通过this.count+=1来访问}}注：$event是vue提供的一个特殊变量，用来表示原生事件参数对象event。$event可以解决事件参数对象event被覆盖的问题。事件修饰符：.prevent阻止默认行为（例如：阻止链接跳转，阻止表单提交等）link.stop阻止事件冒泡buttoncapture在捕获模式下触发当前事件处理程序。once绑定事件只触发一次。self只有当event.target为当前元素本身时才会触发事件处理器v-model指令inputinputboxtype="radio"type="checkbox"type="xxxx"textareaselectv-model指令修饰符为了方便对用户输入的内容的处理，vue为v-model指令字符提供了3种修饰，分别是：修饰符函数示例.number自动将用户输入的值转换为数值类型.trim自动过滤用户输入的前导和尾随空白字符“改变”而不是“输入”。原理是：动态添加或移除元素Style的display:none，实现元素的显示和隐藏如果想频繁切换元素的显示状态，v-show的性能会更好。v-if的原理是：每次动态创建或移除元素时，都可以实现元素的显示和隐藏if当你第一次进入页面时，有些元素默认是不需要显示的，这个元素也可以不显示需要稍后显示。这时候v-if的性能就更好了。在实际开发中，大多数情况下不需要考虑性能问题，直接使用v-if即可！！！使用v-if指令时，有两种方式：直接给一个布尔值true或falsev-if控制的元素提供一个v-if判断条件，根据判断结果是真还是假，控制元素的显示和隐藏goodv-else|v-else-if指令必须匹配v-if指令一起使用，否则将无法识别。list指令以iteminitems的形式使用特殊语法呈现v-for指令：items是要循环的数组，item是要循环的每个项目（使用键来维护列表状态）key维护过渡键列表：键的值只能是字符串或数字。key的值必须是唯一的（即：key的值不能重复）。作为key的值（因为id属性的值是唯一的），用index的值作为key的值是没有意义的（因为index的值不是唯一的）。建议在使用v-for命令时指定key的值（这样不仅可以提高渲染性能，也可以防止列表的状态乱序）
