Vue实例属性和实例方法

最新推荐文章于 2024-08-19 12:06:18 发布

疆~

最新推荐文章于 2024-08-19 12:06:18 发布

阅读量1.7k

点赞数 3

分类专栏： Vue2 文章标签： Vue

本文链接：https://blog.csdn.net/qq_40323256/article/details/100857233

版权

Vue2 专栏收录该内容

196 篇文章 59 订阅

订阅专栏

Vue实例属性：vue实例直接调用的属性；

一，常用的实例属性：

vm.$data：获取属性；
vm.$el：获取实例挂载的元素；
vm.$options：获取自定义选项/属性/函数；
vm.$refs：获取通过ref属性注册的DOM对象；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>05_InstanceProperties</title>
		<script type="text/javascript" src="../js/vue.js" ></script>

	</head>
	<body>
		<div>
			<h1>{{msg}}</h1>
			<h2 ref='hello'>Hello</h2>
			<h2 ref='vue'>Vue</h2>
		</div>
	</body>
	
	<script>
		let vm = new Vue({
				el : 'div',
				data : {
					msg : 'sikiedu'
				},
				username : 'joey',
				password : '123',
				login(){
					console.log("login");
				}
			});
			
			/*$.data*/
  		    console.log(vm.$data.msg);
			console.log(vm.msg);
			
			/*$el*/
			console.log(vm.$el);
			vm.$el.style.color = 'red';

			/*$options*/
			console.log(vm.$options.username);
			console.log(vm.$options.password);
			vm.$options.login();
			
			/*$refs*/
			console.log(vm.$refs);
			vm.$refs.hello.style.backgroundColor = 'yellow';
			
	</script>
</html>

二，常用的实例方法：

数据：

vm.$set：设置属性值；
vm.$delete：删除属性值；
vm.$watch：观测数据变化；

生命周期

vm.$mount：手动挂载Vue实例；
vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听；
vm.$nextTick：将方法中的回调函数，延迟到DOM更新后；

1，实例方法set ，delete

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>06_InstanceMethod</title>
		<script type="text/javascript" src="../js/vue.js" ></script>

	</head>
	<body>
		<div>
			Id：<span>{{user.id}}</span><br />
			用户名：<span>{{user.username}}</span><br />
			<button @click="changeUsername">changeUsername</button><br />
			<button @click="addId">addId</button><br />
			<button @click="delId">delId</button>
		</div>
	</body>
	
	<script>
		let vm = new Vue({
				el : 'div',
				data : {
					user : {
						username : 'Joey'
					}
				},
				methods : {
					changeUsername(){
						this.user.username = 'sikiedu-Joey';
					},
					addId(){
						//this.$set(this.user, 'id', 1);  局部的
						//Vue.set(this.user, 'id', 1);   全局的
						
						if(this.user.id){
							this.user.id++;
						}else{
							Vue.set(this.user, 'id', 1);
						}
						console.log(this.user.id);
					},
					delId(){
						if(this.user.id){
							//this.$delete(this.user, 'id');
							Vue.delete(this.user, 'id');
						}
					}
				}
			});
			
	</script>
</html>

2，实例方法watch

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>07_InstanceMethod_watch</title>
		<script type="text/javascript" src="../js/vue.js" ></script>

	</head>
	<body>
		<div>
			<input type="text" v-model="msg" /><br />
			msg : <span>{{msg}}</span><br />
			
			<input type="text" v-model="num" /><br />
			num : <span>{{num}}</span><br />
			
			<button onclick="unWatch()">unWatch</button>
			
		</div>
	</body>
	
	<script>
		let vm = new Vue({
				el : 'div',
				data : {
					msg : 'Joey',
					num : 1,
					user : {
						id : '01',
						username : 'sikiedu'
					}
				},
				watch : {
					num : function(newValue, oldValue){
						console.log("修改了num 旧值= " + oldValue + "   新值= " + newValue);
					}
				}
			});
			
			let unwatch = vm.$watch('msg', function(newValue, oldValue){
					console.log("修改了msg 旧值= " + oldValue + "   新值= " + newValue);
			});
			
			function unWatch(){
				unwatch();
				console.log("点击了unwatch按钮")
			}
			
	</script>
</html>

3，实例方法-生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>08_InstanceMethod_lifeCycle</title>
		<script type="text/javascript" src="../js/vue.js" ></script>

	</head>
	<body>
		<div id="sikiedu">
			<input type="text" v-model="msg" /><br />
			msg : <span>{{msg}}</span><br />
			<button onclick="_destroy()">销毁</button><br /><br />
			oldName : <span ref='oldName'>{{oldName}}</span><br />
			newName : <span>{{newName}}</span>
		</div>
	</body>
	
	<script>
		let vm = new Vue({
				//el : 'div',
				data : {
					msg : 'Joey',
					oldName : 'AAA',
					newName : 'BBB'
				}
			});
		vm.$mount('#sikiedu');
		vm.oldName = 'CCC';
		//vm.newName = vm.$refs.oldName.textContent;
		
//		vm.$nextTick(function(){
//			vm.newName = vm.$refs.oldName.textContent;
//		});
		Vue.nextTick(function(){
			vm.newName = vm.$refs.oldName.textContent;
		});
		
		function _destroy(){
			vm.$destroy();
		}
		
	</script>
</html>