Vue.js_礎學習之DOM操作

demo說明：
1、{{message}}                           --“Mustache” 語法（雙大括號）

2、v-bind:屬性名                        --綁定元素屬性，縮寫  ：title or ：style  or  ：class

3、v-if="change=='a'"              --判斷change=='a'，等於則顯示該DOM節點

4、v-else-if="change=='b'"      --結合[v-if]使用，判斷change=='b'，等於則顯示該DOM節點

5、v-else                                   --結合[v-if]or[v-else-if]使用，當他們的條件全部為假時，顯示該DOM節點

6、v-for:"i in itemTest"             --以i遍歷循環輸出itemTest數組中的值，類似於Js的for...in

7、v-on:事件="function"           --監聽DOM事件，並當事件被觸發時執行function函數，縮寫  @click

8、v-model="inputInfo"           --結合 {{inputInfo}} 實現表單輸入與應用狀態之間的雙向綁定

9、v-once                                  --結合{{buttomText}}使用，表示數據僅執行一次性綁定，不在因后期數據更新而更新

10、v-html="addHtml"            --可以這樣插入一段html，站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊，請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容插值

注意：v-html中不可以使用v-bind、v-on等或{{Mustache}}等指令和語法，他僅會對Html內容進行渲染

 

demo：
    <div id="app">
        <header v-bind:title="message" v-bind:class="headerClass">{{message}}</header>
        <section>
            <p v-if="change=='a'">如果change等於a，我就會顯示</p>
            <p v-else-if="change=='b'">如果change等於b，我就會顯示</p>
            <p v-else>如果change不等於a也不是b，我就會顯示</p>
            <ul>
                <li v-for="i in itemTest">{{i}}</li>
            </ul>
            <button v-on:click="btnClick">點擊就會彈窗</button>
            <br/><br/>
            <input type="text" name="inputInfo" v-model="inputInfo">  <span>您輸入的信息為：{{inputInfo}}</span>
            <div v-html="addHtml"></div>

        </section>
        <footer v-once v-bind:style="bottomStyle">{{bottomText}}</footer>
        <br/><br/>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"我的第一個vue實例",
                headerClass:"textTitle",
                change:"a",
                itemTest:["橘子","桃子","梨子","栗子","李子"],
                inputInfo:"我的第一個vue輸入實例",
                bottomText:"2017-4-13  Vue學習筆記 leona",
                bottomStyle:"margin-top:20px;font-size:12px; color:#4cd807",
                //v-bind:style='bottomStyle'與{{message}}將會直接作為Html內容被渲染進DOM，不會綁定任何值
                addHtml:"<div v-bind:style='bottomStyle'>學習如何插入HTML-{{message}}</div>"
            },
            methods:{
                btnClick:function(){
                    alert("vue可以監聽DOM事件");
                }
            }
        })

        //添加了v-once的這里，數據改變將不會再更新DOM
        app.bottomText="測試數據......";

        //這里的數據改變后，會實時更新DOM
        app.message="Vue實例學習ing";
    </script>