Vue3從入門(mén)到精通(一) 環(huán)球觀天下

元素。

需要注意的是，key屬性的值必須是唯一的，不能重復(fù)。如果重復(fù)了，會(huì)導(dǎo)致Vue無(wú)法正確地識(shí)別每個(gè)組件或元素的狀態(tài)，從而導(dǎo)致渲染錯(cuò)誤。

vue3 事件處理

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

綁定事件

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

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

上面的代碼中，使用@click指令來(lái)綁定handleClick方法，當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)觸發(fā)handleClick方法。

事件修飾符

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

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

上面的代碼中，使用.stop修飾符來(lái)阻止事件冒泡，當(dāng)div元素被點(diǎn)擊時(shí)，不會(huì)觸發(fā)其父元素的點(diǎn)擊事件。

動(dòng)態(tài)事件名

在Vue3中，可以使用方括號(hào)來(lái)綁定動(dòng)態(tài)事件名。示例如下：

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

上面的代碼中，使用@[eventName]指令來(lái)綁定動(dòng)態(tài)事件名，事件名為eventName的值。

自定義事件

在Vue3中，可以使用createApp方法的provide和inject選項(xiàng)來(lái)實(shí)現(xiàn)自定義事件的傳遞。示例如下：

// 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方法將事件總線(xiàn)對(duì)象EventBus注入到根組件中，然后在子組件中使用inject方法獲取事件總線(xiàn)對(duì)象，并通過(guò)on方法監(jiān)聽(tīng)自定義事件customEvent，當(dāng)事件觸發(fā)時(shí)，更新message的值。

vue3 事件傳參

在Vue3中，事件傳參的方式和Vue2基本相同，可以使用$event來(lái)傳遞事件對(duì)象，也可以使用函數(shù)來(lái)傳遞自定義參數(shù)。

示例代碼如下：

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

上面的代碼中，使用$event來(lái)傳遞事件對(duì)象，使用"參數(shù)"來(lái)傳遞自定義參數(shù)。

另外，如果需要在事件處理函數(shù)中訪問(wèn)組件實(shí)例，可以使用箭頭函數(shù)來(lái)綁定作用域，例如：

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

上面的代碼中，使用箭頭函數(shù)來(lái)綁定作用域，從而在事件處理函數(shù)中訪問(wèn)組件實(shí)例。

vue3 事件修飾符

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

常用的事件修飾符包括：

.stop：阻止事件冒泡

.prevent：阻止事件默認(rèn)行為

.capture：使用事件捕獲模式

.self：只在事件目標(biāo)自身觸發(fā)時(shí)觸發(fā)事件

.once：只觸發(fā)一次事件

.passive：告訴瀏覽器該事件不會(huì)調(diào)用preventDefault()方法，可以?xún)?yōu)化頁(yè)面滾動(dòng)性能

示例代碼如下：

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

上面的代碼中，使用不同的事件修飾符來(lái)控制事件的行為。例如，使用.stop修飾符來(lái)阻止事件冒泡，使用.prevent修飾符來(lái)阻止事件默認(rèn)行為，使用.capture修飾符來(lái)使用事件捕獲模式，使用.self修飾符來(lái)只在事件目標(biāo)自身觸發(fā)時(shí)觸發(fā)事件，使用.once修飾符來(lái)只觸發(fā)一次事件，使用.passive修飾符來(lái)告訴瀏覽器該事件不會(huì)調(diào)用preventDefault()方法，可以?xún)?yōu)化頁(yè)面滾動(dòng)性能。

vue3 計(jì)算屬性

在Vue3中，計(jì)算屬性的使用方式和Vue2基本相同，可以通過(guò)在組件的computed選項(xiàng)中定義計(jì)算屬性來(lái)計(jì)算和緩存值。

示例代碼如下：

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

上面的代碼中，使用computed選項(xiàng)來(lái)定義計(jì)算屬性quantity和totalPrice，分別計(jì)算商品數(shù)量和商品總價(jià)。

在模板中，可以像訪問(wèn)普通屬性一樣訪問(wèn)計(jì)算屬性，例如{{ quantity }}和{{ totalPrice }}。

需要注意的是，在Vue3中，計(jì)算屬性的返回值可以是一個(gè)函數(shù)，這樣可以實(shí)現(xiàn)動(dòng)態(tài)計(jì)算屬性。示例代碼如下：

?<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>

上面的代碼中，計(jì)算屬性totalPrice返回一個(gè)函數(shù)，這個(gè)函數(shù)會(huì)動(dòng)態(tài)計(jì)算商品總價(jià)，考慮到折扣可能會(huì)變化，因此需要?jiǎng)討B(tài)計(jì)算商品總價(jià)。

vue3 class綁定

在Vue3中，可以使用v-bind:class指令來(lái)綁定一個(gè)對(duì)象或數(shù)組來(lái)動(dòng)態(tài)地設(shè)置一個(gè)元素的class屬性。

下面是使用對(duì)象語(yǔ)法綁定class的示例代碼：

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

上面的代碼中，使用:class指令來(lái)綁定一個(gè)對(duì)象，這個(gè)對(duì)象的屬性名是class名稱(chēng)，屬性值是一個(gè)布爾值，表示是否應(yīng)用這個(gè)class。在這個(gè)示例中，如果isActive為true，則會(huì)應(yīng)用active這個(gè)class，如果hasError為true，則會(huì)應(yīng)用text-danger這個(gè)class。

下面是使用數(shù)組語(yǔ)法綁定class的示例代碼：

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

上面的代碼中，使用:class指令來(lái)綁定一個(gè)數(shù)組，這個(gè)數(shù)組的元素可以是字符串或?qū)ο蟆Ｈ绻麛?shù)組元素是字符串，則表示應(yīng)用這個(gè)class；如果數(shù)組元素是對(duì)象，則表示應(yīng)用這個(gè)對(duì)象中的class。

在這個(gè)示例中，如果isActive為true，則會(huì)應(yīng)用active這個(gè)class，如果errorClass為text-danger，則會(huì)應(yīng)用text-danger這個(gè)class。

需要注意的是，在Vue3中，可以使用動(dòng)態(tài)組件來(lái)動(dòng)態(tài)渲染不同的組件，這個(gè)功能可以使用元素和is特性來(lái)實(shí)現(xiàn)。示例代碼如下：

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

上面的代碼中，使用元素和is特性來(lái)動(dòng)態(tài)渲染不同的組件。在這個(gè)示例中，點(diǎn)擊ComponentA按鈕會(huì)渲染ComponentA組件，點(diǎn)擊ComponentB按鈕會(huì)渲染ComponentB組件。

vue3 style 綁定

在Vue3中，可以使用v-bind指令或簡(jiǎn)寫(xiě)的:來(lái)動(dòng)態(tài)綁定樣式。

綁定單個(gè)樣式

可以使用對(duì)象語(yǔ)法來(lái)綁定單個(gè)樣式，對(duì)象的屬性名為樣式名，屬性值為樣式值。示例如下：

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

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

綁定多個(gè)樣式

可以使用對(duì)象語(yǔ)法來(lái)綁定多個(gè)樣式，對(duì)象的屬性名為樣式名，屬性值為樣式值。示例如下：

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

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

綁定樣式數(shù)組

可以使用數(shù)組語(yǔ)法來(lái)綁定多個(gè)樣式，數(shù)組中的元素為樣式對(duì)象。示例如下：

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

上面的代碼中，使用:style指令來(lái)綁定baseStyles和customStyles兩個(gè)樣式對(duì)象，樣式的值為兩個(gè)對(duì)象的合并結(jié)果。

綁定樣式對(duì)象

可以使用計(jì)算屬性來(lái)動(dòng)態(tài)綁定樣式對(duì)象。示例如下：

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

上面的代碼中，使用計(jì)算屬性computedStyles來(lái)動(dòng)態(tài)綁定樣式對(duì)象，樣式的值為計(jì)算屬性的返回值。

關(guān)鍵詞：