震惊！！！ ... ...

vue的指令有好多…
[v-cloak]{
width:100px;
height:100px;
background:red;
} //style的样式

    <!-- <h1>Hello {{name}}</h1>
    <div v-text=" name + '说好热呀'  ">
        <p>我是v-text</p>
        <input type="text">
    </div>
    <h2 v-html=" name + '今年' + age + '了' ">
        <p>我是v-html</p>
        <input type="text">
    </h2> -->
    <!-- <button >显示</button>
    <button>隐藏</button> -->
    <div v-cloak v-if="msg"></div>
</div>
<script src="js/vue.js"></script>
<script>
    // v-text 和 v-html的区别：
    //  相同点：
    //  1. 都覆盖掉所在元素的子节点
    //  2. 都可以去渲染数据
    //  不同点：
    //  1. text不能解析html标签
    //  2. html可以解析html标签
    // new Vue({
    //     el:'#app',
    //     data:{
    //         name:"<strong>任涛</strong>",
    //         sex:"未知",
    //         age:"18",
    //         hobby:"王者峡谷"
    //     }
    // });

    // v-show  和  v-if 的区别：
    //  v-show ： 显示和隐藏
    //  v-if :  创建和销毁
    let app = new Vue({
        // el:"#app",
        template:` <div class="box" v-if="msg"></div>`,
        data:{
            msg:true,
            name:"<strong>任涛</strong>",
            sex:"未知",
            age:"18",
            hobby:"王者峡谷"
        }
    });

	**v-bind**
		用于属性的绑定，可以简写为:	绑定的属性:href

    //延迟挂载
    setTimeout(()=>{
        app.$mount('#app');
    },2000);
   
    </script>