Vue 基礎指令學習

學習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>

這裡只寫了一部分常用的vue的指令，後面還會有的。