Vue实例属性和实例方法

末蓝、 2021-07-25 12:34 455阅读 0赞

**目录**

一，常用的实例属性：

二，常用的实例方法：

1，实例方法set  ，delete

2，实例方法watch

3，实例方法-生命周期

--------------------

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

## 一，常用的实例属性： ##

1.  vm.$data：获取属性；
2.  vm.$el：获取实例挂载的元素；
3.  vm.$options：获取自定义选项/属性/函数；
4.  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>

![20190915132315852.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

## 二，常用的实例方法： ##

**数据：**

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

![20190915132901761.png][]![20190915132939451.png][]

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

![2019091514054763.gif][]![20190915140533731.png][]

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

![20190915162750296.png][]

[20190915132315852.png]: https://img-blog.csdnimg.cn/20190915132315852.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/728844b7f4d542e5aa02316fe53d0df0.png
[20190915132901761.png]: https://img-blog.csdnimg.cn/20190915132901761.png
[20190915132939451.png]: /images/20210725/429b794dc13b441586afae6ef55077b8.png
[2019091514054763.gif]: https://img-blog.csdnimg.cn/2019091514054763.gif
[20190915140533731.png]: /images/20210725/486749b999094e1a9c76983e991fe106.png
[20190915162750296.png]: /images/20210725/720d6ffd0ba7491c97f73055c79d8d23.png