Vue3实例属性实例方法
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3实例属性实例方法相关的知识，希望对你有一定的参考价值。
//通过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>
以上是关于Vue3实例属性实例方法的主要内容，如果未能解决你的问题，请参考以下文章
Vue3.0全家桶最全入门指南 - vue3.0新特性 (2/4)
Vue3获取当前组件实例的 getCurrentInstance 方法 ctx