引言

本系列教程旨在幫助一些零基礎(chǔ)的玩家快速上手前端開發(fā)。基于我自學(xué)的經(jīng)驗會刪減部分使用頻率不高的內(nèi)容，并不代表這部分內(nèi)容不重要，只是對于初學(xué)者來說沒必要一開始就學(xué)的面面俱到。我希望可以先通過主干內(nèi)容帶大家入門前端，細節(jié)技巧性內(nèi)容，可以在后續(xù)的開發(fā)工作中自行發(fā)現(xiàn)并掌握。

在上一篇 【vue2.0入門】vue單文件組件 中，我們已經(jīng)對vue單文件各個部分做了解釋，本篇將通過幾個例子對常用vue語法進行講解。

詳細的vue語法內(nèi)容參考：vue2語法教程

---

一、頁面動態(tài)插值

在template中以 {{ 表達式 }} 的形式，將一個表達式的結(jié)果以文本形式動態(tài)插入頁面標簽中。

一般情況下，這個表達式可以是：

• data中定義的變量
• props中從父組件傳入的屬性
• computed中對data變量或是props屬性加工后的表達式

1. 一般用法

仍然使用 HelloWorld 組件，按照 【vue2.0入門】vue單文件組件 中介紹的vue2代碼片段初始化一個vue組件模板。

<template><div class="container"><div class="item"><span>父組件傳值</span><span>{{ msg }}</span></div><div class="item"><span>系統(tǒng)內(nèi)存</span><span>{{ memorySize }} B</span></div><div class="item"><span>系統(tǒng)內(nèi)存格式化方式1：</span><span>{{ (memorySize / 1024 / 1024 / 1024).toFixed(2) }} GB</span></div><div class="item"><span>系統(tǒng)內(nèi)存格式化方式2：</span><span>{{ memorySizeFormat }} GB</span></div><div class="item"><span>引用類型屬性為空：</span><span>{{ sysInfo.cpu || "AMD" }} </span></div><div class="item"><span>引用類型屬性不存在：</span><span>{{ sysInfo.gpu || "NVIDIA" }} </span></div></div>
</template><script>
export default {props: {msg: {type: String,default: "hello world!",},},data() {return {memorySize: 8589935000,sysInfo: {cpu: "",},};},// 計算屬性computed: {memorySizeFormat() {return (this.memorySize / 1024 / 1024 / 1024).toFixed(2);},},
};
// 其他代碼
</script>

如上代碼中：

• 系統(tǒng)內(nèi)存格式化方式1 和 系統(tǒng)內(nèi)存格式化方式2 的插值我用了兩種方式，表達的意思是一樣的。插值符號中可以利用變量編寫表達式，最后呈現(xiàn)表達式執(zhí)行結(jié)果的字符串形式，當表達式過于復(fù)雜時，可以考慮使用computed加工一下變量。computed就像是一個加工車間，輸入的是data或是props的變量，輸出一個表達式結(jié)果。 memorySizeFormat 就表示一條產(chǎn)品線，它等價于 (this.memorySize / 1024 / 1024 / 1024).toFixed(2) 這個生產(chǎn)過程的結(jié)果。當前組件的全局都可以通過 this.memorySizeFormat 訪問到這個結(jié)果。
• 當需要向template插入的值取自一個 sysInfo 的屬性，然而這個屬性值為空或是不存在時，可以使用 || 符號添加默認值，使頁面位置不為空。

效果如下：

---

二、計算屬性computed

在頁面動態(tài)插值部分我們已經(jīng)展示了computed的基礎(chǔ)使用方法。

在一些特殊情況下，computed并不依賴于data變量或是props變量，而是接收一個傳入的參數(shù)做計算，具體寫法如下

  // 計算屬性computed: {memorySizeParams(){return (params)=>{return (params / 1024 / 1024 / 1024).toFixed(2);}}},

我們在 template 中可以按照函數(shù)傳參的方式來調(diào)用，這里把 memorySize 作為參數(shù)傳入函數(shù)內(nèi)部，返回處理后的結(jié)果用于頁面插值渲染。

    <div class="item"><span>系統(tǒng)內(nèi)存格式化方式3：</span><span>{{ memorySizeParams(memorySize) }} GB</span></div>

---

三、動態(tài)class、style綁定

class的綁定主要是對一個 自定義class名 做一個是否為 真 的判斷，style的綁定主要是對 css屬性名 賦予動態(tài)的 屬性值 。

寫法上只需要在原有的class和style屬性名前加上冒號 : 即可，例如 :class 、 :style 。此時這兩個屬性的值需要是一個表達式，而不是確定的值。（表達式可以是變量，可以是計算屬性的返回值，也可以是通過代碼運算后得到的值）

對于class的綁定：

• 多個類的動態(tài)綁定我會采用對象形式，可以在data中設(shè)置對象變量，屬性名為你需要設(shè)置的 class名，屬性值為Boolean，用于判斷當前class名是否授予這個標簽。在style中也要提前編寫好對應(yīng) class名 的樣式類。
• 你同樣可以把這個對象直接搬到標簽中，這和你使用data中的對象是等價的。需要要注意的是 雙引號 " " 和 單引號 ' ' 的嵌套關(guān)系，避免一些報錯。
• 當你需要動態(tài)添加單個class類，那可以不加 大括號 {}，直接編寫表達式（需要該表達式最終返回一個class名）。我這里用了一個 三元運算符 返回一個確定的class名，感興趣的百度一下這個運算符用法。

對于style的綁定：

• 和class的區(qū)別就是，style的綁定主要是對一個確定css屬性賦予動態(tài)的值。通過表達式獲取一個合規(guī)的css屬性值。

<template><div class="container"><!-- 動態(tài)class --><div class="mainclass" :class="additionalClass">動態(tài)class測試</div><divclass="mainclass":class="{ customBg: customStr == 'world', customColor: customNum == 1 }">動態(tài)class測試</div><divclass="mainclass":class="customStr == 'world' ? 'customBg' : 'customColor'">動態(tài)class測試</div><!-- 動態(tài)style --><div class="mainclass" :style="additionalStyle">動態(tài)style測試</div><divclass="mainclass":style="{background: customBackground,color: customColor,}">動態(tài)style測試</div><div class="mainclass" :style="{ color: customNum == 1 ? 'red' : 'blue' }">動態(tài)style測試</div></div>
</template><script>
export default {data() {return {//動態(tài)classadditionalClass: {customBg: true,customColor: false,},customNum: 1,customStr: "hello",// 動態(tài)styleadditionalStyle: {background: "yellow",color: "blue",},customBackground: "yellow",customColor: "blue",};},};
</script>
<style scoped>
.mainclass {margin-top: 20px;
}.customBg {background: #f8a5d4;
}.customColor {color: #0ade0d;
}
</style>

觀察對比開發(fā)者工具中標簽屬性和代碼，理解下動態(tài)綁定的過程

---

四、條件渲染與列表渲染

這兩個語法在官網(wǎng)中有著較為詳盡的介紹，參考：條件渲染 、列表渲染

本篇針對列表渲染與條件渲染嵌套使用時如何處理。

這個問題常發(fā)生在一些場景中，例如從后端拿到了一組原始數(shù)據(jù)，數(shù)據(jù)中有個 A屬性 代表該數(shù)據(jù)是否渲染。我們一般做法是提前根據(jù)這個 A屬性 對數(shù)據(jù)進行篩選，然后在進行列表渲染，避免列表渲染和條件渲染同時使用。

舉個例子：

<template><div class="container"><!-- 列表渲染 --><div class="mainclass" v-for="item in handleFruits" :key="item.id">{{ item.name }}</div></div>
</template><script>
export default {data() {return {// 列表渲染Fruits: [{ id: 1, name: "蘋果", visible: true },{ id: 2, name: "香蕉", visible: false },{ id: 3, name: "橙子", visible: true },{ id: 4, name: "桃子", visible: false },],};},// 計算屬性computed: {handleFruits() {return this.Fruits.filter((item) => item.visible);},},};
</script>

---

五、事件處理

關(guān)于vue2的事件處理語法，建議參考：事件處理

本篇介紹一些需要注意的地方：

• 在官方文檔中綁定事件的方法為 v-on: ，日常工作中使用簡寫方式 @ ，例如：@click
• 如果你需要在事件處理器中訪問原生事件對象，可以使用 $event 關(guān)鍵字作為參數(shù)傳入調(diào)用的方法中。

    <div @click="handleClick($event)">

---

六、表單輸入綁定

關(guān)于vue2的表單輸入綁定語法，建議參考：表單輸入綁定

本篇介紹一些需要注意的地方：

• 表單輸入綁定主要用于需要用戶輸入信息或者選擇信息的標簽，主要是這三種： <input> 、<textarea> 及 <select> 。

---

七、總結(jié)

以上即為vue基礎(chǔ)語法的內(nèi)容，建議從官方文檔入手，結(jié)合本篇介紹的需要注意的點一起學(xué)習(xí)。

本篇重點：

• 再次熟悉 表達式 這個概念
• 了解 computed 的傳參用法
• 掌握列表渲染與條件渲染嵌套使用時的應(yīng)對方法。
• vue的一些語法簡寫

接下來我們將學(xué)習(xí)vue工程引入第三方庫，進行數(shù)據(jù)獲取、路由配置、全局狀態(tài)管理等。

再接再厲~