Vue2 指令v-bind v-pre v-cloak v-once

1.属性绑定指令 v-bind

<style>
    article{padding:20px;border:4px solid #ccc}
    .redColor{color:red}
    .blueColor{color:blue}
    .narrow{width:50%}
    .head{text-decoration:underline}
</style>

<div id="app2">
    <article v-bind:class="[{redColor:(colorClass==='red')}, {blueColor:(colorClass==='blue')}]">
        <h1 :class="{head:underline}">我是文章标题</h1>
        <section :class="{narrow:isNarrow}">
            我是文章内容，请自行想象这里是一篇内容丰富趣味横生的文章。哈哈。
        </section>
        <footer :style="{fontSize:size,textAlign:textPosition}">作者：上古神兽</footer>
    </article>
    <aside>
        <h3 v-bind:style="tipStyle">请设置您想要的样式</h3>
        <p>
            <label>设置标题带下划线<input type="checkbox" v-model="underline"></label><br><br>
            <label>设置字体为红色<input type="radio" value="red" v-model="colorClass"></label>
            <label>设置字体为蓝色<input type="radio" value="blue" v-model="colorClass"></label>&nbsp;&nbsp;&nbsp;&nbsp;{{ colorClass }}
            <br><br>
            <label>设置内容宽度为50%<input type="checkbox" v-model="isNarrow"></label> {{ isNarrow }}
        </p>
    </aside>
</div>
<script>
    var vm=new Vue({
        el:"#app2",
        data:{
            colorClass:"",
            isNarrow:false,
            underline:false,

            size:"12px",
            textPosition:"right",

            tipStyle:{
                fontWeight:"normal",
                color:"pink"
            }
        }
    });
</script>

2.几个有用的指令 v-pre v-cloak v-once

<style>
    [v-cloak]{display:none}
</style>
<div id="app3">
    <p v-pre>插值的最简单语法就是 {{ message }}</p>
    <p v-cloak>这里的内容从服务器获取，可能有网络延迟，没渲染后前不可见 {{ devList }}</p>
    <p v-once>
        现在的密码是：{{ password }}<br>
        <label>设置新密码：<input type="password" v-model="password"></label>
    </p>
</div>
<script>
    var vm3=new Vue({
        el:"#app3",
        data:{
            message:"hello Vue!",
            password:"123456"
        },
        computed:{
            devList:function(){
                for(var i=0;i<1000000000;i++){
                }
                return ["Lily","Joe","Jack","Lily","Joe","Jack"].join();
            }
        }
    });
</script>