Vue常用实例方法和事件

最新推荐文章于 2024-04-24 09:32:44 发布

Mr.ZKH

最新推荐文章于 2024-04-24 09:32:44 发布

阅读量338

点赞数

分类专栏： Vuejs

本文链接：https://blog.csdn.net/weixin_44415461/article/details/97385135

版权

Vuejs 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

方法：
$mount() 挂载
$destroy() 卸载
$forceUpdate() 更新(迫使Vue实例重新渲染)
$nextTick() 回调

事件:
$on() 监听当前实例的自定义事件
$once() 监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器
$emit() 触发当前实例上的事件
$off() 移除事件监听器

挂载和卸载：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实例方法</title>
	<script src="js/vue.min.js"></script>
</head>
<body>
	<h1>实例入门</h1>
	<hr />
	<div id="header"></div>
	<button onclick="Destroy()">Destroy</button>
</body>
<script>
	//创建一个组件构造器
	var header = Vue.extend({
		template: '<p>{{message}}</p>',
		data: function(){
			return {
				message: 'This is header'
			}
		},
        //生命周期
        destroyed: function(){
        	console.log('控制器和视图脱离关系了');
        }
	})
	//挂载
	var vm = new header().$mount('#header');
	//卸载
	function Destroy(){
		vm.$destroy();
	}
</script>
</html>

运行效果图:
在这里插入图片描述
更新和回调：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实例方法</title>
	<script src="js/vue.min.js"></script>
</head>
<body>
	<h1>实例入门</h1>
	<hr />
	<div id="header"></div>
	<button onclick="Update()">更新</button>
	<button onclick="ret()">回调</button>
</body>
<script>
	//创建一个组件构造器
	var header = Vue.extend({
		template: '<p>{{message}}</p>',
		data: function(){
			return {
				message: 'This is header'
			}
		},
		//生命周期
		updated:function(){
			console.log('数据更新了');
		}

	})
	//挂载
	var vm = new header().$mount('#header');
    //更新
    function Update(){
    	vm.$forceUpdate();
    }
    //回调
    function ret(){
    	vm.$nextTick(function(){
    		alert('我是回调函数!');
    	})
    }
</script>
</html>

在这里插入图片描述

事件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实例事件</title>
	<script src="js/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<p>{{msg}}</p>
		<p>
			<button @click="max">+</button>
		</p>
		<button onclick="min()">-</button>
		<button onclick="del()">del</button>
	</div>
</body>
<script>
	//构造器
	var vm = new Vue({
		el: '#app',
		data: {
			msg: 1
		},
		methods: {
            max: function(){
            	this.msg++;
            }
		}
	})
	//绑定事件  $once() 只能触发一次
	vm.$on('min',function(num){
       this.msg -= num;
	})
	//触发机制
	function min(){
		vm.$emit('min','2');  //点击一次减2
	}
	//移除
	function del(){
		vm.$off('min');
	}
</script>
</html>

运行效果图：
在这里插入图片描述

Mr.ZKH

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue常用实例方法和事件

方法：$mount() 挂载$destroy() 卸载$forceUpdate() 更新(迫使Vue实例重新渲染)$nextTick() 回调事件:$on() 监听当前实例的自定义事件$once() 监听一个自定义...
复制链接

扫一扫