一款很便捷很實用的框架——vue.js

Hello，你們好！今天給你們帶來一款十分好用的框架——vue.js！

Vue.js是一套構建用戶界面的漸進式框架。它 只關注視圖層， 採用自底向上增量開發的設計。

Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。

 

什麼是雙向綁定？？

Vue框架 很核心的功能就是雙向數據綁定。雙向是指：HTML標籤數據綁定到Vue對象，另外反方向數據也是綁定的。

通俗點說就是，Vue對象的改變會直接影響到HTML標籤的變化，並且標籤的變化也會反過來影響Vue對象屬性的變化。

 

【 Vue構造函數 】

① 選項el屬性，element縮寫。當前Vue對象掛載到那個標籤上的語法，支持CSS選擇器或者DOM對象，通常用ID選擇器 選擇當前標籤。

② data 是自定義數據。Vue會把自定義數據與HTML 模板進行綁定。

③ 數據綁定方式就是用雙大括號{{}} ，相似於Angular。

 

1、 聲明式渲染

2、動態綁定標題提示

3、顯示與隱藏

4、遍歷數組

5、雙向數據綁定

 

【 VueJs 的實例化 】

當一個vue實例被建立時，它向vue的響應式系統中加入了其 data對象所能找到的全部屬性。當這些屬性的值發生改變時，視圖會產生"響應"，即匹配更新爲新的值。

 

【vue實例的生命週期】

　　每一個 Vue 實例在被建立以前都要通過一系列的初始化過程。

　　例如須要設置 數據監聽、編譯模板、掛載實例到 DOM、在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作 生命週期鉤子的函數，給予用戶機會在一些特定的場景下添加他們本身的代碼。

 

【 Vue.js 的表達式 】

 

　　一、Vue.js 中使用{{}} 綁定表達式，用於將表達式的內容輸出到頁面中。

　　二、表達式中能夠是文字、運算符、變量等，也能夠在表達式中進行運算輸出結果。

　　三、若是vue.js文件放在頁面下方，在頁面涮新瞬間會看到{{}}表達式的原樣，因此可使用 v-cloak 指令代替表達式。

　　　　在CSS中設置 [v-cloak]{display:none;} 或者 v-html = "message"  

【vue.JS中的指令】—— 模板語法

指令是擴展的 HTML屬性，帶有前綴v-。

　　　　v-bind：動態綁定數據。是專門用來綁定屬性的 ，主要用來操做元素的 class 列表和它的內聯樣式.簡寫爲「:」 。=> 之後的:class="{red:boolean}"

　　　　v-cloak ：隱藏未編譯的Mustache語法，在css中設置[v-cloak]{display:none;}

　　　　v-text ：更新數據，會覆蓋已有結構。相似{{ msg }} ；

　　　　v-once ：只渲染一次，隨後數據更新也不從新渲染；

　　　　v-html : 解析HTML標籤 v-html = "message"

 

　　　　v-show ：根據值的真假，切換元素的display屬性；

　　　　v-if ：根據值的真假，切換元素會被銷燬、重建； => 在dom中已消失

　　　　v-else-if ：多條件判斷，爲真則渲染；

　　　　v-else ：條件都不符合時渲染；

　　　　v-for ：基於源數據屢次渲染元素或模塊；

 

　　　　v-model ：在表單控件元素（input等）上建立雙向數據綁定（數據源）；跟Angular中 ng-model 用法同樣。

　　　　v-pre ：跳過元素和子元素的編譯過程；

　　　　v-on ：綁定時間監聽器。簡寫爲「@」，例：@click="xxx"；

 

6、條件語句

 

【 區別 v-if v-show v-else v-else-if 】

　　v-if ：根據值的真假，切換元素會被銷燬、重建； => 在dom中已消失

　　v-show ：根據值的真假，切換元素的display屬性；

　　v-else ：條件都不符合時渲染；

　　v-else-if ：多條件判斷，爲真則渲染；

【 v-show v-if 的使用與比較 】

　　① v-show ：根據值的真假，切換元素的display屬性；

　　　　v-show是控制隱藏或顯示。元素會始終渲染並保持在dom中。

　　　　v-show不支持template標籤

　　② v-if是控制DOM節點的生成和銷燬。 是真實的條件渲染，由於它會確保條件塊在切換當中適當的銷燬與重建條件塊內的事件監聽器和子組件。

　　③ v-if 有更高的切換消耗，而v-show有更高的初始渲染消耗。

　　　　若是須要頻繁切換使用，v-show更好。若是運行時條件不大可能改變，用v-if較好。

 

7、循環語句 v-for  

　　① 語法： v-for = "x in items" x 是 索引：items是數組，這樣進行遍歷

② v-for循環是不斷建立新的標籤，標籤裏的內容，咱們決定，通常都是放在數組裏，而後遍歷顯示出來。也能夠放對象 ，遍歷對象。

③ 當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。

 

8、 v-bind 數據綁定

　　① v-bind做用：v-bind 是專門用來 綁定屬性的，主要用來操做元素的class列表和它的內聯樣式

　　② 用法：和JS操做DOM同樣，可是更簡單

　　③ 語法：

　　　　:class = "{className : 表達式}"

　　　　表達式 值爲 true，添加 className（add）

　　　　表達式 值爲 false，不添加 className（remove）

9、計算屬性 【computed 和 methods】

　　一、寫法上的區別：

　　　　computed 計算屬性在使用時，不用加()，而methods在使用時，要向方法同樣去用，必須加()；

　　二、利用 computed 計算屬性時，是將content和message綁定，只有當message發生變化時，纔會觸發content

　　　　而 methods 方方式，每次進入頁面時，都要執行該方法。

 

 

10、組件

【什麼是組件】

　　一、組件其實就是頁面組成的一部分，它是一個具備獨立的邏輯和功能或頁面，

　　　　同時又能根據規定的接口規則進行相互融合，變成一個完整的應用。

　　二、高內聚性，組件功能必須是完整的。（如我要實現下拉菜單功能，那在下拉菜單這個組件中，

　　　　就把下拉菜單所須要的全部功能所有實現）。

　　三、低耦合性。（較低的耦合便於單元測試和重複利用）

　　四、每個組件都有本身清晰的職責，完整的功能。

 

【vue中的組件】

　　Vue 中的組件是一個自定義的標籤（元素），vue.js的編譯器會爲它添加特殊功能

　　Vue中的組件也能夠拓展原生的HTML元素，封裝可重用的代碼。

 

【組件的基本組成】

　　樣式結構 行爲邏輯 數據

【注】

　　起名：在JS中使用駝峯，在HTML中就要使用 myCom => <my-com></my-com>

 

【 全局組件 】

一、全局組件必須寫在vue實例建立以前，纔會在根元素下面生效

二、模板裏面第一級 只能有一個標籤，不能並行

eg.

// 全局組件

　　　　Vue. component("myCom",{

　　　　　　template : "<h1 style = 'color:blue'>vue組件<p>hahaha</p></h1>" // p在h1裏面

　　　　})

 

【 局部組件 】

　　一、局部組件直接在vue實例裏，使用 components 註冊。

　　二、建議將模板定義在一個全局變量裏。

 

更加詳細的內容請參考資料：http://www.runoob.com/vue2/vue-routing.html

謝謝你們！