Vue笔记-Day05-01（Vue的指令）

最新推荐文章于 2025-08-05 22:11:48 发布

爱吃饭的阿强

最新推荐文章于 2025-08-05 22:11:48 发布

阅读量510

点赞数

CC 4.0 BY-SA版权

分类专栏： vue\ 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_57155307/article/details/122129155

vue\ 专栏收录该内容

11 篇文章

订阅专栏

目前用过的指令：
v-bind :单向绑定
v-model :双向绑定
v-for :遍历数组/对象/字符串
v-on :绑定事件监听，简写为@
v-if :条件渲染
v-else :条件渲染
v-show :条件渲染

5.1 v-text:

1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换调节点中的内容，{{ xx }}则不会

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <div id="root" v-text="name">
        里面的内容失效了
        你好！
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                name:'vue2',
            }
        })
    </script>
</body>
</html>

5.2 v-html:

1.作用：向指定节点中渲染包含html结构的内容；
2.与插值语法的区别：
（1）v-html会替换掉节点中所有的内容，{{ xx }}则不会
（2）v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！
（1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <div id="root">
        <div v-html="str"></div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                name:'vue2',
                str:'<h3>我是h3标签</h3>'
            }
        })
    </script>
</body>
</html>

5.3 v-clock:

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{ xxx }}的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-clock</title>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

    <div id="root">
<!--        一旦vue接管此容器，则v-cloak会被删除     -->
        <h2 v-cloak>{{name}}</h2>
    </div>
<!--    如果vus.js加载过慢，则用户会直接看到未渲染的容器  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                name:'vue2',
            }
        })
    </script>
</body>
</html>

5.4 v-once:

1.v-once所在节点在初次动态渲染后，就视为静态内容了；
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <div id="root" >
        <h1 v-once>初始化的n = {{n}}</h1>
        <h1>当前的n = {{n}}</h1>
        <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                n:1,
            }
        })
    </script>
</body>
</html>

5.5 v-pre:

1.跳过其所在节点的编译过程；
2.可利用它跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译的速度；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-pre</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>


<div id="root" >
    <h1 v-pre>Vue其实很简单</h1>
    <h1 v-pre>当前的n = {{n}}</h1>
    <h1>当前的n = {{n}}</h1>
    <button @click="n++">点我n+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            n:1,
        }
    })
</script>
</body>
</html>