模版語法

插值

1、Vue.js的數據綁定形式是使用“Mustache”語法（雙大括號）的形式，針對Html代碼，需要使用v-html指令。

Using v-html directive:

2、Mustache語法不能作用在HTML特性上面，此時需要使用v-bind指令。

指令

1、一些指令能夠接收一個“參數”，在指令名稱之後以冒號表示，如v-bind。

2、從2.6.0開始，可以用方括號擴起來的Javascript表達式作為一個指令的參數

這裡的 attributeName 會被作為一個 JavaScript 表達式進行動態求值，求得的值將會作為最終的參數來使用。例如，如果你的 Vue 實例有一個 data 屬性 attributeName，其值為 "href"，那麼這個綁定將等價於 v-bind:href。

同樣，我們可以使用動態參數為一個動態的事件名綁定處理函數

動態參數預期會求出一個字符串，異常情況下值為 null。這個特殊的 null 值可以被顯性地用於移除綁定。任何其它非字符串類型的值都將會觸發一個警告。 動態參數表達式有一些語法約束，因為某些字符，例如空格和引號，放在 HTML 特性名裡是無效的。

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

4、指令簡寫

v-bind指令

v-on指令

計算屬性與偵聽器

計算屬性是和普通屬性一樣在模版中綁定的，只不過該屬性的值涉及到一系列的計算，並不是單純的一個屬性值。

計算屬性的getter函數是沒有副作用（side effect）的。

計算屬性VS方法

我們可以將同一個函數定義為一個方法而不是一個計算屬性，兩種方式的最終結果是相同的。不同的是計算屬性是基於他們的依賴進行緩存的。當相關依賴不變的情況下，計算屬性是直接獲取緩存的結果，不需要執行函數，而方法的寫法每當重新渲染時，都會被再次執行。

計算屬性VS偵聽屬性

Vue提供了一種更通用的方式來觀察和響應Vue實例上的數據變更：偵聽屬性

那麼什麼時候選擇偵聽屬性更好呢？

當響應數據變化的處理是執行異步或者開銷較大的操作時，使用偵聽屬性是有用的。

Class與Style綁定

v-bind用於class和style時，Vue.js做了專門的增強，表達式結果的類型除了字符串之外，還可以是對象或數組。

綁定HTML Class

1、v-bind：class指令可以與普通的class屬性共存。我們也可以綁定一個返回對象的計算屬性，這是非常有用的模式。

2、我們可以把一個數組傳給v-bind：class，以應用一個class列表。

3、當在一個自定義組件上使用 class 屬性時，這些類將被添加到該組件的根元素上面。這個元素上已經存在的類不會被覆蓋。

綁定內聯樣式

1、v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) 來命名.

2、直接綁定到一個樣式對象通常更好，這會讓模板更清晰：

3、對象語法常常結合返回對象的計算屬性使用

4、當 v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測並添加相應的前綴。

5、可以為 style 綁定中的屬性提供一個包含多個值的數組，常用於提供多個帶前綴的值。這樣只會渲染數組中最後一個被瀏覽器支持的值。

條件渲染

1、v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。也可以用 v-else 添加一個“else 塊”。v-else 元素必須緊跟在帶 v-if 或者 v-else-if的元素的後面，否則它將不會被識別。

2、在 <template> 元素上使用 v-if 條件渲染分組/<template>

3、通過添加一個具有唯一值的 key 屬性來表達“兩個元素是完全獨立的，不要複用他們”。

4、帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。

v-if & v-show

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

5、當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。

列表渲染

1、v-for 指令根據一組數組的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組並且 item 是數組元素迭代的別名。

2、可以用 of 替代 in 作為分隔符，因為它是最接近 JavaScript 迭代器的語法, v-for="item of items"

3、可以用v-for來迭代一個對象的屬性。v-for="(value, key) in object"

在遍歷對象時，是按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的。

4、為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的唯一 id。

不要使用對象或數組之類的非原始類型值作為 v-for 的 key。用字符串或數類型的值取而代之。

5、由於Javascript的限制，Vue不能檢測到下面的變動情況：

• 當利用索引直接設置一個項目時,不會觸發狀態更新。可以通過下面方式實現：

// Vue.set

Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice

vm.items.splice(indexOfItem, 1, newValue)

// 使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名

vm.$set(vm.items, indexOfItem, newValue)

• 當直接修改數組長度時,不會觸發狀態更新。可以通過下面方式實現：

vm.items.splice(newLength)

6、Vue 不能檢測對象屬性的添加或刪除

對於已經創建的實例，Vue 不能動態添加根級別的響應式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性

7、需要為已有對象賦予多個新屬性，比如使用 Object.assign() 或 _.extend()。在這種情況下，你應該用兩個對象的屬性創建一個新的對象。

// ❌
Object.assign(vm.userProfile, {
 age: 27,
 favoriteColor: 'Vue Green'
})
// ✅
vm.userProfile = Object.assign({}, vm.userProfile, {
 age: 27,
 favoriteColor: 'Vue Green'
})

8、顯示過濾/排序結果，可以通過創建返回過濾或排序數組的計算屬性來實現。在計算屬性不適用的情況下（如嵌套v-for循環中）可以適用method方法來處理。

9、v-for & v-if

當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味著 v-if 將分別重複運行於每個 v-for 循環中。

10、在自定義組件裡，你可以像任何普通元素一樣用 v-for 。

2.2.0+ 的版本里，當在組件中使用 v-for 時，key 現在是必須的。

然而，任何數據都不會被自動傳遞到組件裡，因為組件有自己獨立的作用域。為了把迭代數據傳遞到組件裡，我們要用 props。

// 一個完整的todolist demo

Vue.component('todo-item', {

template: '\

',

props: ['title']

})

new Vue({

el: '#todo-list-example',

data: {

newTodoText: '',

todos: [

{

id: 1,

title: 'Do the dishes',

},

{

id: 2,

title: 'Take out the trash',

},

{

id: 3,

title: 'Mow the lawn'

}

],

nextTodoId: 4

},

methods: {

addNewTodo: function () {

this.todos.push({

id: this.nextTodoId++,

title: this.newTodoText

})

this.newTodoText = ''

}

}

})

事件處理

事件修飾符

• .stop
• .prevent
• .capture
• .self

<form>

<form>

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

• .once(2.1.4 new)

不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。

• .passive(2.3.0 new)

...
 // 2.3.0 new

.passive 修飾符尤其能夠提升移動端的性能

不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行為。

按鍵修飾符

在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符

Vue提供了常用的按鍵碼的別名

• .enter
• .tab
• .delete (捕獲“刪除”和“退格”鍵)
• .esc
• .space
• .up
• .down
• .left
• .right

系統修飾鍵（2.1.0 new）

可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。

• .ctrl
• .alt
• .shift
• .meta

請注意修飾鍵與常規按鍵不同，在和 keyup 事件一起用時，事件觸發時修飾鍵必須處於按下狀態。換句話說，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發 keyup.ctrl。而單單釋放 ctrl 也不會觸發事件。如果你想要這樣的行為，請為 ctrl 換用 keyCode：keyup.17。

.exact修飾符（2.5.0 new）

.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。

<button>A/<button>

<button>A/<button>

<button>A/<button>

鼠標按鈕修飾符（2.2.0 new）

• .left
• .right
• .middle

這些修飾符會限制處理函數僅響應特定的鼠標按鈕。

表單輸入綁定

你可以用 v-model 指令在表單 、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。儘管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。/<select>/<textarea>

v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。

v-model 在內部使用不同的屬性為不同的輸入元素並拋出不同的事件：

• text 和 textarea 元素使用 value 屬性和 input 事件；
• checkbox 和 radio 使用 checked 屬性和 change 事件；
• select 字段將 value 作為 prop 並將 change 作為事件。

對於需要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用 input 事件。

修飾符

.lazy

在默認情況下，v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步：

.number

如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符：

這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。

.trim

如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：

組件基礎

因為組件是可複用的 Vue 實例，所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。僅有的例外是像 el 這樣根實例特有的選項。

1、data必須是函數

一個組件的data選項必須是一個函數，因此每個實例才可以維護一份被返回對象的獨立的拷貝。

2、組件有兩種註冊類型：全局註冊和局部註冊。我們的組件都只是通過Vue.component全局註冊的

Vue.component('my-component-name', {

// ... options ...

})

全局註冊的組件可以用在其被註冊之後的任何 (通過 new Vue) 新創建的 Vue 根實例，也包括其組件樹中的所有子組件的模板中。

3、通過Prop向子組件傳遞數據

Prop 是你可以在組件上註冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。一個組件默認可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。

4、每個組件必須只有一個根元素

5、父級組件可以像處理 native DOM 事件一樣通過 v-on 監聽子組件實例的任意事件,同時子組件可以通過調用內建的 $emit 方法 並傳入事件名稱來觸發一個事件：

<parentelement> ...
 v-on:special-event="todo something...">/<parentelement>
<childelement>
 Click to trigger special-enent
/<childelement>

插槽

Vue自定義的<slot>元素可以實現通過插槽分發內容。/<slot>

解析DOM時的注意事項

HTML元素有些會有嚴格的限制包含和被包含的關係，這會導致我們使用一些有約束條件的元素時會遇到一些問題。此時可以通過is特性來解決

<table> 

 
/<table>
下面情況不會出現限制：
字符串模版（例如 template：‘...’）
單文件組件（.vue）
小結
以上是在重溫Vue.js官方文檔基礎部分內容時做出的拾遺筆記，記錄認為是一些需要特別注意的地方。後續會繼續深入進行Vue.js的學習。
最後
以下是總結出來最全前端框架視頻，包含： javascript/vue/react/angualrde/express/koa/webpack 等學習資料。
 
【領取方式】
關注頭條 前端全棧架構丶第一時間獲取最新前端資訊學習
手機用戶可私信關鍵詞 【前端】即可獲取全棧工程師路線和學習資料！
 

                

            

            
            
            
            
            
            
            
            
            
            
            

            



分享到:



 閱讀更多  前端全棧架構丶 
的文章

關鍵字:
HTML
基礎
瀏覽器