初學VUE2.0

vue2.0+elementUI構建單頁面后台管理平台： http://www.cnblogs.com/dmcl/p/6722315.html 

初學VUE2.0

(個人筆記，寫完后發現好亂....下期使用markdown書寫。)

概述

webstorm添加對VUE的支持 http://www.jianshu.com/p/142dae4f8b51

推薦拓展：vue的chrome開發者工具vuejs-devtools 按F12可看

 

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

 效果：

構造器

通過改造函數Vue 創建vue 的根實例

var vm = new Vue({

    //選項

})

可以用預定義選項 創建可復用的 組件構造器

vue MyComponent = vue.extend({

     //擴展選項

})

var myComponentInstance = new  MyComponent()   //“MyComponent”的實例   類比java的“實現” 

屬性與方法

每個vue實例都會 代理 其 data對象里的 屬性

.

實例聲明周期

new vue() → (beforeCreate)→observe Data觀察數據→init events初始化時間→...

模板語法

{{msg}}   純文本

{{}}支持完整的單個表達式  比如{{ message.split('').reverse().join('') }}  {{ ok ? 'YES' : 'NO' }}

{{float_number | toInt}}  過濾器可以串聯，可以接受參數

v-once 一次性改變，數據改變時不更新

v-html   插入Html （不能綁定數據） 【只能用放心的內容使用Html插值，絕不能用用戶提供的內容進行插值 （太容易XSS攻擊）】

指令

<a v-bind:href="url"></a>

<a v-on:click="doSomething">

<form v-on:submit.prevent="onSubmit"></form>   修飾器.prevent,它其實代表的就是event.preventDefault()  

縮寫  

1.v-bind  綁定已有屬性

原：<a v-bind:href="url"></a>  縮寫后： <a :href="url"> </a>

2.v-on  時間綁定

原：<a v-on：click ="dst"></a> 縮寫后：<a @click="click"></a>

計算屬性

效果：

當我們在控制台修改msg時，vue知道msgInt依賴於msg，因此msg變化時msgInt也會變化，如下

 計算屬性區別於method ，前者依賴變化才更新，而后者每次執行都更新。

watch

計算屬性在大多數時期使用，但有些情況更適合watch。比如異步操作或者昂貴操作

v-bind：title 綁定title

<div v-bind:class="{ active: isActive }"></div>

取決於isActive是true還是false

三目 <div v-bind:class="[isActive ? activeClass : '', errorClass]">

也可以設置多個class  如v-bind:class="{ active: isActive, 'text-danger': hasError }"

也可以綁定對象

<div v-bind:class="classObject"></div>

 

data: {

classObject: {

active:  true,

'text-danger':  false

  }

}

v-bind：style    可以寫樣式對象，也可以寫具體<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>  然后data里寫{activeColor:"red"}等具體信息

<div v-bind:style="styleObject"></div>

 

data: {

styleObject: {

color:  'red',

fontSize:  '13px'

  }

}

 

多個樣式對象 <div v-bind:style="[baseStyles, overridingStyles]">

 

v-if    判斷是否顯示

demo4.ok=false時 顯示假

多行時考慮使用template

顯示/隱藏可以添加過度效果 這里 fade是可以改的（對應樣式）

style：

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}
.fade-enter, .fade-leave-active {
    opacity: 0
}

v-show也可以根據顯示元素，v-show的節點不移除，僅僅是display而已

 

v-for  循環遍歷

效果：

 

demo5.games.push({name:"LOL"})  可以添加數據

其中，可以增加第二參數 索引號

of 可以代替in 無差別

可在template使用

注意對象迭代的順序是按照js的Object.keys() 無順序  迭代的是對象內部的鍵值對。

整數迭代：<span v-for="n in 10">{{ n }}</span>  輸出1到10

組件與 v-for  

組件中的數據無法自動傳入 因為組件有自己的作用域。松耦合 我們用props傳入數據到組件

v-for與組件的例子 可參考 http://cn.vuejs.org/v2/guide/list.html#組件-和-v-for

數組有變異方法（增刪改等）和非變異方法(合並 切割等) 參考：http://cn.vuejs.org/v2/guide/list.html#變異方法

1. push()//在結尾增加一條或多條數據

2. pop()//刪除最后一條數據

3. shift()//刪除第一條數據，並返回這條數據

4. unshift()//在開始增加一條或多條數據，並返回數組長度

5. splice()//向/從數組中添加/刪除項目，然后返回被刪除的項目。

6. sort()//對數組的元素進行排序。

7. reverse()//顛倒數組中元素的順序。

8.  

1. filter()//返回條件為真的數據

2. concat()//連接兩個或多個數組

3. slice()//從已有的數組中返回選定的元素。

 

當然也可以用method方法

 

v-on 指令綁定一個監聽事件

v-on:click  監聽點擊事件

<button v-on:click="counter += 1">增加 1</button>

data：{

 counter：0

}

也可以接收一個定義的方法

還可以訪問原生DOM事件 用$event 把它傳入

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

事件修飾符 .

 

<!-- 阻止單擊事件冒泡 -->

<a v-on:click.stop="doThis"> </a>

 

<!-- 提交事件不再重載頁面 -->

<for mv-on:submit.prevent="onSubmit"> </form>

 

<!-- 修飾符可以串聯  -->

<a v-on:click.stop.prevent="doThat"> </a>

 

<!-- 只有修飾符 -->

<for mv-on:submit.prevent> </form>

 

<!-- 添加事件偵聽器時使用事件捕獲模式 -->

<div v-on:click.capture="doThis">... </div>

 

<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->

<div v-on:click.self="doThat">... </div>

備注：

按鍵修飾符

 

<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->

<input v-on:keyup.13="submit">

別名： <input v-on:keyup.enter="submit">

縮寫： <input @keyup.enter="submit">

按鍵名： enter tab delete(刪除/空格) esc space up down  left right

可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：  Vue.config.keyCodes.f1 = 112

這里有點詭異的就是，v-on:click=后面跟的方法名如果帶括號，就是js的表達式，如果不帶括號，就是vue的方法名。
我們在本章第一個例子中可以發現，v-on:click="greet"沒有傳入任何參數，它就可以獲得一個event的值，這個是vue內部提供的。
但是如果是后面跟括號的這種寫法，如果不傳如果event，那么是獲取不到event對象的。用$event傳入。

 

v-model 雙向數據綁定，輸入框變上面文字也變

效果： 

單選框：（值是true和false）

 vm：

  效果 ：

 復選框：（value）

 

 vm  都綁定到checkedNames 這個[]寫value

效果： 

 單選按鈕同理  顯示所選擇的選項的value

下拉菜單同理 顯示value

動態渲染

vm：

效果：  

 

注意：這里要綁定option.value 不然出來的是option.text

 一種特別寫法：

這里的a和b是方法/值

 

 

輸入完畢 試圖再變化

1. <inputv-model.lazy="msg"> 

輸入內容轉數字

1. <inputv-model.number="age">

自動去空格

1. <inputv-model.trim="msg">

 

組件

 

 

局部注冊

 不可違背HTML規律~比如ul下只能li；select里只能是option，table里不能寫模板 ；除非這么寫

1. <table>
2. <tris="my-row"></tr>
3. </table>

 組件里data必須是函數

組件內定義的是數據 只能組件內部使用。子組件想使用父組件的數據必須傳參（類似方法傳參）

參數往下傳，事件往上傳 。

props

子元素通過props接口與父元素有了很好的解耦合

eg.1

eg.2 

上例 我們傳的是一個固定的值，v-bind:tem="team"傳入動態值

可以指定參數類型 String/Number/Boolean/Function/Object/Array

多個類型用數組  比如 

 props{

    msg：[String,Number]

}

自定義事件

$on 監聽事件 $emit觸發事件

直接綁定原生js事件

1. <my-componentv-on:click.native="doTheThing"></my-component>

參數往下傳 事件往上傳

例子：

寫兩個按鈕，每個按鈕點擊自增，2個按鈕之和顯示出來。

第一步 先定義按鈕 實現自增

現在已經實現點擊+1；

然后需要做的是 子組件變動時父組件的total同時變。

把子組件的add注冊為事件，然后觸發時調用父組件的total增加方法。

最終效果：

 

語法糖 <input v-model="sth"> 其完整寫法是<input v-bind:value="sth" v-on:input="sth=$event.target.value>

組件可類比這種：

<my-input v-model="msg ><my-input/>對應  <my-input  v-bind:value="msg" v-on:input="msg=arguments[0]" ><my-input/>

 

 

 

組件 內容分發 slot

內容分發：動態的調用一些html元素到子模板

 

 父組件模板內部的都是父組件的作用域。即便父套子， 也是父組件的作用域。

當然，如果子組件寫在vue.component里是子組件的。

如果你寫了，這些html內容將會當做參數傳入child-com內部定義有slot的地方

 

 slot是可以寫名字的  多個slot形成對應關系

 父組件

 

子組件

組件內部要有根節點 比如div

結果：

動態組件

→ vm666.currentView='work' →

 

   總的來說，Vue組件的接口包括3個方面：

• Props（數據）允許外部將數據傳入組件內；
• Events（事件） 允許將組件內的事件向外傳播；
• Slots（插槽）允許在外部編輯組件內的html內容；

一個模板多次使用，可以這樣獲得其實例:  vm.$refs.profile 獲取 ref為profile的實例  (這里ref類似dom的ID)  。

異步組件(無演示)

 初級教程結束。

 

進階：http://www.cnblogs.com/dmcl/p/6138389.html