Vue3從入門到精通(一) 環球觀天下

元素。

需要注意的是，key屬性的值必須是唯一的，不能重復。如果重復了，會導致Vue無法正確地識別每個組件或元素的狀態，從而導致渲染錯誤。

vue3 事件處理

在Vue3中，事件處理的方式與Vue2相似，可以使用@或v-on指令來綁定事件。不同之處在于，Vue3中取消了.sync修飾符，同時提供了新的修飾符和事件API。

綁定事件

可以使用@或v-on指令來綁定事件，語法與Vue2相同。示例如下：

<script>export default {  methods: {    handleClick() {      console.log("Button clicked!")    }  }}</script>

上面的代碼中，使用@click指令來綁定handleClick方法，當按鈕被點擊時，會觸發handleClick方法。

事件修飾符

Vue3中提供了新的事件修飾符，包括.stop、.prevent、.capture、.self、.once和.passive。示例如下：

<script>export default {  methods: {    handleClick() {      console.log("Div clicked!")    }  }}</script>

上面的代碼中，使用.stop修飾符來阻止事件冒泡，當div元素被點擊時，不會觸發其父元素的點擊事件。

動態事件名

在Vue3中，可以使用方括號來綁定動態事件名。示例如下：

?<script>export default {  data() {    return {      eventName: "click"    }  },  methods: {    handleClick() {      console.log("Button clicked!")    }  }}</script>

上面的代碼中，使用@[eventName]指令來綁定動態事件名，事件名為eventName的值。

自定義事件

在Vue3中，可以使用createApp方法的provide和inject選項來實現自定義事件的傳遞。示例如下：

// App.vue?<script>import { provide } from "vue"import EventBus from "./EventBus"?export default {  setup() {    provide("eventBus", EventBus)  },  methods: {    handleClick() {      EventBus.emit("customEvent", "Hello, Vue3!")    }  }}</script>?// EventBus.jsimport mitt from "mitt"?const EventBus = mitt()?export default EventBus?// ChildComponent.vue?<script>import { inject } from "vue"?export default {  setup() {    const eventBus = inject("eventBus")    const message = ref("")?    eventBus.on("customEvent", (data) => {      message.value = data    })?    return {      message    }  }}</script>

上面的代碼中，使用provide方法將事件總線對象EventBus注入到根組件中，然后在子組件中使用inject方法獲取事件總線對象，并通過on方法監聽自定義事件customEvent，當事件觸發時，更新message的值。

vue3 事件傳參

在Vue3中，事件傳參的方式和Vue2基本相同，可以使用$event來傳遞事件對象，也可以使用函數來傳遞自定義參數。

示例代碼如下：

?<script>export default {  methods: {    handleClick(event, arg) {      console.log(event) // 輸出事件對象      console.log(arg) // 輸出自定義參數    }  }}</script>

上面的代碼中，使用$event來傳遞事件對象，使用"參數"來傳遞自定義參數。

另外，如果需要在事件處理函數中訪問組件實例，可以使用箭頭函數來綁定作用域，例如：

?<script>export default {  methods: {    handleClick(arg) {      console.log(this) // 輸出組件實例      console.log(arg) // 輸出自定義參數    }  }}</script>

上面的代碼中，使用箭頭函數來綁定作用域，從而在事件處理函數中訪問組件實例。

vue3 事件修飾符

在Vue3中，事件修飾符的使用方式和Vue2基本相同，可以通過在事件名后面添加.修飾符的方式來使用事件修飾符。

常用的事件修飾符包括：

.stop：阻止事件冒泡

.prevent：阻止事件默認行為

.capture：使用事件捕獲模式

.self：只在事件目標自身觸發時觸發事件

.once：只觸發一次事件

.passive：告訴瀏覽器該事件不會調用preventDefault()方法，可以優化頁面滾動性能

示例代碼如下：

?<script>export default {  methods: {    handleClick() {      console.log("點擊事件")    },    handleScroll() {      console.log("滾動事件")    }  }}</script>

上面的代碼中，使用不同的事件修飾符來控制事件的行為。例如，使用.stop修飾符來阻止事件冒泡，使用.prevent修飾符來阻止事件默認行為，使用.capture修飾符來使用事件捕獲模式，使用.self修飾符來只在事件目標自身觸發時觸發事件，使用.once修飾符來只觸發一次事件，使用.passive修飾符來告訴瀏覽器該事件不會調用preventDefault()方法，可以優化頁面滾動性能。

vue3 計算屬性

在Vue3中，計算屬性的使用方式和Vue2基本相同，可以通過在組件的computed選項中定義計算屬性來計算和緩存值。

示例代碼如下：

?<script>export default {  data() {    return {      price: 10,      count: 2    }  },  computed: {    quantity() {      return this.count    },    totalPrice() {      return this.price * this.count    }  }}</script>

上面的代碼中，使用computed選項來定義計算屬性quantity和totalPrice，分別計算商品數量和商品總價。

在模板中，可以像訪問普通屬性一樣訪問計算屬性，例如{{ quantity }}和{{ totalPrice }}。

需要注意的是，在Vue3中，計算屬性的返回值可以是一個函數，這樣可以實現動態計算屬性。示例代碼如下：

?<script>export default {  data() {    return {      price: 10,      count: 2,      discount: 0.8    }  },  computed: {    quantity() {      return this.count    },    totalPrice() {      return () => this.price * this.count * this.discount    }  }}</script>

上面的代碼中，計算屬性totalPrice返回一個函數，這個函數會動態計算商品總價，考慮到折扣可能會變化，因此需要動態計算商品總價。

vue3 class綁定

在Vue3中，可以使用v-bind:class指令來綁定一個對象或數組來動態地設置一個元素的class屬性。

下面是使用對象語法綁定class的示例代碼：

?<script>export default {  data() {    return {      isActive: true,      hasError: false    }  }}</script>

上面的代碼中，使用:class指令來綁定一個對象，這個對象的屬性名是class名稱，屬性值是一個布爾值，表示是否應用這個class。在這個示例中，如果isActive為true，則會應用active這個class，如果hasError為true，則會應用text-danger這個class。

下面是使用數組語法綁定class的示例代碼：

?<script>export default {  data() {    return {      isActive: true,      errorClass: "text-danger"    }  }}</script>

上面的代碼中，使用:class指令來綁定一個數組，這個數組的元素可以是字符串或對象。如果數組元素是字符串，則表示應用這個class；如果數組元素是對象，則表示應用這個對象中的class。

在這個示例中，如果isActive為true，則會應用active這個class，如果errorClass為text-danger，則會應用text-danger這個class。

需要注意的是，在Vue3中，可以使用動態組件來動態渲染不同的組件，這個功能可以使用元素和is特性來實現。示例代碼如下：

?<script>import ComponentA from "./ComponentA.vue"import ComponentB from "./ComponentB.vue"?export default {  components: {    ComponentA,    ComponentB  },  data() {    return {      currentComponent: "ComponentA"    }  }}</script>

上面的代碼中，使用元素和is特性來動態渲染不同的組件。在這個示例中，點擊ComponentA按鈕會渲染ComponentA組件，點擊ComponentB按鈕會渲染ComponentB組件。

vue3 style 綁定

在Vue3中，可以使用v-bind指令或簡寫的:來動態綁定樣式。

綁定單個樣式

可以使用對象語法來綁定單個樣式，對象的屬性名為樣式名，屬性值為樣式值。示例如下：

?<script>export default {  data() {    return {      textColor: "red"    }  }}</script>

上面的代碼中，使用:style指令來綁定color樣式，樣式的值為textColor的值。

綁定多個樣式

可以使用對象語法來綁定多個樣式，對象的屬性名為樣式名，屬性值為樣式值。示例如下：

?<script>export default {  data() {    return {      textColor: "red",      fontSize: 16    }  }}</script>

上面的代碼中，使用:style指令來綁定color和fontSize兩個樣式，樣式的值分別為textColor和fontSize的值。

綁定樣式數組

可以使用數組語法來綁定多個樣式，數組中的元素為樣式對象。示例如下：

?<script>export default {  data() {    return {      baseStyles: {        color: "red",        fontSize: "16px"      },      customStyles: {        fontWeight: "bold"      }    }  }}</script>

上面的代碼中，使用:style指令來綁定baseStyles和customStyles兩個樣式對象，樣式的值為兩個對象的合并結果。

綁定樣式對象

可以使用計算屬性來動態綁定樣式對象。示例如下：

?<script>export default {  data() {    return {      textColor: "red",      fontSize: 16    }  },  computed: {    computedStyles() {      return {        color: this.textColor,        fontSize: this.fontSize + "px"      }    }  }}</script>

上面的代碼中，使用計算屬性computedStyles來動態綁定樣式對象，樣式的值為計算屬性的返回值。

關鍵詞：