Vue基礎知識-有解無憂

模板語法

文本插值（text interpolation）

最基本的資料系結形式，使用“Mustache”語法即{{...}}

<span>Message:{{msg}}</span>

{{}}中的值會被替換為相應組件實體中msg屬性的值，且會同步地更新

原始HTML

<p>Message:<span v-html="msg"></span></p>

這里的v-html被稱為指令

Attribute系結

雙大括號不能在HTML Attributes中使用，因此想要回應式地系結屬性應該使用v-bind指令

<div v-bind:id="dynamicId"></div>

v-bind可簡寫為

<div :id="dynamicId"></div>

布爾型Attribute

依據布林值決定屬性是否應該存在于該元素之上

<button :disabled="isButtonDisabled">Button</button>

當 isButtonDisabled 為真值或一個空字串 (即 <button disabled="">) 時，元素會包含這個 disabled attribute，而當其為其他假值時 attribute 將被忽略，

動態系結多個值

假設有這樣一個包含多個屬性的js物件

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通過不帶引數的 v-bind，你可以將它們系結到單個元素上

<div v-bind="objectOfAttrs"></div>

使用JavaScript運算式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>

在vue模板中js運算式可以被應用于如下場景：

（1）在文本插值中（2）在Vue指令的屬性值中

注意：每個系結僅支持單一運算式

例：如下用法都是無效的

<!-- 這是一個陳述句，而非運算式 -->
{{ var a = 1 }}
<!-- 條件控制也不支持，請使用三元運算式 -->
{{ if (ok) { return message } }}

呼叫函式

可在系結的運算式中使用一個組件暴露的方法

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

指令Directives

一個指令的任務是在其運算式的值變化時回應地更新DOM

例：v-if會基于seen的布林值來動態移除/插入該p元素

<p v-if="seen">Now you see me</p>

引數Arguments

某些指令需要“引數”，如v-bind回應式更新html屬性

<a v-bind:href="url"> ... </a>
<!-- 簡寫 -->
<a :href="url"> ... </a>

再如v-on監聽DOM事件（@是v-on:的縮寫）

<a v-on:click="doSomething"> ... </a>
<!-- 簡寫 -->
<a @click="doSomething"> ... </a>

動態引數

在指令引數上可以使用JS運算式，需包含在[ ]內

<!--注意，引數運算式有一些約束，
參見下面“動態引數值的限制”與“動態引數語法的限制”章節的解釋-->
<a v-bind:[attributeName]="url"> ... </a>
<!-- 簡寫 -->
<a :[attributeName]="url"> ... </a>

即如果組件實體中有一個屬性attributeName且值為“href”，則這個系結等價于v-bind:href="https://www.cnblogs.com/zmhz/archive/2023/04/22/url"

同樣還可以將一個函式系結到動態變化的事件名稱上

<a v-on:[eventName]="doSomething"> ... </a>
<!-- 簡寫 -->
<a @[eventName]="doSomething">

當evenntName的值為“focus”時，該系結等價于v-on:focus="doSomething"

注：動態引數值的限制

（1）動態引數運算式不能使用如空格和引號這種在HTML屬性名中不合法的字符，如

<!-- 這會觸發一個編譯器警告 -->
<a :['foo' + bar]="value"> ... </a>

那么當我們需要傳入一個較為復雜的動態引數時，可以使用計算屬性

（2）當使用DOM內嵌模板（直接寫在HTML檔案里的模板）時，名稱要避免使用大寫字母，因為瀏覽器會強制轉換為小寫，如：

<a :[someAttr]="value"> ... </a>

這里的:[someAttr]將被決議為:[someattr]

修飾符Modifiers

以點開頭的特殊后綴，表明指令需要以一些特殊方式被系結

如下面的例子中 .prevent 告訴v-on指令對觸發的事件呼叫event.preventDefault()

<form @submit.prevent="onSubmit">...</form>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550893.html

標籤：其他