vue属性、监听、事件、绑定、渲染（二）

2022-08-29 00:33:39 阅读：166 来源： 互联网

标签：vue crossorigin data 绑定 integrity sha384 stuNum 监听

一、计算属性和监听器

1、计算属性

data中的属性可以通过声明获得，也可以通过在computed通过计算获得

特性：

计算属性所依赖的属性值发生变化会影响计算属性的值同时发生变化

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container">
			<input type="text" v-model="str1"/> <br>
			<input type="text" v-model="str2"/> <br>
			{{str3}}
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#container",
			data:{
				str1:'你好',
				str2:'玛卡巴卡',
			},
			computed:{
				str3:function(){
					return this.str1+this.str2;
				}
			}
		})
	</script>
</html>

2、侦听器

侦听器：

就是data中属性的监听器，当data中的属性值发生变化就会触发侦听器函数的执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container">
			<input type="text" v-model="str1"/> <br>
			<input type="text" v-model="str2"/> <br>
			{{str3}}
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#container",
			data:{
				str1:'杭州',
				str2:'西湖',
				str3:'杭州西湖'
			},
			watch:{
				str1:function(){
					this.str3=this.str1+this.str2
				}
			}
		
		})
	</script>
</html>

二、Class和Style绑定

vue可以通过mustache语法将vue中data的数据绑定到html标签中。

标签中属性怎么绑定？如下:

1、class内部样式绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#container div {
				margin: 20px;
			}

			.box1 {
				width: 100px;
				height: 100px;
				background-color: green;
			}

			.my-box {
				border-radius: 10px;
			}

			.box2 {
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<!-- 一、{样式名：data中boolean类型变量} -->
			<div :class="{box1:falg}"></div>
			<div :class="{box1:falg,'my-box':falg}"></div>

			<!-- 二、三元表达式判断 -->
			<div :class="falg1?'box1':'box2'"></div>
			<div :class="falg1?box1:box2"></div>
			
			<!-- 三、class中有多个样式时适应[]属性之间使用，隔开 -->
			<div :class="[box1,'my-box']"></div>
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#container",
			data: {
				falg: true,
				falg1: false,
				box1: 'box1',
				box2: 'box2',
			},
		})
	</script>
</html>

2、内联Style样式绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container">
			<!-- 第一种：
					内联样式属性使用{}，
					属性间使用，隔开
					属性值不适用原来的css属性 font-size
					而是使用json格式
			 -->
			<div id="container" :style="{color:colorName,fontSize:size+'px'}">
				hello
			</div>
			<!--
				第二种：
					data中直接给定样式的字符串
			-->
			<div :style="myStyle1"></div>
			
			<!--
				第三种：
					data中直接给定样式的对象格式.
					对象格式的话属性键值对的
					键为json格式
			-->
			<div :style="myStyle2"></div>
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#container",
			data: {
				colorName:"red",
				size:30,
				myStyle1:"background-color:green;width:100px;height:100px;",
				myStyle2:{
					backgroundColor:"red",
					width:"100px",
					height:"100px",
					borderRadius:'10px'
				}
			},
			
		})
	</script>
</html>

三、条件与列表渲染

1、条件渲染

1.1、v-if、v-else-if、v-else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container">
			<div>
				<input type="text" v-model="code"  placeholder="输入1,2或其他输出相应结果"/>
			</div>
			
			<div v-if="code==1">
				你好
			</div>
			<div v-else-if="code==2">
				Hello
			</div>
			<div v-else>
				嗨
			</div>
	</body>
	<script src="./js/vue.js"></script>
	<script>
		var vm = new Vue({
			el:"#container",
			data:{
				code:1
			}
		})
	</script>
</html>

1.2、v-show

从功能上将v-show和v-if作⽤是相同的，渲染过程有区别。

		v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和⼦组件适当地被销毁
和重建。

		v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第⼀次变为真时，才会开始
渲染条件块。

		相⽐之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS
进⾏切换。

		⼀般来说， v-if 有更⾼的切换开销，⽽  v-show 有更⾼的初始渲染开销。因此，如果需要⾮常频繁
地切换，则使⽤  v-show 较好；如果在运⾏时条件很少改变，则使⽤  v-if 较好。

2、列表渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css>"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
	<body>
		<div id="container">
			<ul v-for="t,index in type">
				<li>
					<a :href="'query?id='+t.t_id">{{t.t_name}}</a>
				</li>
			</ul>
			<hr>
			<!-- 表格 -->
			<table class="table table-bordered">
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>头像</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<tr v-for="s,index in stus" :id="'str'+index">
					<td>{{s.stuNum}}</td>
					<td>{{s.stuName}}</td>
					<td>
						<img :src="s.stuImg" width="100px" height="100px">
					</td>
					<td>
						{{s.stuAge}}
					</td>
					<td>
						<img v-if="s.stuSex=='M'" src="img/M.png" width="100px" height="100px">
						<img v-else src="img/F.png" width="100px" height="100px">
					</td>
					<td>
						<a :href="'del?id='+s.stuNum" class="btn btn-danger">删除</a>
						<a :href="'edit?id='+index" class="btn btn-success">编辑</a>
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="<https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js>"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
	</script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js>"
		integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
	</script>
	<script>
		var vm = new Vue({
			el: "#container",
			data: {
				type: [{
						t_id: 1,
						t_name: '小米'
					},
					{
						t_id: 2,
						t_name: '华为'
					},
					{
						t_id: 3,
						t_name: 'oppo'
					},
					{
						t_id: 4,
						t_name: 'VIVO'
					}
				],
				stus: [{
						stuNum: '1001',
						stuName: 'one',
						stuImg: 'img/01.jpg',
						stuAge: 20,
						stuSex: 'M'
					},
					{
						stuNum: '1002',
						stuName: 'two',
						stuImg: 'img/02.jpg',
						stuAge: 22,
						stuSex: 'F'
					},
					{
						stuNum: '1003',
						stuName: 'three',
						stuImg: 'img/03.jpg',
						stuAge: 21,
						stuSex: 'M'
					}
				]
			}
		})
	</script>
</html>

四、事件处理

v-on绑定事件可简写为@

1、事件的绑定【v-on 或 @】

1.1、通过参数传递绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css>"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
	<body>
		<div id="container">
			<!-- 表格 -->
			<table class="table table-bordered">
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>头像</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<tr v-for="s,index in stus" :id="'str'+index">
					<td>{{s.stuNum}}</td>
					<td>{{s.stuName}}</td>
					<td>
						<img :src="s.stuImg" width="100px" height="100px">
					</td>
					<td>
						{{s.stuAge}}
					</td>
					<td>
						<img v-if="s.stuSex=='M'" src="img/M.png" width="100px" height="100px">
						<img v-else src="img/F.png" width="100px" height="100px">
					</td>
					<td>
						<!-- <a :href="'del?id='+s.stuNum" class="btn btn-danger">删除</a>
						<a :href="'edit?id='+index" class="btn btn-success">编辑</a> -->
						<button type="button" class="btn btn-danger" v-on:click="del(s.stuNum)">删除</button>
						<button type="button" class="btn btn-success">修改</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="<https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js>"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
	</script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js>"
		integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
	</script>
	<script>
		var vm = new Vue({
			el: "#container",
			data: {
				stus: [{
						stuNum: '1001',
						stuName: 'one',
						stuImg: 'img/01.jpg',
						stuAge: 20,
						stuSex: 'M'
					},
					{
						stuNum: '1002',
						stuName: 'two',
						stuImg: 'img/02.jpg',
						stuAge: 22,
						stuSex: 'F'
					},
					{
						stuNum: '1003',
						stuName: 'three',
						stuImg: 'img/03.jpg',
						stuAge: 21,
						stuSex: 'M'
					}
				]
			},
			methods:{
				del:function(num){
					console.log(num)
				}
			}
			
		})
	</script>
</html>

1.2、使用dataset对象传值

<button type="button" class="btn btn-success" @click="upload" :data-num="s.stuNum">修改</button>

在标签中绑定以data-开头的属性
例：
	:data-num = "s.stuNum"

1.3、混合使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css>"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
	<body>
		<div id="container">
			<!-- 表格 -->
			<table class="table table-bordered">
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>头像</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<tr v-for="s,index in stus" :id="'str'+index">
					<td>{{s.stuNum}}</td>
					<td>{{s.stuName}}</td>
					<td>
						<img :src="s.stuImg" width="100px" height="100px">
					</td>
					<td>
						{{s.stuAge}}
					</td>
					<td>
						<img v-if="s.stuSex=='M'" src="img/M.png" width="100px" height="100px">
						<img v-else src="img/F.png" width="100px" height="100px">
					</td>
					<td>
						<!-- <a :href="'del?id='+s.stuNum" class="btn btn-danger">删除</a>
						<a :href="'edit?id='+index" class="btn btn-success">编辑</a> -->
						<button type="button" class="btn btn-danger" v-on:click="del(s.stuNum,$event)">删除</button>
						<button type="button" class="btn btn-success" @click="upload" :data-num="s.stuNum">修改</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="<https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js>"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
	</script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js>"
		integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
	</script>
	<script>
		var vm = new Vue({
			el: "#container",
			data: {
				stus: [{
						stuNum: '1001',
						stuName: 'one',
						stuImg: 'img/01.jpg',
						stuAge: 20,
						stuSex: 'M'
					},
					{
						stuNum: '1002',
						stuName: 'two',
						stuImg: 'img/02.jpg',
						stuAge: 22,
						stuSex: 'F'
					},
					{
						stuNum: '1003',
						stuName: 'three',
						stuImg: 'img/03.jpg',
						stuAge: 21,
						stuSex: 'M'
					}
				]
			},
			methods:{
				del:function(num,e){
					console.log(num)
					console.log(e)
				},
				upload:function(event){
					/* 
					    1、绑定的js函数不传值，调用的时候可以通过event参数(事件队形 名字可自取)
						2、event表示当前的事件对象
						3、event.srcElement表示发生事件的元素
						4、event.srcElement.dataSet 获取自定义的以data-开头的绑定参数(data-属性) 
					*/
					console.log(event.srcElement.dataset)
					var s = event.srcElement.dataset;
					console.log(s.num)
				}
			}
			
		})
	</script>
</html>

注意：
混合使用，获取event事件
传入的参数需要添加$event特殊变量
然后通过
event.srcElement.dataSet获取自定义绑定的data-。。属性名

2、事件修饰符

在使用v-on进行事件绑定的时候，可以添加特定后缀，设置事件触发的特性

语法 ：
	@事件.后缀名

2.1、示例

<button type="submit" @click.prevent="test"></button>

2.2、后缀

.prevent 禁用事件

.stop 阻止冒泡

.slef 只有自身可以触发，子标签不能冒泡触发

.once 点击事件只触发一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css>"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
	<body>
		<div id="container">
			<div>
				测试
				<ol>
					<li> .prevent 【提交表单不在重载页面】</li>
					<li> .stop 【阻止冒泡】</li>
					<li> .self 【自己调用子标签的事件不触发】</li>
					<li> .once 只会触发一次</li>
				</ol>
			</div>
			<form action="<http://www.baidu.com>" @submit.prevent>
				<button type="submit">提交</button>
			</form>
			<hr>

			<div style="width: 200px;height: 200px;background-color: red;" @click.self="box1">
				<div style="width: 100px;height: 100px;background-color: green;" @click="box2">
					<button type="button" class="btn btn-danger" @click.stop="box3">测试</button>
				</div>
			</div>
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="<https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js>"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
	</script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="<https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js>"
		integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
	</script>
	<script>
		var vm = new Vue({
			el: "#container",
			data: {

			},
			methods: {
				box1: function() {
					alert(1);
				},
				box2: function() {
					alert(2);
				},
				box3: function() {
					alert(3);
				}
			}

		})
	</script>
</html>

3、按键修饰符

针对键盘的按键。限定指定按键触发
@keyup 按下松开触发

@keyup.enter 回车
常用按键别名如下：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

除了以上提供的还可以根据键盘码自定义按键别名

键盘码

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container">  吧
			<input type="text" @keyup.j="test">测试按键事件</button>
		</div>
		
	</body>
	<script src="./js/vue.js"></script>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
	</script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
		integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
	</script>
	<script>
		//根据键盘码设置按键的别名
		Vue.config.keyCodes.j = 74;
	
		var vm = new Vue({
			el: "#container",
			data: {

			},
			methods: {
				box1: function() {
					alert(1);
				},
				box2: function() {
					alert(2);
				},
				box3: function() {
					alert(3);
				},
				test:function(){
					alert("按键j的事件被触发")
				}
			}

		})
	</script>
</html>

系统修饰符：

.ctrl

.alt

.shift

.meta 【win键】

组合键：键盘事件.系统修饰符.键

例：@keyup.ctrl.j Vue.config.keyCodes.j = 74

标签：vue,crossorigin,data,绑定,integrity,sha384,stuNum,监听
来源： https://www.cnblogs.com/zceng/p/16634542.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9