初學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