VueJS-础学习之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>