Vue

v-once 指定元素或者组件只渲染一次,如果是子节点，也只会渲染一次.

    <h2 v-once > {{ counter }} </h2>
    <button @click="increment"> +1 </button>

v-text 更新元素的 textContent

<h2 v-text="msg" > </h2>
// 等价于
<h2> {{ msg }} </h2>

v-html html解析

<div id="app">
    <div v-html="info"></div>
</div>
<script>
    Vue.createApp({
        data: function(){
            return {
                info:`<span style="color: red; font-size: 30px;" >哈哈哈</span>`
            }
        }
    }).mount("#app")
</script>

v-pre 跳过元素和它的子元素的编译过程，显示原始的Mustache标签

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

v-cloak 这个指令保持在元素上直到关联组件实例结束编译。

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。就是数据没请求回来之前不显示。

<style>
    [v-cloak]{
        display: none;
    }
</style>
<h2 v-cloak>{{message}}</h2> // 数据请求结果返回之前一直是不显示的
<script>
    setTimeout(() => {
        Vue.createApp({
            data: () => {
                return {
                    message: "hello world"
                }
            }
        }).mount("#app")
    }, 3000);
</script>

v-bind 绑定属性

除了内容需要动态来决定外，某些属性我们也希望动态来绑定。比如动态绑定a元素的href属性，比如动态绑定img元素的src属性。

• 绑定基本属性 v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

// v-bind有一个对应的语法糖，也就是简写方式:

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 缩写形式的动态 attribute 名 (3.4+)，扩展为 :src="src" -->
<img :src />

<!-- 动态 attribute 名的缩写 -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" />

<!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

• 绑定对象
• 绑定数组
• 绑定style
• 动态绑定属性
• 绑定对象所有属性