## 官方網站 - [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