前端培訓-中級階段（35）- Vue 語法

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

模板語法

插值（模板字符串）

可使用 {{ }} 來顯示變量。這樣的話，若是內部修改 author 的話，頁面上也會實時更新。
v-once 指令，能夠執行單次渲染，後續變化不在更新。
delimiters: ['${', '}'] 經過這個配置項，咱們能夠修改成習慣的分隔符。

<template>
    <span>Message: {{ author }}</span>
</template>

<script>
export default {
    data(){
        return {
            author: 'www.lilnong.top'
        }
    }
}
</script>

v-text 和 v-html

插值的寫法基本等價於 v-text。
固然有些時候咱們有可能會須要渲染 HTML，好比說 表情、富文本等等，這個是咱們可使用 v-html。
固然，不建議使用 v-html ，由於有可能會有 xss 的問題。

<template>
    <div>
        <span>Message: {{ author }}</span>
        <span v-text="author"></span>
        <span v-html="author"></span>
    </div>
</template>

<script>
export default {
    data(){
        return {
            author: 'www.lilnong.top，<span style="red>lilnong.top</span>'
        }
    }
}
</script>

屬性

綁定動態屬性須要使用 v-bind（縮寫是:）。下面這兩種寫法是等價的

<span v-bind:id="author"></span>
<span :id="author"></span>

若是是 disabled 這類的屬性，在值爲 false 時是不會渲染在DOM 上的。由於這種屬性在 HTML5 規範中，存在即爲 true。

style

style 屬性是特殊處理過的，你能夠 直接使用對象形式。

<template>
    <div>
        <span :style="authorStyle">Message: {{ author }}</span>
    </div>
</template>

<script>
export default {
    data(){
        return {
            author: 'www.lilnong.top，<span style="red>lilnong.top</span>',
            authorStyle: {
                color: '#0cc'
            }
        }
    }
}
</script>

class

class 屬性是特殊處理過的，你能夠 直接使用對象形式。

1. 對象形式。以下，item.checked 爲真時，會增長 checked 這個 class。item.checked && item.age >= 18 爲真時，會增長 isHigh 這個 class。

   {
        checked: item.checked,
        isHigh: item.checked && item.age >= 18
   }

2. 數組形式。默認給全部都加上了 checkbox 這個 class。

   ['checkbox',{
        checked: item.checked,
        isHigh: item.checked && item.age >= 18
   }]

事件

事件是咱們開發中必不可少的東西。好比 click、input 等等。
咱們在 Vue 中，綁定事件使用 v-on（縮寫是 @）來綁定事件。下面兩種寫法是等價的。

<button v-on:click="clickHandler">btn</button>
<button @click="clickHandler">btn</button>

指令

指令 (Directives) 帶有 v- 前綴，如剛纔咱們用到的 v-bind、v-on、v-text、v-html。
指令的值預期是單個 JavaScript 表達式 (v-for 是例外狀況)。
指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。

<a v-bind:href="url">...</a>
<a :href="url">...</a>
<button v-on:click="clickHandler">btn</button>
<button @click="clickHandler">btn</button>
<span v-text="author"></span>
<span v-html="author"></span>

Vue 自帶的指令

1. v-text 更新元素 textContent，我我的感受仍是模板字符串好用
2. v-html 更新元素的 innerHTML，這裏須要注意 XSS 防禦喲。
3. v-show 切換元素的 display，來實現顯示隱藏。
4. v-if、v-else、v-else-if 經過組件銷燬重建，來實現顯示隱藏。

5. v-for 遍歷，這裏要注意使用 :key。

   <div v-for="(item, index) in items"></div>
    <div v-for="(val, key) in object"></div>
    <div v-for="(val, name, index) in object"></div>

6. v-on 用於綁定事件。組件上若是想觸發元素的原生事件能夠用 .native 。縮寫是 @

   1. 修飾符

      • .stop- 調用 event.stopPropagation()。
      • .prevent- 調用 event.preventDefault()。
      • .capture- 添加事件偵聽器時使用 capture 模式。
      • .self- 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。
      • .{keyCode | keyAlias}- 只當事件是從特定鍵觸發時才觸發回調。
      • .native- 監聽組件根元素的原生事件。
      • .once- 只觸發一次回調。
      • .left- (2.2.0) 只當點擊鼠標左鍵時觸發。
      • .right- (2.2.0) 只當點擊鼠標右鍵時觸發。
      • .middle- (2.2.0) 只當點擊鼠標中鍵時觸發。
      • .passive- (2.3.0) 以 { passive: true } 模式添加偵聽器

7. v-bind 設置屬性。縮寫是 :

   1. 修飾符：

      • .prop- 做爲一個 DOM property 綁定而不是做爲 attribute 綁定。(差異在哪裏？)
      • .camel- (2.1.0+) 將 kebab-case attribute 名轉換爲 camelCase。(從 2.1.0 開始支持)
      • .sync(2.3.0+) 語法糖，會擴展成一個更新父組件綁定值的v-on偵聽器。

8. v-model 用於實現數據雙向綁定，實際上是個語法糖

   1. <input v-model="value"> 等價於 <input ：value="value" @input="value = $event.target.value">

   2. 只能夠在指定的元素上使用

      • <input>、<select>、<textarea> 元素的表單 DOM
      • components 自定義的組件

   3. 修飾符：

      • .lazy- 取代 input 監聽 change 事件
      • .number- 輸入字符串轉爲有效的數字
      • .trim- 輸入首尾空格過濾
9. v-slot 爲插槽傳入 prop 的時候使用。默認是 default，縮寫是 #
10. v-pre 跳過這個元素和它的子元素的編譯過程。能夠用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。
11. v-cloak 這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一塊兒用時，這個指令能夠 隱藏未編譯的 Mustache 標籤直到實例準備完畢。
12. v-once 只渲染元素和組件一次。隨後的從新渲染，元素/組件及其全部的子節點將被視爲靜態內容並跳過。這能夠用於優化更新性能。

動態指令

從 2.6.0 開始，能夠用 方括號 （\[ 和 \]）括起來的 JavaScript 表達式做爲一個指令的參數：

<a v-bind:\[attributeName\]="url"\> ... </a\>
<a v-on:\[eventName\]="doSomething"\> ... </a\>

修飾符

修飾符 (modifier) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。
例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()

微信公衆號：前端linong

參考文獻

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃