## 官方网站 - [https://vue3js.cn/](https://vue3js.cn/) ## 注意事项 ## 弃用样式击穿（使用 ::v-deep） > \>>>和/deep/ combinator已经被弃用。使用::v-deep代替。 ### 创建组件不要使用箭头函数 > 在 createApp 方法创建组件内参数options里面不要使用箭头函数，例如`created: () => console.log(this.a)`或`vm.$watch('a', newValue => this.myMethod())` ```js // 错误的 createApp({ data() { return { a: 1 } }, created: () => { // `this` points to the vm instance console.log('a is: ' + this.a) // => "a is: 1" } }) // 下面是正确的 createApp({ data() { return { a: 1 } }, created() { // `this` points to the vm instance console.log('a is: ' + this.a) // => "a is: 1" } }) ``` #### 生命周期 > 在2.x版本中，我看可以看到很多的生命周期，3.x的版本已经更新了  > 通过上面的图片，移除了一些生命周期 #### 插入html值 > 我们通过 v-html 插入值得话，它很容易导致[XSS漏洞](https://en.wikipedia.org/wiki/Cross-site_scripting)，那么得需要通过过滤下 script，官方出来方案为：如果有存在一个 \<script\> 标签的都不进行渲染。这样保证了不被攻击了。 #### JavaScript 表达式 > 在双花括号中，里面可以通过写入表达式进行执行JavaScript ``` {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} ``` #### 动态参数 > 也可以改变事件名称，比如onclick 改成 mousedown ```html <a v-bind:[attributeName]="url"> ... </a> <a v-on:[eventName]="doSomething"> ... </a> ``` #### 计算属性 > 计算属性仅是getter，但是您也可以在需要时提供setter： ``` computed: { fullName: { // getter get() { return this.firstName + ' ' + this.lastName }, // setter set(newValue) { const names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } ``` #### 类和样式绑定 - 写法一 ``` <div :class="{ active: isActive }"></div> ``` - 写法二 ``` <div class="static" :class="{ active: isActive, 'text-danger': hasError }" ></div> ``` - 写法三 ``` <div :class="classObject"></div> data() { return { classObject: { active: true, 'text-danger': false } } } ``` - 写法四：通过计算属性或者说 方法 ``` <div :class="classObject"></div> data() { return { isActive: true, error: null } }, computed: { classObject() { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } } ``` - 写法5： ``` <div :class="[{ active: isActive }, errorClass]"></div> ``` - 写法6： ``` const app = Vue.createApp({}) app.component('my-component', { template: ` <p :class="$attrs.class">Hi!</p> <span>This is a child component</span> ` }) ``` - 写法7：多值情况 ``` <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> ``` - 写法8，不写了 ### for 循环 > 其他的都略过 #### 显示筛选/排序结果1 > 通过计算属性来返回排序 ``` <li v-for="n in evenNumbers">{{ n }}</li> ``` ``` data() { return { numbers: [ 1, 2, 3, 4, 5 ] } }, computed: { evenNumbers() { return this.numbers.filter(number => number % 2 === 0) } } ``` #### 显示筛选/排序结果2 > 通过方法进行返回 ``` <ul v-for="numbers in sets"> <li v-for="n in even(numbers)">{{ n }}</li> </ul> ``` ``` data() { return { sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]] } }, methods: { even(numbers) { return numbers.filter(number => number % 2 === 0) } } ``` #### v-for 在一个 \<template\> ``` <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul> ``` #### v-for 与 v-if ``` <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> ``` ``` <ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left!</p> ``` ### 事件 #### 多个事件处理程序 ``` <button @click="one($event), two($event)"> Submit </button> ``` ``` methods: { one(event) { // first handler logic... }, two(event) { // second handler logic... } } ``` #### 写的顺序与执行顺序有关 > 注意了： 使用@click.prevent.self将阻止所有单击，而@click.self.prevent只会阻止对元素本身的单击。 #### 监听事件(addEventListener) > Vue还提供了.passive与addEventListener的passiveoption对应的修饰符。比如（进行监听滚动对象）： ``` <div @scroll.passive="onScroll">...</div> ``` > 注意了：==请勿将.passive和.prevent一起使用，因为.prevent它将被忽略，并且浏览器可能会向您显示警告。请记住，.passive浏览器传达你不想要阻止事件的默认行为。== ### 关键修饰符 > 注意：键盘按下在起来才会触发修饰符，键盘的按下等操作，比如 ``` <input @keyup.enter="submit" /> ``` #### Vue为最常用的键提供别名： - .enter - .tab - .delete （同时捕获“删除”和“退格”键） - .esc - .space - .up - .down .- left - .right ### 系统修改键 > 仅当按下相应的修饰键时，才可以使用以下修饰符触发鼠标或键盘事件侦听器： - .ctrl - .alt - .shift - .meta