Vue 基本指令

mustache

//在 vue3.0中  template 可以直接使用标签 不需要在外层 加div
<template id="tem">
            <!--1 mustache 基本使用 -->
            <h2>{{message}}</h2>
            <!--2 表达式 -->
            <h2>{{count*10}}</h2>
            <!--3 可以调用函数 -->
            <h2>{{message.split(" ").reverse().join(" ")}}</h2>
            <h2>{{getReverseMessage()}}</h2>

            <!--4 三元运算符 -->
            <h2>{{isShow ? "hahah":"哈哈"}}</h2>
            <button @click="change">切换</button>

            <!-- 错误用法 -->
            <!-- <h2>{{var name ='tom'}}</h2>
            <h2>{{if(isShow){return 'hhh'}}}</h2> -->
    </template>

v-once

只会渲染初始的一次

 <div v-once>
                <h2 >{{count}}</h2>
                <h2>{{message}}</h2>
            </div>

v-text

<template id="tem">
            <h2 v-text="message"></h2>
            <!-- 效果相同 -->
            <h2>{{message}}</h2>
    </template>

v-html

少用 在网页上任意渲染 html 是危险的
在单文件组件里，scoped 的样式不会应用在 v-html 内部 需要额外的style样式

 <h2 v-html="message"></h2>
 // 哈哈哈
  <h2>{{message}}</h2>
  // message:`<span style="color:red; background: blue;" >哈哈哈</span>`

 message:`<span style="color:red; background: blue;" >哈哈哈</span>`

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
// 不知道 究竟有啥用

<h2 v-pre>{{message}}</h2>
// {{message}}

v-cloak

cloak 披风 隐蔽隐藏的意思
配合 [v-cloak] {
display: none;
}使用 隐藏 {{}} 不会出现 {{message}} 会等到处理完成后在展示

 <style>
        [v-cloak] {
            display: none;
        }
    </style>
 <template id="tem">
            <h2 v-text="message"></h2>
            <h2 v-cloak>{{message}}</h2>
    </template>