Vue - 指令知识点 - 总结前端vue.js

内容渲染指令

属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

事件绑定

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算

例 : {{ OK ? 'YES' : 'NO'}}{{ message.split('').reverse().join('') }}
vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听

count 的值为 : {{ count }}

注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup
通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：

const vm = new Vue({ el: '#app', data: { count: 0 }, methods: { //v-on 绑定的事件处理函数,需要声明在 methods 节点中 addCount() { // 事件处理函数的名字 // this 表示当前 new 出来的 vm 实例对象, // 通过 this 可以访问到 data 中的数据 this.count += 1 } }, })

v-on: 简写是 @
语法格式为：

methods: { add() { // 如果在方法中要修改 data 中的数据，可以通过 this 访问到 this.count += 1 } }
$event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：

methods: { add(n, e) { // 如果在方法中要修改 data 中的数据，可以通过 this 访问到 this.count += 1 } }

注:$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event
被覆盖的问题。
事件修饰符：
- .prevent 阻止默认行为
  (例: 阻止a链接的跳转, 阻止表单的提交等)
  
  链接
- .stop 阻止事件冒泡
- capture 以捕获模式触发当前的事件处理函数
  .once 绑定的事件只触发1次
  .self 只有在 event.target 是当前元素自身时触发事件处理函数
?

v-model 指令

select
v-model指令的修饰符
为了方便对用户输入的内容进行处理, vue为v-model指令提供了3个修饰符,分别是:

条件渲染指令

v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
- 如果要频繁的切换元素的显示状态，用 v-show 性能会更好
v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏
- 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

v-if 指令在使用的时候，有两种方式：

列表指令渲染

文章图片

【Vue - 指令知识点 - 总结】key的注意事项:
- key的值只能是字符串或数字类型
- key的值必须具有唯一性(即:key的值不能重复)
- 建议把数据项id属性的值作为key的值(因为id属性的值具有唯一性)
- 使用index的值当作key的值没有任何意义(因为index的值不具有唯一性)
- 建议使用v-for指令时一定要指定key的值(既提升渲染性能,有防止列表状态错乱)