Vue3实例属性、实例方法

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

月疯

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

阅读量1.7k

点赞数

分类专栏：【VUE.js】

本文链接：https://blog.csdn.net/chehec2010/article/details/119779962

版权

【VUE.js】专栏收录该内容

33 篇文章 3 订阅

订阅专栏

本文介绍了Vue实例的几个重要属性，如$el、$data、$options和$refs，以及如何通过$refs访问DOM元素。同时，文章还探讨了Vue的实例方法，包括$watch用于监控数据变化和$nextTick确保在DOM更新后执行回调，以正确获取和操作DOM。

摘要由CSDN通过智能技术生成

//通过Vue实例对象可以直接访问的属性，称为实例属性
       实例属性都以$开头
       vm.$el:当前Vue实例使用的根dom元素
       vm.$data:当前Vue实例观察的数据对象
       vm.$options:当前Vue实例的初始化选项
       vm.$refs:当前Vue实例容器中定义了ref属性的所有DOM元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>
			{{ msg }}
			<span ref="aaa"></span>
			<span ref="bbb"></span>
			</p>
		</div>
		<script>
			const vm=Vue.createApp({
				data(){
					return{
						msg:'welcom',
						htt:'jus'
					}
				}
			}).mount('#app')
			console.log(vm.$refs.aaa)
		</script>
		
	</body>
</html>

通过Vue实例对象可以直接访问的方法，称为实例方法
       实例方法都是以$开头
       vm.$watch:监视数据的变化，对数据进行监控
       vm.$nextTick：在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM并操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p ref="title">
			{{ msg }}
			</p>
			<button @click="change">修改</button>
		</div>
		<script>
			const vm=Vue.createApp({
				data(){
					return{
						msg:'welcom',
					}
				},
				method:{
					change(){
						this.msg='你好'
						//此时DOM还没更新，Vue实现响应式并不是数据发生变化之后DOM立即更新，而是按照一定策略进行DOM的更新
						this.$nextTick(function(){
							//修改然后获取标签内容
							console.log(this.$refs.title.innerHTML)
						})
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>