提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue学习之--------内置指令的使用【v-bind、v-model、v-for、v-on、v-if 、v-else、v-show、v-text。。。】（2022/7/19）

VueOn学习 for 2022 指令 if Text
2023-09-14 09:07:25 时间

文章目录

1、常见的内置指令

  • v-bind: 单向绑定解析表达式, 可简写为 :xxx

  • v-model: 双向数据绑定

  • v-for : 遍历数组/对象/字符串

  • v-on: 绑定事件监听, 可简写为@

  • v-if : 条件渲染（动态控制节点是否存存在）

  • v-else : 条件渲染（动态控制节点是否存存在）

  • v-show: 条件渲染 (动态控制节点是否展示)

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

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

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

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

  • v-pre指令：
    1、跳过其所在节点的编译过程。
    2、可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

2、代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="App">
        <div>你好,{{name}}</div>
        <div v-text="name">你好、张麻子</div>
        <div v-text="str"></div>
        <div v-html="str"></div>
        <h1 v-cloak>{{value}}</h1>
        <h1 v-pre>Vue其实很好玩</h1>
        <h1 v-once>初始化的值是：{{n}}</h1>
        <h1>当前的n值是：{{n}}</h1>
        <button @click="n++">点我n+1</button>


    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        new Vue({
            el: '#App',
            data: {
                value: "Vue",
                name: 'ZYZ',
                str: '<h3>你好啊！张麻子</h3>',
                n: 1,
            }
        })
    </script>

</body>

</html>

3、测试效果

在这里插入图片描述

在这里插入图片描述

相关文章