vue,js基礎知識

標籤：bsp   識別   輸入   最好   其他   img   3.2   指令   安全   

Vue.js是一套構建使用者介面（view）的MVVM架構。Vue.js的核心庫只關注視圖層，並且非常容易學習，非常容易與其他庫或已有的項目整合。

1.1 Vue.js的目的

Vue.js的產生核心是為瞭解決如下三個問題：

1. 解決資料繫結的問題；
2. Vue.js架構生產的主要目的是為了開發大興單頁面應用（SPA：Single Page Application）

Angular.js中對PC端支援的比較良好，但是對移動端支援就一般。而Vue.js主要支援移動端，也支援PC端。

3. 它還支援組件化。也就是可以將頁面封裝成若干個組件，採用積木式編程 ，這樣是頁面的複用度達到最高（支援組件化）。

1.2 Vue.js特性

1. MVVM模式

M: model  業務模型，用處：處理資料，提供資料

V: view    使用者介面、使用者視圖

 

業務模型model中的資料發生改變的時候，使用者視圖view也隨之變化。使用者視圖view改變的時候，業務模型model中的資料也可以發生改變。

1. 組件化
2. 指令系統
3. Vue.js 2.0開始支援虛擬DOM（Vue.js 1.0 是操作的真是DOM，而不是虛擬DOM）

虛擬DOM可以提升頁面的重新整理速度。

第二章  Vue.js入門

使用Vue.js的步驟：

第一步：在html頁面中引入vue.js

 

 

 

第二步：Vue.js提供了一個Vue,我們需要建立一個對象。

new Vue({});

 

 

第三步：在使用者介面view中，通過{{}}形式將data中的資料顯示在頁面中。

在使用者介面中，{{}}代碼中綁定的data的key，而在頁面中顯示的是該key的value。

Vue.js對擷取的data與頁面上顯示的{{}}會產生一種映射關係。

 

 

 

app這個變數會代理vue中data資料。所以我們訪問data中資料的時候，直接用app.name就可以了

 

 

 

這樣，如果我們要實現前後台互動，只要將從後台得到的資料，放在data中,頁面就會自動綁定，這樣就實現了從model->view的資料流向。

第三章  Vue.js指令

指令，其實指的就是vue的v-開頭的自訂屬性。每個不同的屬性都有各自不同的意義和功能。

指令的文法：

v-指令名稱=”運算式判斷或者是業務模型中屬性名稱或者是事件名”

3.1 v-text

作用：操作元素中的純文字

捷徑：{{}}

 

 

 

 

 

3.2 v-html

作用：操作元素中的html

 

 

 

 

3.3 v-bind

作用：v-bind綁定頁面中的元素屬性。例如：a的href屬性，img的src、alt和title屬性。

文法：v-bind:元素的屬性名稱 = “data中鍵名”

 

 

 

 

 

 

在view模板中，可以使用簡單的JS表單式，例如：

 

 

 

3.4 v-show

作用：通過判斷，是否顯示該內容。如果值為true，則顯示。否則就隱藏。

文法：v-show=”判斷運算式”

特點：元素會始終渲染在DOM中，只是被設定了display:none

 

 

 

 

 

 

3.5 v-if 

作用：判斷是否載入固定的內容。如果為真，則載入；為假時，則不載入。

用處：用在許可權管理，頁麵條件載入

文法：v-if=”判斷運算式”

特點：控制元素插進來或者刪除，而不是隱藏。

 

v-if與v-show的區別：

一般來說，v-if有更高的切換消耗，安全性更高，而v-show有更多的初始化渲染消耗。因此，如果需要頻繁切換而對安全性無要求，使用v-show。如果在運行時，條件不可能改變，則使用v-if較好。

 

3.6 v-else

v-else必須緊跟在v-if後面，否則他不能被識別。表示：當v-if的條件不成立的時候執行。

 

3.7 v-for

作用：控制html元素中的迴圈，實現詩句列表的產生。

用法：

view:

v-for=”item in 集合”

 

item: 集合的子項

集合：被遍曆的集合，通常為數組。

用處：寫在誰上，誰迴圈。

 

 

 

 

資料：

 

 

 

 

 

 

 

3.8 v-on

作用：對頁面中的事件進行綁定

文法： v-on:事件類型=“事件處理函數名”

縮寫： @事件類型=“事件處理函數名”

 

 

 

 

用法：

在view中，用v-on:事件類型=”methods中的方法名字”

在vue執行個體中，在methods中去監聽：也就書寫methods的該方法。

 

 

 

 

 

3.9 v-model

作用：接受使用者輸入的一些資料，直接就可以將這些資料掛在到data屬性上。這樣就產生了雙向的資料繫結（當業務模型中的資料發生變化時，使用者介面中的資料會發生變化；當使用者介面中的資料變化時，業務模型中的資料也會發生變化）。

文法：v-model = “data中的鍵名”

在data中，最好也要定義這個屬性，不然會報錯。

 

轉自：http://www.cnblogs.com/yueyue-love/p/6215711.html；

vue,js基礎知識