一，vue.js簡介 　　Vue.js可以作為一個js庫來使用，也可以用它全套的工具來構建系統介面，這些可以根據專案的需要靈活選擇 　　所以說， vue.js是一套構建使用者介面的漸進式框架

　　Vue.js的核心庫只關注檢視層，Vue的目標通過儘可能簡單的API實現相應的資料繫結， 　　在這一點上Vue.js類似於後臺的模板語言

　　Vue.js也可以將介面拆分成一個個的元件，通過元件來構件介面， 　　然後用自動化工具來生成單頁面系統

二，Vue例項

    <!-- 每一個Vue應用都是通過例項化一個新的Vue物件開始的 -->
    <div id="app">{{ msg }}</div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'Hello World！'
            }
        })
    </script>

　　其中，el屬性對應一個標籤，當vue物件建立後，這個標籤的區域就被vue物件接管， 　　在這個區域就可以使用vue物件中定義的屬性和方法

三，Vue.js模板語法

　　模板語法指的是如何將輸入放入html中， Vue.js使用了基於HTML的模板語法， 　　允許開發者宣告式的將DOM繫結至底層Vue例項的資料。

    <div id="app">
        <!-- 插入式， 使用'Mustache'語法的文字插值 -->
        <p>{{ sTr }}</p>
        <p>{{ sTr.split('').reverse().join('')}}</p>
        <p>{{ iNum+15 }}</p>
        <p>{{ bisOk?'Yes':'No' }}</p>
        <a v-bind:href=sUrl>百度的連結</a><br><br>
        <!-- 指令， 監聽click事件來執行fnReversal方法 -->
        <input type="button" value="反轉" v-on:click='fnReversal'>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                sTr:'Hello World！',
                iNum:10,
                bisOk: true,
                sUrl:'http://www.baidu.com'
            },
            methods:{
                fnReversal:function(){
                    this.sTr = this.sTr.split("").reverse().join('');
                }
            }
        })
    </script> 

四，class 與 style繫結

　　使用v-bind指定來設定元素的class屬性或者style屬性，它們的屬性值可以是表示式， 　　vue.js在這個一塊做了增強，表示式結果除了是字串之外，還可以是物件或陣列

 <div id="app" v-bind:class="{big:isActive, red:haserror}">
        繫結方式一，物件語法
    </div> 
    <script>
        // 第一種方式物件語法
        var vm = new Vue({
            el:'#app',
            data:{
                isActive: true,
                haserror: false
            }
        })
    </script>

五，條件渲染

　　通過條件指令可以控制元素的建立(顯示)或者銷燬(隱藏)

 <!-- v-if 可以控制元素的建立或者被銷燬 -->
    <!-- v-if 是真正的把元素刪除了 -->
    <div id="box">
        <h1 v-if='isV'>這是使用 v-if 的h1</h1>
        <h2 v-else>這是使用 v-else 的h2</h2>  <!-- v-else 必須緊跟在 v-if或者v-else-if 後面 -->

        <h3 v-show='isV'>這是使用 v-show 的h3</h3>  <!-- v-show把元素的 display 狀態改為none，只是隱藏了-->
        <div v-if='sCode=="A"'>A</div>
        <div v-else-if='sCode=="B"'>B</div>
        <div v-else-if='sCode=="C"'>C</div>
        <div v-else>NOT A/B/C</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#box',
            data:{
                isV: false,
                sCode:'D'
            }
        })
    </script>