Vue學習記錄（一）

Vue學習記錄（一）

1.兼容性：

Vue有兼容性，它不支持IE8及如下版本，由於Vue使用了IE8沒法模擬的ECMAScript5特性。但Vue支持全部兼容ECMAScript5特性的瀏覽器。

2.NPM安裝：

(1) NPM能很好地與諸如webpack或Browserify等模塊打包器配合使用，指令爲：npm install vue。
(2) 使用官方提供命令行工具CLI，它可用於快速搭建大型單頁應用，指令爲：npm install --global vue-cli。
(3) 建立一個基於 webpack 模板的新項目，指令爲：vue init webpack 項目名稱。
(4) 安裝項目所需依賴，指令爲：npm install 須要安裝的依賴。
(5) 打開項目所在的文件夾，而後輸入指令，指令爲：cd 項目名稱。
(6) 運行項目，指令爲：npm run dev。

3.介紹：

(1) Vue是一套用於構建用戶界面的漸進式框架，屬於自底向上的逐層應用，它的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。
(2) Vue的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進DOM的系統。
(3) 指令：Vue的指令帶有前綴v-，以表示它們是Vue提供的特殊特性，好比：v-bind(響應式行爲綁定)、v-if(判斷)、v-for(綁定數組來渲染數據)、v-on(事件監聽器)、v-model(表單輸入和應用狀態之間雙向綁定)。
(4) 組件化應用構建：Vue中一個組件的本質上是一個擁有預約義選項的一個Vue實例。

4.模板語法：
(1) 文本：數據綁定文本插值使用的是「Mustache」語法(雙大括號)，即{{}}。
(2) 原始HTML：在標籤內使用v-html指令。注意，站點上動態渲染的HTML可能會很是危險，由於它很容易致使XSS攻擊，因此只能夠對可信內容使用HTML插值，毫不要對用戶提供的內容使用插值。
(3) 特性：定義HTML特性需使用v-bind指令。
(4) 使用JavaScript表達式：每一個綁定都只能包含單個表達式，不是語句也不是方法。
(5) 指令：帶有v-前綴的特殊屬性。指令屬性的值預期是單個JavaScript表達式，其職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。一些指令可以接收一個「參數」，在指令名稱以後以冒號表示，好比：<a v-bind:href="地址連接"></a>、<a v-on:click="事件名"></a>。
(6) 縮寫：v-bind縮寫爲:，如：<a v-bind:href="地址連接"></a>能夠寫爲<a :href="地址連接"></a>。
v-on縮寫爲@，如：<a v-on:click="事件名"></a>能夠寫爲<a @click="事件名"></a>。