Vue|内置指令

这篇具有很好参考价值的文章主要介绍了Vue|内置指令。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue|内置指令

Vue的内置指令是带有v-前缀的特殊属性,它的作用是当表达式的值改变时将其一系列连带影响,响应地作用于DOM元素。
推荐专栏:微信小程序实战开发专栏

内置指令

开始前的准备,在目录下创建文件夹及对应的页面如下

Vue|内置指令

创建好页面容器及对应的Vue实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内置指令</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
    </div>
    <script type="text/javascript">
        //Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        // 创建vue实例
        const vm = new Vue({
            el: '#root',
            //函数式
            data: function () {
                return {
                    name: '摔跤猫子'
                };
            }
        });
    </script>
</body>
</html>

v-text指令

v-text指令作用是用于向其所在的节点标签渲染文本内容,使用方式如下

<div v-text="name">hi,</div>

可以看到能够直接将在data中定义的name进行展示,但是原有标签中的hi,这个内容被直接覆盖

Vue|内置指令

它与差值语法的区别在于,v-text会将节点中的内容全部替换,而差值语法可以进行拼接

		<!-- 1.差值语法 -->
        <div>hi,{{name}}</div>
        <!-- 2.通过指令 -->
        <div v-text="name">hi,</div>

Vue|内置指令

v-html指令

v-html指令用于将html结构进行渲染,使用上述的v-text以及差值语法是不支持的,它只会将其通过字符的方式进行解析展示
在data中定义字段如下

Vue|内置指令

htmlStr: '<h2 style="color:red;">摔跤猫子</h2>',

在html中通过差值语法或v-text渲染,节点标签以及样式都无法识别

<div>{{htmlStr}}</div>

Vue|内置指令

使用v-html渲染

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

Vue|内置指令

注意事项:v-html可以识别html结构,但是使用v-html时需要注意安全性问题,需要建立在内容可信任的基础上渲染数据随意渲染HTML是非常危险的操作,容易遭受XSS攻击
具体XSS攻击方式可参考此文章:点了下链接信息就泄露了,ta们是怎么做到的?

v-cloak指令

v-cloak指令没有特定的值,不用给它指定等于号以及后面的数据,它只是一个特殊属性,等vue实例加载创建完成并接管指定的容器后,该属性会自动被剔除

<div v-cloak>{{name}}</div>

类似于当页面因为网速过慢或页面加载内容过多等原因导致Vue实例无法迅速将节点内容渲染,那么页面上就会直接显示双括弧等标签,这种情况是不友好的,v-cloak属性即可解决这种问题,等渲染加载完成后再将其进行展示

Vue|内置指令

v-once指令

v-once指令用于对该属性所在的标签节点在vue实例进行初次渲染后,就将其标记为静态内容,屏蔽双向绑定及其效果;后续一系列对该数据的操作都不会更新,常用于优化性能或数据标记

Vue|内置指令

使用v-once指定可以用最简单的方式实现效果,不用定义其他函数或字段进行记录

Vue|内置指令

  <h2 v-once>初始访问量:{{TrafficVolume}}</h2>
  <h2>当前访问量:{{TrafficVolume}}</h2>
  <button @click="TrafficVolume++">点击增加访问量</button>

v-pre指令

v-pre指令会直接跳过带有该指令的节点标签,直接忽视,拿来就用。可以在没有使用差值语法的标签使用该指令,用于提升页面编译渲染速度,Vue在渲染时会直接忽略带有此指令的标签

 <h2 v-pre>你好,{{name}}</h2>
 <h2 v-pre>当前访问量:{{TrafficVolume}}</h2>

Vue|内置指令文章来源地址https://www.toymoban.com/news/detail-443400.html

到了这里,关于Vue|内置指令的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 20230628----重返学习-自定义指令的玩法和作用-对象新增属性不能响应的问题-Vue组件中的data属性-Vue生命周

    面试题:自定义指令的玩法和作用 面试题:Vue怎么用 vm.$set() 解决对象新增属性不能响应的问题 ? 面试题:Vue 组件中的 data 为什么必须是函数? 面试题:谈谈你对 Vue2 生命周期的理解? 面试题:简单说一下 $nextTick 的作用及实现原理? 面试题:computed 和 watch 的区别和运用

    2024年02月11日
    浏览(59)
  • 前端Vue入门-day02-vue指令、computed计算属性与watch侦听器

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 指令补充 指令修饰符 v-bind 对于样式控制的增强  操作class 案例:京东秒杀 tab 导航高亮 操作style  v-model 应用于其他表单元素  computed 计算属性 基础语法 computed 计算属

    2024年02月11日
    浏览(45)
  • 面试官:来说说vue3是怎么处理内置的v-for、v-model等指令?

    最近有粉丝找到我,说被面试官给问懵了。 粉丝:面试官上来就问“ 一个vue文件是如何渲染成浏览器上面的真实DOM? ”,当时还挺窃喜这题真简单。就简单说了一下先是编译成render函数、然后根据render函数生成虚拟DOM,最后就是根据虚拟DOM生成真实DOM。按照正常套路面试官

    2024年04月22日
    浏览(45)
  • vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持

    一、v-model是什么 v-model是Vue框架的一种内置的API指令,本质是一种语法糖写法,它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。在Vue中,v-model是用于在表单元素和组件之间创建双向数据绑定的指令。它可以简化表单元素的绑定,使得在用户输入

    2024年01月19日
    浏览(49)
  • 用ARM进行汇编语言编程(4)带有分支的循环和条件指令执行

    ARM 编程模拟器网站地址: 在arm里也有和高级语言一样的for和while循环,可以根据条件来判断是否执行 首先我们创建一个data标签,然后在里面写一个分支,存放一些数值,然后使这些存放的数值依次相加 然后我们要将list加载到内存里 然后使用直接寻址,将r0寄存器里的值放

    2024年02月06日
    浏览(51)
  • 【CSS】以 -webkit- 前缀开头的私有属性

    WebKit 是一个开源的浏览器引擎,最早由苹果公司开发并用于其 Safari 浏览器。后来,Google Chrome 浏览器也采用了 WebKit 引擎作为其基础,并进行了修改和优化。因此,WebKit 浏览器可以指代使用了 WebKit 引擎的浏览器,包括 Safari 和旧版的 Google Chrome。 然而,自从 Chrome 28 版本开

    2024年02月09日
    浏览(77)
  • Linux特殊指令

    目录 1.dd命令 2.mkfs格式化 3.df命令 4.mount实现硬盘的挂载 5.unshare   dd命令可以用来读取转换并输出数据。 示例一: if表示infile,of表示outfile。这里的/dev/zero是一个特殊文件,会不断产生空白数据。 bs表示复制一块的大小,单位字节,count表示要多少块。 示例二:  采用conv=u

    2024年02月10日
    浏览(63)
  • Elasticsearch DSL指令请求前缀解析:快速参考指南【记录】

    一、DSL指令请求前缀解析 1、开始本篇之前,首先要知道一个概念,什么是DSL? DSL全称为\\\"Domain Specific Language\\\",英译中的结果就是,领域特定语言。指的是专注于某个应用程序领域的计算机语言,又译作领域专用语言。不同于其他计算机语言,顾名思义,这种语言只用在某些

    2024年01月18日
    浏览(38)
  • JAVAEE——内置对象和属性范围(二)

    1.1 知识点 (1)四种属性范围 (2)九个内置对象 1.2 具体内容     在我们之前的操作当中,经常使用到request.getParameter()来接受上一个页面传递过来的参数,那么在java当中,如果要使用一个对象,必须要先实例化,但是我们的request却一直没有实例化过就可以直接使用,这意

    2024年01月21日
    浏览(38)
  • vite配置postcss-autoprefixer,实现自动添加css属性前缀

    vite: 4.1.4 首先去vite官网逛逛,因为autoprefixer属于postcss类,所以在官网的配置共享配置中找到关于css.postcss配置项 发现vite对于postcss有两种不同的配置方式:1.内联配置 2.开发者使用postcss-load-config插件推荐的配置方法(vite内置了postcss-load-config插件)具体怎么配置可以看插件官

    2024年02月07日
    浏览(85)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包