vue指令

最新推荐文章于 2024-03-31 22:53:42 发布

随意点yu

最新推荐文章于 2024-03-31 22:53:42 发布

阅读量77

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_48453678/article/details/113542826

版权

vue 指令

vue给我们提供了一些具有特殊含义、拥有特殊功能的指令；

v-pre

在vue中我们使用 ’ {{ }} ’ – 插值表达式符号来对数据进行编译、但是当我们不想使用 vue语法对某一个数据进行编译时，我们就可使用 v-pre；这指令不常用。

  **<p >{{'a'}}</p>**

编译结果为：
vue会把插值表达式里面的 ‘a’ 给编译成一个字符串的 a 并渲染到页面上

**<p v-pre>{{'a'}}</p>**

编译结果为：
通过设置v-pre 、vue 语法就不会对其进行编译、会将 {{}} 一起渲染到页面上

v-cloak

https://www.jianshu.com/p/f56cde007210?utm_source=oschina-app
↑ 整理得挺好

v-once

当属性值第一次赋值完成后，后续再对这个属性值进行赋值时，页面不会重新渲染，始终是第一次渲染的值

 <body>
    <div id="app">
        <p v-pre>{{'a'}}</p>
        <p v-once   >{{txt}}</p>
        <input type="text" v-model="txt">
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                txt: '哈哈哈哈哈哈哈哈哈哈哈'
            }
        })
    </script>
</body>

结果：
输入框中改变 txt 时上面p标签绑定的 txt 不会再次渲染，相当于初次渲染时，把值存入缓存，后续更改不会在更改缓存里面的数据

v-html

把字符串变成一个真实的dom元素，然后插入到页面当中。它的作用等价于 innerHTML 。比如在使用富文本时，后台数据一般返回的是一个字符串形式的数据，我们就需要通过 v-html 把解析成一个真实的dom再将其渲染到网页上。需要注意 XSS 攻击
富文本生成的数据

<body>
    <div id="app"> 
        <div>{{content}}</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: '<p>v-html 的使用</p>'
            }
        })
    </script>
</body>

运行结果
未使用v-html 的运行结果
使用v-html的情况：

        <div v-html="content"></div>

使用v-html

v-text

把文字插入到dom元素上，相当于 innerText。

  <body>
    <div id="app">
        <div v-text="content"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: 'v-text 插入文字'
            }
        })
    </script>
</body>

使用v-text 插入的文字

v-if、v-else、v-else-if

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-solt

<body>
    <div id="app">

        <mys title="哈哈">
            匿名插槽
            <template #right>有名插槽</template>
        </mys>

    </div>
    <script>
        new Vue({
            el: '#app',
            components: {
                mys: {
                    props: ['title'],
                    template: `<div>
                            <slot></slot>
                            <slot name="right"></slot>
                            <slot></slot>

                        </div>`
                }
            }
        })
    </script>
</body>