Vue——基礎操做

選項數據

　　搭建環境和路由配置完成後，能夠在新建的vue文件index.vue中寫項目

　　添加一個模板標籤template（這個template是無心義的），內部添加一個父級標籤做爲根標籤，在內部再添加若干子標籤

　　

　　以後就能夠在script標籤中添加數據和函數

data

　　data是一個方法，其中定義的是全局組件變量，返回值爲一個對象

　　調用數據的時候，能夠在template中用兩對大括號包裹變量名（注意不能在根標籤下引用）

　　

computed

　　computed，也叫計算屬性，是一個對象，內部可添加函數，這些函數的this指向全局

　　調用時，一樣也是用兩對大括號包裹函數名來實現

　　

　　好處在於，雖然模板中容許寫js語句，可是這樣會致使樣式和行爲不分離，而在computed內部能夠直接寫變量的操做以及返回值，實現了行爲和樣式的解耦

　　

methods

　　methods相似於computed，也是個對象，內部可添加函數，不過這些函數是和事件相關的

　　

　　

filters

　　過濾器，也是一個對象，內部可添加函數，最終輸出函數內部的返回值（也就是覆蓋以前的值）

　　

 

模板語法

v-html

　　把一個元素變成當前元素的子元素，可是會把當前元素內部原有的子元素給覆蓋

　　

v-bind

　　讓元素屬性和變量綁定，實現屬性的實時更新（例如class）

　　能夠用:簡寫代替v-bind:

　　

class

　　class的綁定有如下三種方法：

　　1.class後寫一個對象，其中屬性名爲class名，屬性值爲data裏的一個全局變量名，根據全局變量隱式類型轉換結果，爲true纔給元素綁定該class

　　2.相似方法1，不過把對象挪到data內了，屬性值依然爲class名稱，根據屬性值的隱式類型轉換看是否添加該class

　　3.直接在class後添加一個數組，其中每一項都是data中的一個變量，內部存儲的是class名稱

　　

style

　　style的綁定相似於class，也是三種方法，注意寫具體style名稱時，須要用駝峯形式

　　

v-on

　　綁定事件，其中事件的處理函數（句柄）寫在methods裏

　　能夠用@簡寫代替v-on:

　　

　　具體綁定的時候，能夠把處理的語句寫在元素內部，也能夠寫在methods裏，傳參爲可選項

　　若是須要防止事件冒泡，要在事件類型後加.stop

　　

v-once

　　通常使用插值表達式時，該變量能夠被實時改變，同時DOM也會被從新渲染

　　但使用v-once指令，該數據仍能夠改變，可是插值的數據不更新

　　

  

表單控件（v-model）

　　表單控件能夠把表單元素和全局變量雙向綁定，具體包括如下三種

input

　　能夠用v-model綁定一個全局變量，該全局變量在最開始會起着placeholder的做用，以後就動態跟input輸入框的內容保持一致

　　

checkbox

　　這裏綁定的變量爲數組，當選擇某一項時，該項的value就添加到數組中，數組中值的順序同添加順序一致

　　

select

　　這裏綁定的對象能夠爲字符串/數組/對象，當選擇某個option時，該項的value就賦值給變量，若是沒有value，把option裏的內容賦值過去

　　

 

自定義組件

　　自定義的組件同以前的基本語法不一樣，是寫在components文件夾中的

　　其餘寫法同以前寫pages基本相似，須要在template標籤中寫出該組件使用時的一個模板

　　

　　若是想在某個頁面中引用，須要按照如下步驟：

　　1.在script中用import從components路徑下引入這個自定義組件，引入的名字爲自定義組件的名字

　　2.在copmonents中添加該組件的名字（註冊），若是不想用以前的名稱，用一個鍵來代替（以下圖）

　　3.在template中調用該組件，標籤名即爲該組件名稱（若是修改了，標籤名爲修改後的組件名稱）

　　

props

　　若是須要組件能夠在不一樣頁面中運用不一樣的樣式，則須要在組件中定義props，在模板中用v-bind綁定好這個屬性

　　其中type表示傳入的值的類型，default表示沒有傳值的時候的默認值

　　

　　

　　綁定以後就能夠在引用該組件的時候，直接用這個屬性（例如圖中的col）傳值，無需再用v-bind和變量

　　

$emit

　　若是想在組件中觸發某個事件，須要用到$emit，內部傳入的參數爲觸發的事件名稱

　　

　　但具體調用的函數內容，須要在具體的頁面中的methods裏寫

　　

　　

 

DOM操做

　　Vue裏的DOM元素都是虛擬的，不可進行真實的DOM操做

　　只有在其生命週期的mounted裏才能夠進行DOM的操做（在這個週期裏，全部的DOM真實生成）

　　Vue裏提供了一個新方法，在標籤中添加ref屬性，用這個屬性就能夠訪問到這個標籤，並進行一系列原生JS的DOM操做

　　

 

過渡

　　Vue中的過渡添加了一種方法，在transition標籤中添加須要添加過渡效果的元素，元素添加上name以便後續能夠添加CSS

　　

　　整個過渡分爲兩類：leave（顯示=>消失）、enter（消失=>顯示）

　　每一類中分爲三個狀態：開始（leave/enter）、中間（leave-active/enter-active）、結束（leave-to/enter-to）

　　具體執行的時候會依次調用開始->中間->結束中的樣式，實現過渡效果

　　

 

路由

　　vue-router包容許Vue在不一樣頁面之間跳轉，在使用以前須要安裝router這個包（指令爲npm install vue-router）

　　路由都是在router-link標籤裏完成的，具體添加路由的方法有三種：

第一種方法

　　router-link標籤裏添加一個to屬性，其中添加要轉向的路徑（path）

　　

第二種方法

　　to屬性中添加一個對象，其中能夠用name/path指向跳轉的路徑，若是須要傳入參數，寫在params裏，用對象包裹起來

　　

　　對於傳入的參數，須要在router的index.js裏同步修改一下path

　　

　　這樣一來，跳轉以後的url就會收到咱們傳入的參數

　　

　　固然，url地址中還能夠傳入其餘內容，例如query，傳入的參數會在url的?後顯示

　　

　　

獲取參數

　　第二種方法中提供了一種向目標頁面url傳遞參數的方法，但若是想在跳轉到的目標頁面中獲取參數呢？

　　能夠在目標頁面的mounted這個生命週期中寫this.$route.params.參數名來獲取params傳入的參數

　　

　　對於query傳入的參數，用this.$route.query.參數名來獲取

第三種方法

　　也能夠不用模板方法，直接給標籤綁定事件，經過this.$router.push方法傳入轉向的url地址，地址能夠用path/name

　　

　　

　　一樣也能夠往這個方法裏傳參數（params/query）

 

插槽

　　插槽經常使用在組件中，若是組件裏沒有插槽，則沒法向組件添加內容

　　插槽建立很簡單，只須要在組件中用slot標籤便可，以後在網頁中全部向組件中添加的內容都會進入slot中

　　

　　若是組件中有多個插槽，須要在slot標籤中用name屬性區分，使用時，在對應的標籤中添加slot屬性，屬性值爲須要插入的插槽的name值

　　

 

resource請求

　　相似ajax請求，當和後臺交互數據時使用

配置方法

　　1.使用以前，用npm install vue-resource --save指令安裝

　　2.在main.js中導入，並用vue.use指令，使其能夠全局使用

　　

使用

　　（注意補充案例）

 

移動組件庫Mint-UI

配置

　　1.在項目目錄下，執行cnpm install mint-ui --save命令

　　2.（未完待續）