VueJS 常用系统指令和生命周期

最新推荐文章于 2024-05-16 23:40:36 发布

汪程序猿

最新推荐文章于 2024-05-16 23:40:36 发布

阅读量247

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_61504367/article/details/123015217

版权

Vue 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

1 v-on

可以用 v - on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

click：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-on:click</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
<!--			显示message，下面的JS语句的-->
			<button v-on:click="fun1('Vue v-on')">vue的onclick</button>
		</div>
	</body>

	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    message:"Hello Vue!"
			},
			methods:{
				fun1:function(msg){
				    alert("Hello");
				    this.message = msg;
				}
			}
		});
	</script>
</html>

keydown

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:keydown</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			Vue:<input type="text" v-on:keydown="fun($event)">
			<hr/>
			传统JS：<input type="text"  onkeydown="showKeyCode()"/>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
			    /* $event 它是vue中的事件对象  和我们传统js的event对象是一样的  */
			    fun:function(event){
                    var keyCode = event.keyCode;
                    if(keyCode < 48  || keyCode > 57){
                        //不让键盘的按键起作用
                        event.preventDefault();
                    }
				}
			}
		});


		//传统js的键盘按下事件
		function showKeyCode(){
			//event对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
			var keyCode = event.keyCode;
			if(keyCode < 48  || keyCode > 57){
				//不让键盘的按键起作用
				event.preventDefault();
			}
			// alert(keyCode);
			// if(event.keyCode == 13){
			//     alert("你按的是回车");
			// }
		}
	</script>
	
	

</html>

mouseover：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:mouseover</title>
		<style>
			#div {
				background-color: red;
				width:300px;
				height:300px;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<div @mouseover="fun1" id="div">
				<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
			</div>

			<!--<div onmouseover="divmouseover()" id="div">
				<textarea onmouseover="textareamouseover()">这是一个文件域</textarea>
			</div>-->
		</div>
	</body>
	<script>
		//view model
        /**
		 * @事件名称  就是  v-on:事件名称的简写方式
		 * @mouseover它就等同于v-on:mouseover
         */
		new Vue({
			el:"#app",
			methods:{
				fun1:function(){
				    alert("鼠标悬停在div上了");
				},
				fun2:function(event){
				    alert("鼠标悬停在textarea上了");
                    event.stopPropagation();
				}
			}
		});


		//传统的js方式
		function divmouseover(){
		    alert("鼠标移动到了div上了");
		}

		function textareamouseover(){
		    alert("鼠标移动到了textarea上了");
		    event.stopPropagation();
		}
	</script>

</html>

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如： event.preventDefault() 或

event.stopPropagation() 。

Vue.js 通过由点 (.) 表示的指令后缀来调用修饰符。

.stop

.prevent

.capture

.self

.once

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:事件修饰符</title>
		<style>
			#div {
				background-color: red;
				width:300px;
				height:300px;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<form @submit.prevent action="http://www.itheima.com" method="post" >
				<input type="submit" value="提交">
			</form>
<!--			<form action="http://www.itheima.com" method="post" onsubmit="return checkForm()">-->
<!--				<input type="submit" value="提交">-->
<!--			</form>-->
			<hr/>

		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
                fun1:function(){
                    alert("鼠标悬停在div上了");
                },
                fun2:function(event){
                    alert("鼠标悬停在textarea上了");
                }
			}
		});
		
		
		//传统js方式
		function checkForm(){
		    alert(1);
		    //表单验证必须有一个明确的boolean类型返回值
			//在应用验证方法时必须加上 return  方法名称
			return false;
		}
	</script>

</html>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

全部的按键别名：

.enter

.tab

.delete ( 捕获 " 删除 " 和 " 退格 " 键 )

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:按键修饰符</title>

		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			Vue:<input type="text" @keydown.enter="fun1">
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
			    fun1:function(){
			        alert("按下的是回车");
				}
			}
		});
	</script>

</html>

v-text与v-html的区别

v-text展示效果： <strong>Hello</strong> Vue!

v-html展示效果： Hello Vue!

　　总结：v-text和{{}}表达式渲染数据，不解析标签。

　　　　　v-html不仅可以渲染数据，而且可以解析标签。　

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-text="message"></div>
			<div v-html="message"></div>
			<!--<div id="div1"></div>
			<div id="div2"></div>-->
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    message:"<h1>Hello Vue</h1>"
			}
		});

		//传统js的innerText和innerHTML
		window.onload = function(){
		    document.getElementById("div1").innerHTML="<h1>Hello</h1>";
            document.getElementById("div2").innerText="<h1>Hello</h1>";
		}
	</script>
</html>

v-bind

插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<form action="" method="post">
				用户名：<input type="text" name="username" v-model="user.username"><br/>
				密码：<input type="text" name="password" v-model="user.password"><br/>
			</form>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				user:{
				    username:"test",
					password:"1234"
				}
			}
		})
	</script>
</html>

v-for

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(product,index) in products ">
					<td>{{index}}</td>
					<td>{{product.id}}</td>
					<td>{{product.name}}</td>
					<td>{{product.price}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		//view model
        new Vue({
            el:"#app",
            data:{
                products:[
                	{ id:1,name:"笔记本电脑",price:5000 },
                    { id:2,name:"手机",price:3000 },
                    { id:3,name:"电视",price:4000 }
                ]
            }
        })
	</script>

</html>

v-if与v-show

v-if 是根据表达式的值来决定是否渲染元素

v-show 是根据表达式的值来切换元素的 display css 属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-if与v-show</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-if="flag">传智播客</span>
			<span v-show="flag">itcast</span>
			<button @click="toggle">切换</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    flag:false
			},
			methods:{
			    toggle:function(){
			        this.flag = !this.flag;
				}
			}
		})
	</script>
</html>

点击切换后：

VueJS生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程 .

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vuejs生命周期</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				message: 'hello world'
			},
			beforeCreate: function() {
				console.log(this);
				showData('创建vue实例前', this);
			},
			created: function() {
				showData('创建vue实例后', this);
			},
			beforeMount: function() {
				showData('挂载到dom前', this);
			},
			mounted: function() {
				showData('挂载到dom后', this);
			},
			beforeUpdate: function() {
				showData('数据变化更新前', this);
			},
			updated: function() {
				showData('数据变化更新后', this);
			},
			beforeDestroy: function() {
				vm.test = "3333";
				showData('vue实例销毁前', this);
			},
			destroyed: function() {
				showData('vue实例销毁后', this);
			}
		});

		function realDom() {
			console.log('真实dom结构：' + document.getElementById('app').innerHTML);
		}

		function showData(process, obj) {
			console.log(process);
			console.log('data 数据：' + obj.message)
			console.log('挂载的对象：')
			console.log(obj.$el)
			realDom();
			console.log('------------------')
			console.log('------------------')
		}
		// vm.message = "good...";
		vm.$destroy();
	</script>

</html>