Vue——day10之指令

2024-09-07 03:52

本文主要是介绍Vue——day10之指令,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

内置指令

v-text指令

v-html指令

v-cloak指令

v-once指令

v-pre指令

整体代码示例

自定义指令

整体代码演示

总结


内置指令

v-text指令

        v-text指令是Vue.js中的一种指令,它用于将元素的textContent设置为指定的值。它的使用方式是在元素上添加v-text属性,并将其值设置为Vue实例中的一个变量或表达式。

        例如,假设Vue实例有一个名为message的变量:

new Vue({data: {message: 'Hello world!'}
})

        然后可以在HTML中使用v-text指令将message的值显示在元素中:

<div v-text="message"></div>

        这样,当页面加载时,元素的textContent会被设置为'Hello world!'。如果message的值发生变化,元素的内容也会自动更新。相比起使用双花括号插值语法{{}}, v-text指令更适合用于在元素中显示简单的文本内容。


v-html指令

        v-html指令是Vue.js中的一种指令,用于将元素的innerHTML设置为指定的HTML内容。它的使用方式与v-text指令类似,只需在元素上添加v-html属性,并将其值设置为Vue实例中的一个变量或表达式。

        例如,假设Vue实例有一个名为htmlContent的变量:

new Vue({data: {htmlContent: '<span style="color:red;">Hello world!</span>'}
})

        然后可以在HTML中使用v-html指令将htmlContent的值作为HTML内容显示在元素中:

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

        当页面加载时,元素的innerHTML会被设置为'<span style="color:red;">Hello world!</span>',从而正确渲染出红色的“Hello world!”文本。需要注意的是,使用v-html指令时要确保内容是可信的,以避免XSS攻击。只应该使用可信的HTML内容来渲染,而不是用户输入的内容。


v-cloak指令

        v-cloak是Vue.js提供的一个指令,用于在Vue实例渲染完成之前隐藏绑定元素。在页面加载过程中,由于Vue实例需要进行渲染和解析,有时候会导致用户在浏览器中看到未渲染的Vue模板或表达式。v-cloak指令可以用来解决这个问题。

        使用v-cloak指令的方法是在需要隐藏的元素上添加v-cloak属性,然后在CSS中定义v-cloak伪类选择器来控制元素的显示与隐藏。例如:

<style>[v-cloak] {display: none;}
</style><div v-cloak><!-- Vue模板或表达式 -->
</div>

        上面的代码中,[v-cloak]选择器会在Vue实例渲染完成之前将具有v-cloak属性的元素隐藏起来。渲染完成后,Vue会自动移除v-cloak属性,元素会恢复显示。

        需要注意的是,v-cloak指令必须和CSS配合使用,才能隐藏元素。在没有定义v-cloak样式的情况下,即使添加了v-cloak属性,元素也不会被隐藏。


v-once指令

        v-once指令是Vue.js中的一个指令,它用于标记元素或组件的一部分内容只需要渲染一次。一旦这部分内容被渲染,任何后续的数据变化将不会更新它。

使用v-once指令有两个主要的优点:

  1. 提高性能:当有一些静态的内容,不需要被重新渲染时,可以使用v-once指令,减少不必要的性能开销。

  2. 避免无限循环更新:有时候,在Vue.js的模板中可能会出现无限循环更新的问题。通过使用v-once指令,可以阻止这种无限循环更新的情况发生。

使用v-once指令很简单,只需要在需要渲染一次的元素或组件上添加v-once指令即可。例如:

<template><div><h1 v-once>{{ title }}</h1><p>This content will not be updated</p></div>
</template>

        在上面的例子中,<h1>元素使用了v-once指令来标记,因此它只会渲染一次。即使title数据发生变化,<h1>元素的内容也不会被更新。而<p>元素没有使用v-once指令,因此它的内容会随着数据变化而更新。


v-pre指令

        v-pre指令是Vue.js的一个指令,用于在模板中以原始的方式显示文本内容,而不将其解析为Vue的模板语法。v-pre指令可以用于提高性能,特别是在大型的、复杂的模板中,可以避免Vue对文本内容进行解析和编译过程。

使用v-pre指令的方式如下:

<template><div v-pre>{{ message }}</div>
</template>

        在上述例子中,div元素中的内容将以原始的方式显示,而不会进行Vue的模板解析。这对于一些静态的文本内容或者作为占位符的文本非常有用,可以提高渲染的速度。

        需要注意的是,v-pre指令只会影响到当前元素及其子元素,不会影响其它元素。同时,v-pre指令也不能在自定义组件上使用。


整体代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-text指令</title><script type="text/javascript" src="../js/vue.js"></script><style>[v-cloak]{/* v-cloak:加了这个样式让带v-cloak的标签在vue被渲染之后就会显现防止网络问题导致未经解析的模版被现实 */display: none;}</style>
</head>
</head>
<body><div id="root"><div>{{name}}</div><div v-text="name">即将被替代</div><div v-html="str">即将被替代</div><!-- v-cloak:会在vue实例渲染的同时此标签会被去掉 --><h2 v-cloak>{{name}}</h2><h2 v-once>初始化的n值是:{{n}}</h2><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n加一</button><br><hr><br><h2 v-pre>学习其实很简单</h2><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n加一</button></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{name:'WJG',str:'<h3>我是一个h3标签</h3>',n:1}});
</script>
</html>

 页面效果


自定义指令

        在Vue.js中,可以使用自定义指令来扩展Vue的功能。自定义指令是一种特殊的Vue功能,允许我们直接与DOM元素进行交互。

下面是一个示例,展示了如何在Vue中创建一个自定义指令:

<template><div><input v-focus /></div>
</template><script>
export default {directives: {focus: {// 指令的定义inserted: function (el) {// 指令被插入到DOM元素时触发el.focus();}}}
}
</script>

        上述代码中,我们通过directives属性定义了一个名为focus的自定义指令。在指令的定义中,我们可以使用一些生命周期钩子函数来处理指令的行为,如inserted函数。在我们的示例中,当指令被插入到DOM元素时,会触发inserted函数,并将DOM元素作为参数传递给函数。在inserted函数中,我们可以执行一些操作来实现具体的功能,比如在插入元素后自动聚焦到输入框。

        然后,我们在模板中使用自定义指令v-focus来应用该指令。在上述示例中,我们将自定义指令应用于一个输入框元素,这样在页面加载后该输入框就会自动获取焦点。

        除了inserted生命周期钩子函数,还有其他一些生命周期钩子函数可以在指令中使用,用于处理不同的操作,如bindupdate等。

        通过自定义指令,我们可以扩展Vue的功能,实现一些特定的交互效果或行为。


整体代码演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body><div id="root"><h2>当前的n值是:<span v-text="n"></span></h2><h2>放大十倍后的n值是:<span v-big="n"></span></h2><button @click="n++">点我n加一</button><hr><input type="text" v-fbind:value="n"></div></body><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{n:1},directives:{// 调用时机// 1.指令与元素成功绑定时// 2.指令所在的模版被重新解析时big(element,binding){element.innerText = binding.value*10},fbind:{// 指令与元素成功绑定时bind(element,binding){element.value = binding.value},// 指令所在元素被插入页面时被调用inserted(element,binding){element.focus()},// 指令所在模版被重新解释时调用update(element,binding){element.focus()element.value = binding.value}}}});
</script>
</html>

页面效果展示


总结

我们学过的指令:

  • v-bind:单向绑定解析表达式,可简写为 :XXX
  • v-model:双向数据绑定
  • v-for:遍历数组/对象/字符串
  • v-on:绑定事件监听,可简写为 @
  • v-if:条件渲染(动态控制节点是否存在)
  • v-else:条件渲染(动态控制节点是否存在)
  • v-show:条件渲染(动态控制节点是否展示)
  • v-text 指令:
    • 作用:向其所在的节点中渲染文本内容。
    • 与插值语法的区别:v-text 会替换掉节点中的内容,{{xx}} 则不会。
  • v-cloak 指令(没有值):
    • 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删除 v-cloak 属性。
    • 使用CSS配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}} 的问题。
  • v-once 指令:
    • 所在节点在初次动态渲染后就视为静态内容了。
    • 以后数据的改变不会引起 v-once 所在结构的更新,可用于优化性能。
  • v-pre 指令:
    • 跳过所在节点的编译过程。
    • 可以利用它跳过没有使用指令语法、没有使用插值语法的节点,以加快编译速度。

自定义指令总结:

  • 定义语法:
    • 局部指令:在组件的 directives 选项中定义。
    • 全局指令:使用 Vue.directive 方法全局注册。
  • 配置对象中常用的3个回调:
    • bind:指令与元素成功绑定时调用。
    • inserted:指令所在元素被插入页面时调用。
    • update:指令所在模板结构被重新解析时调用。
  • 备注:
    • 指令定义时不加 v-,但使用时要加 v-
    • 指令名如果是多个单词,要使用 kebab-case 命名方式,不要用 camelCase 命名。


 

这篇关于Vue——day10之指令的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1143987

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果: 解密后的数据就是正常数据: 后端:使用的是spring-cloud框架,在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密

工作常用指令与快捷键

Git提交代码 git fetch  git add .  git commit -m “desc”  git pull  git push Git查看当前分支 git symbolic-ref --short -q HEAD Git创建新的分支并切换 git checkout -b XXXXXXXXXXXXXX git push origin XXXXXXXXXXXXXX