Vue 基础指令学习

<template>
    <!--只能有一个根节点 -->
    <div>
        <pre>
            *v-text  是元素的innertext 只能在双标签中使用
            *v-html  是元素的innerHTML，不能包含<!-- {{xxx}} -->
            *v-if 元素是否移除或者插入
            *v-show  元素隐藏或者显示
            *v-model  双向数据绑定
        </pre>
        // v-text
        <span v-text=\"text\"></span>
        <hr>
        <span v-html=\"html\"></span>
        v-if:
        <div v-if=\"isShow\" style=\"height:100px;background:#562366;\"></div>
        v-show:
        <div v-show=\"isShow\" style=\"height:100px;background:#333;\"></div>
        v-model:
        <input type=\"text\" name=\"\" v-model=\"mText\">
        {{mText}}
        <!-- 给下面的input的value赋值用v-bind：value -->
        <br>
        <input type=\"text\" name=\"\" v-bind:value=\"mText\">
    </div>
</template>
<< >
    export default {
        data(){
            return {
                text:\'我是v-text玩的东西\',
                html:`
                    <ul>
                       <li>vksdnkfndk </li>
                       <li>kbnskdfkb </li>
                    </ul>
                `,
                isShow:false,
                mText:\'\'

            }
        }
    }
</ >