Vue.js庫的第一天的學習

一，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>