一些指令

v-html:以html的形式解析

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h2 v-html='url'></h2>
        </div>
        <script src="vue.js" type="text/javascript"></script>
        <script>
            app=new Vue({
                el:"#app",
                data:{
                    url:'<a href="http://www.baidu.com">baidu</a>'

                },
})
        </script>
    </body>
</html>

v-text：和mustache类似，但是它会覆掉标签之间的内容，使用起来并不是很灵活，没有mustache常用

v-pre和<pre></pre>标签一样，将标签之间的内容原封不动的展示出来

v-cloak防止闪动

v-bind解析属性，动态的绑定变量。服务器请求过来的数据、图片等，一般要在data中进行一个中转，而不是直接在div中显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
        <!-- 给冒号后面的属性赋值 -->
        <img v-bind:src="imgurl" alt=''>    
        <h1><a v-bind:href="aHref">baidu</a></h1>
    <!--语法糖写法 -->
    <img :src="imgurl" alt=''>
    <h1><a :href="aHref">baidu</a></h1>
        </div>
        <script src="vue.js" type="text/javascript"></script>
        <script>
            app=new Vue({
                el:"#app",
                data:{
                    message:"hello",
                    imgurl:'https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png',
                    aHref:'https:www.baidu.com'
                    },
})
        </script>
    </body>
</html>

v-bind动态绑定class时，class后面跟的是一个对象或者数组，用法如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .active{
                color:red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h2 :class="{active : isActive,line : isLine}">
            {{message}}
            </h2>
            <h2 :class="getClass()">
            {{message}}
            </h2>
            <!-- <h2 :class="['active','line']">加单引号表示的是字符串，不加表示的是变量 -->
            <h2 :class="[active,line]">
            {{message}}
            </h2>
            <button v-on:click ="btnClick" type="button">button</button>        
        </div>
        <script src="vue.js" type="text/javascript"></script>
        <script>
            app=new Vue({
                el:"#app",
                data:{
                    message:'hello',
                    isActive:true,
                    isLine:true    ,
                    active:'aaaa',
                    line:'bbbb'
                    },
                    methods:{
                        btnClick:function(){
                            this.isActive=!this.isActive;
                    },
                    getClass:function(){
                        return {active : this.isActive,line : this.isLine}
                    }
                }
            })
        </script>
    </body>
</html>

按钮可以使文本变色。