Vue 基础指令学习

2018-12-04 07:05:33来源：博客园阅读 ()

学习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>
<<script>
    export default {
        data(){
            return {
                text:'我是v-text玩的东西',
                html:`
                    <ul>
                       <li>vksdnkfndk </li>
                       <li>kbnskdfkb </li>
                    </ul>
                `,
                isShow:false,
                mText:''

            }
        }
    }
</script>