vue 的一些内置指令

1. v-text

用于文本替换，会替换标签内原本的所有文本

    <template>
        <h1 v-text="text"></h1>
    </template>

    <script>
    export default {
        data() {
            return {
                text: '<p style="color: red">我是一句普通文本</p>'
            }
        }
    }
    </script>

2. v-html

也是用于文本替换，能够识别文本内的 html 和 css 样式，但是不推荐使用

    <template>
        <h1 v-html="text"></h1>
    </template>

    <script>
    export default {
        data() {
            return {
                text: '<p style="color: red">我是一句普通文本</p>'
            }
        }
    }
    </script>

3. v-show

能控制元素在页面是否显示(渲染标签，添加属性 display:none)

    <template>
        <h1 v-show="true">{{ text }}</h1>
        <h1 v-show="false">{{ text }}</h1>
    </template>

    <script>
    export default {
        data() {
            return {
                text: '我是一句普通的文本'
            }
        }
    }
    </script>

4. v-if

能控制元素在页面是否显示(不渲染标签)

    <template>
        <h1 v-if="true">{{ text }}</h1>
        <h1 v-if="false">{{ text }}</h1>
    </template>

    <script>
    export default {
        data() {
            return {
                text: '我是一句普通的文本'
            }
        }
    }
    </script>

5. v-for

遍历一组数据，循环渲染一些标签

    <template>
        <ul>
            <li v-for="item in list">name --- {{ item.name }} --- age --- {{ item.age }}</li>
        </ul>
    </template>

    <script>
    export default {
        data() {
            return {
                list: [
                    {
                        name: '张三',
                        age: 18
                    }, 
                    {
                        name: '李四',
                        age: 20
                    }, 
                    {
                        name: '王五',
                        age: 19
                    },
                ]
            }
        }
    }
    </script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
    </style>

6. v-on/@

绑定一些事件

    <template>
        <p>{{ text }}</p>
        <input type="text" @input="getText">
    </template>
    <script>
        export default {
            data() {
                return {
                    text: ''
                }
            },
            methods: {
                getText(e) {
                    this.text = e.target.value
                }
            }
        }
    </script>

7. v-bind/:

绑定一些属性

    <template>
        <input type="checkbox" :checked="flag"> 选中按钮与否
    </template>

    <script>
        export default {
            data() {
                return {
                    flag: true
                }
            }
        }
    </script>

8. v-model

双向绑定数据

    <template>
        <input type="text" v-model="text_value" @input="change_value">
        <p> {{ text_value }} </p>
    </template>

    <script>
        export default {
            data() {
                return {
                    text_value: '初始值'
                }
            },
            methods: {
                change_value (e) {
                    this.text_value = e.target.value
                }
            }
        }
    </script>

9. v-slot/#

用于声明具名插槽或是期望接收 props 的作用域插槽

    <!-- 具名插槽 -->
    <BaseLayout>
      <template v-slot:header>
        Header content
      </template>

      <template v-slot:default>
        Default slot content
      </template>

      <template v-slot:footer>
        Footer content
      </template>
    </BaseLayout>

    <!-- 接收 prop 的具名插槽 -->
    <InfiniteScroll>
      <template v-slot:item="slotProps">
        <div class="item">
          {{ slotProps.item.text }}
        </div>
      </template>
    </InfiniteScroll>

    <!-- 接收 prop 的默认插槽，并解构 -->
    <Mouse v-slot="{ x, y }">
      Mouse position: {{ x }}, {{ y }}
    </Mouse>

10.v-pre

跳过该元素及其所有子元素的编译

    // 元素内具有 `v-pre`，所有 Vue 模板语法都会被保留并按原样渲染。
    <template>
        <h1 v-pre> 安静的 {{ msg }}</h1>
    </template>

    <script>
        export default {
            data() {
                return {
                    msg: '一个普通的文本'
                }
            }
        }
    </script>

11.v-once

只会被编译一次，后序的编写就和当前标签没有关系了

    <!-- 单个元素 -->
    <span v-once>This will never change: {{msg}}</span>
    <!-- 带有子元素的元素 -->
    <div v-once>
      <h1>comment</h1>
      <p>{{msg}}</p>
    </div>
    <!-- 组件 -->
    <MyComponent v-once :comment="msg" />
    <!-- `v-for` 指令 -->
    <ul>
      <li v-for="i in list" v-once>{{i}}</li>
    </ul>

12.v-memo

只有绑定的依赖发生变化时，才会被重新渲染

    <template>
        <p>{{ num }}</p>
        <p v-memo="[msg, msg2]">{{ num }}</p>
        <button @click="num++">num 自增</button>
        <button @click="msg = '新的字符串'">修改 msg</button>
    </template>

    <script>
    export default {
        data() {
            return {
                num: 0,
                msg: "一个字符串",
                msg2: '<p style="color: red;">我是一个p标签</p>',
            }
        },
    }
    </script>

13. v-cloak

用于隐藏尚未完成编译的 DOM 模版

    [v-cloak] {
      display: none;
    }
    <div v-cloak> {{ message }} </div>