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、测试效果

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

  1. Vue.js 学习笔记 第5章 内置指令

    本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...

  2. VUE：内置指令与自定义指令

    VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...

  3. Vue源码后记-其余内置指令（2）

    -- 指令这个讲起来还有点复杂,先把html弄上来: <body> <div id='app'> <div v-if="vIfIter" v-bind ...

  4. Vue源码后记-其余内置指令（1）

    把其余的内置指令也搞完吧,来一个全家桶. 案例如下: <body> <div id='app'> <div v-if="vIfIter" v-bind ...

  5. vue内置指令详解——小白速会

    指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bi ...

  6. vue内置指令与自定义指令

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

  7. Vue(四) 内置指令

    现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...

  8. 2.0 vue内置指令与自定义指令

    1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...

  9. AngularJS学习笔记（四）内置指令

    说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素 ...

随机推荐

  1. 论文解读（PPNP）《Predict then Propagate: Graph Neural Networks meet Personalized PageRank》

    论文信息 论文标题:Predict then Propagate: Graph Neural Networks meet Personalized PageRank论文作者:Johannes Gast ...

  2. 技术分享 | Prometheus+Grafana监控MySQL浅析

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 简介 Prometheus 一套开源的监控&报警&时间序列数据库的组合,通常 Kubernetes 中都会 ...

  3. mybatis 08: 返回主键值的insert操作 + 利用UUID获取字符串(了解)

    返回主键值的insert操作 应用背景 图示说明 在上述业务背景下,涉及两张数据表的关联操作:用户表 + 用户积分表 传统操作:在对用户表执行完插入语句后,再次查询该用户的uid,将该uid作为外键, ...

  4. vue 使用 monaco-editor 实现在线编辑器

    前言 项目里使用到 monaco-editor 编辑器,实现源码编辑器,看了很多网上教程,记录一下实现过程.在此之前引用很多博主的方法安装但是引入的时候,运行项目总是各种各样的错误,找不到头绪.终于在 ...

  5. 不当使用 union all 导致的SQL解析时间过长的问题优化

    在帮助用户优化应用过程中,发现用户大量使用union all 导致SQL解析非常缓慢的问题.考虑到这个问题很有代表意义,我觉得很有必要对于问题进行总结. 一.用户例子 WITH company_use ...

  6. KingbaseES 如何实现Oracle pipelined 功能

    管道函数即是可以返回行集合(可以使嵌套表nested table 或数组 varray)的函数,我们可以像查询物理表一样查询它或者将其赋值给集合变量.KingbaseES 数据库可以用 setof 实 ...

  7. 手写tomcat——netty版

    点击查看代码 package com.grady.diytomcat; import com.grady.diytomcat.handler.DiyNettyTomcatHandler; import ...

  8. 1.关于433MHz按键单片机解码

    近段时间做项目要用到单片机接收433MHz按键发过来的码值,涉及短按.连按.长按,由于之前没有做过这方面一开始有点蒙,找遍网上都没有案例,现在项目完成了整理自己的一些心得和大家分享分享!!!直入主题. ...

  9. 一个注解解决ShardingJdbc不支持复杂SQL

    背景介绍 公司最近做分库分表业务,接入了 Sharding JDBC,接入完成后,回归测试时发现好几个 SQL 执行报错,关键这几个表都还不是分片表.报错如下: 这下糟了嘛.熟悉 Sharding J ...

  10. 谣言检测——《MFAN: Multi-modal Feature-enhanced Attention Networks for Rumor Detection》

    论文信息 论文标题:MFAN: Multi-modal Feature-enhanced Attention Networks for Rumor Detection论文作者:Jiaqi Zheng, ...