vue基礎知識

Vue.js被定義成一個用來開發web界面的前端庫，是個很是輕量級的工具，自己具備響應式編程和組件化的特色，所謂響應式編程即爲保持狀態和視圖的同步，是當下一個很火的Java Script MVVM庫。MVVM的開發模式使前端從原先的DOM操做中解放出來，咱們再也不須要在維護視圖和數據的統一上花大量的時間，只須要關注data的變化，代碼變得更加容易維護。

Vue.js使用起來更爲簡單，無需引入太多的新概念，聲明實例 new Vue({data:data})後天然對data裏面的數據進行了視圖上的綁定。修改data的數據，視圖中對應數據也會隨之更改。將DOM和數據綁定起來，一旦建立了綁定，DOM和數據保持同步，每當變動了數據，DOM也相應的更新。

MVVM模式

ViewModel.js是Vue.js的核心，它是一個Vue實例。當建立了ViewModel後，雙向綁定是如何達成的呢？

首先，咱們將上圖中的DOM Listener和Data Bindings看作兩個工具，它們是實現雙向綁定的關鍵，Dom Listener工具會幫咱們檢測頁面上DOM元素的變化，若是有變化，則更改Model中的數據。當咱們更新Model中的數據時，Data BIndigns工具會幫咱們更新頁面中的DOM元素。

使用Vue的過程就是定義MVVM各個組成部分的過程：

一、定義view

二、定義Model 

三、建立一個實例或viewModel，用於鏈接View和Model。

在建立Vue實例時，須要傳入一個選項對象，選項對象能夠包含數據、模板、掛載元素、方法、生命週期鉤子等等。選項中主要影響模板或DOM的選項有el，el的做用是爲實例提供掛載元素。每個Vue.js實例須要有一個根元素。Vue.js實例中能夠經過data屬性定義數據，這些數據能夠在實例對應的模板中進行綁定並使用，組件類型的實例能夠經過props獲取數據，同data同樣，也須要在初始化時預設好，咱們也能夠在組件類型實例中同時使用data，可是須要注意兩個地方：一、data的值必須是一個函數，而且返回值不是原始對象，若是傳給組件的data是一個原始對象的話，則在創建多個組件實例時它們就會共用這個data對象，修改其中一個組件實例的數據就會影響到其餘組件實例的數據。二、data中的屬性和props中的不能重複。

數據綁定：

一、文本插值

二、綁定表達式：每一個表達式只能包含單個表達式，並不支持JS語句，不支持正則表達式，若是須要進行復雜的轉換，可使用過濾器或計算屬性進行處理。

三、過濾器

表單控件：

一、Text

<div id="app">
　　<p v-once="message">{{message}}</p>
　　<input type="text" v-model="message">
</div>

new Vue({
　　el:'#app',
　　data:{
　　message:'aaaaaa'
　　}
});

二、Radio

<div id="app3">
        <label><input type="radio" value="male" v-model="gender">男</label>
        <label><input type="radio" value="female" v-model="gender">女</label>
        <span>gender:{{gender}}</span>
    </div>
new Vue({
            el:'#app3',
            data:{
                gender:''
            }
        });

三、Checkbox

div id="app2">
        <input type="checkbox" v-model="checked" v-bind:true-value="a"  v-bind:false-value="b" name="">
        <span>checked:{{checked}}</span>
    </div>
new Vue({
            el:'#app2',
            data:{
                checked:'',
                a:'a',
                b:'b'
            }
        });

四、Select

<div id="app5">
        <select v-model="selected">
            <option disabled>請選擇</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected:{{selected}}</span>
    </div>
new Vue({
            el:'#app5',
            data:{
                selected:''
            }
        })

五、綁定value

<div id="app2">
        <input type="checkbox" v-model="checked" v-bind:true-value="a"  v-bind:false-value="b" name="">
        <span>checked:{{checked}}</span>
    </div>
new Vue({
            el:'#app2',
            data:{
                checked:'',
                a:'a',
                b:'b'
            }
        });

Class與Style綁定：

一、Class綁定

<div id="app7">
        <div class="tab" v-bind:class='{"active":active,"unactive":!active}'></div>
    </div>
new Vue({
            el:'#app7',
            data:{
                active:true
            }
        })

　　<div id="app8">
　　　　<div v-bind:class="[classA,classB]"></div>
　　</div>　　

　　new Vue({
　　　　　　el:'#app8',
　　　　　　data:{
　　　　　　　　classA:'class-a',
　　　　　　　　classB:'class-b'
　　　　　　　　}
　　　　　　})

二、內聯樣式綁定

<div id="app9">
        <div v-bind:style="alterStyle">hello</div>
    </div>
new Vue({
            el:'#app9',
            data:{
                alterStyle:{
                    color:'red',
                    fontSize:'20px'
                }
            }
        })

Vue.js的經常使用指令： v-if,v-else,v-show,v-for,v-bind,v-on