Vue3实例属性、实例方法

【VUE.js】 专栏收录该内容
33 篇文章 1 订阅

//通过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>

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<h4 style="font-weight:500;font-size:1.5rem;font-family:&#39;PingFang SC&#39;, &#39;Hiragino Sans GB&#39;, Arial, &#39;Microsoft YaHei&#39;, Verdana, Roboto, Noto, &#39;Helvetica Neue&#39;, sans-serif;color:#222226;background-color:#ffffff;text-align:center;"> <span style="font-size:14px;">期末</span><span style="font-size:14px;background-color:#fbeeb8;">考点</span><span style="font-size:14px;">都对应</span><span style="font-size:14px;background-color:#fbeeb8;">详解视频</span><span style="font-size:14px;">,</span><span style="font-size:14px;"><span style="color:#e03e2d;">基础阶段</span></span><span style="font-size:14px;">内容全面,语言通俗易懂(翻译书中的语言为</span><span style="font-size:14px;background-color:#fbeeb8;">人话)</span><span style="font-size:14px;">,</span> </h4> <h4 style="font-weight:500;font-size:1.5rem;font-family:&#39;PingFang SC&#39;, &#39;Hiragino Sans GB&#39;, Arial, &#39;Microsoft YaHei&#39;, Verdana, Roboto, Noto, &#39;Helvetica Neue&#39;, sans-serif;color:#222226;background-color:#ffffff;text-align:center;"> <span style="font-size:14px;">老师精心研究</span><span style="font-size:14px;background-color:#fbeeb8;">百份</span><span style="font-size:14px;">考卷,总结每一个考点,同时结合你肯定可以听懂的骚话,</span> </h4> <h4 style="font-weight:500;font-size:1.5rem;font-family:&#39;PingFang SC&#39;, &#39;Hiragino Sans GB&#39;, Arial, &#39;Microsoft YaHei&#39;, Verdana, Roboto, Noto, &#39;Helvetica Neue&#39;, sans-serif;color:#222226;background-color:#ffffff;text-align:center;"> <span style="font-size:14px;background-color:#fbeeb8;">扫清你的数据库系统盲区</span> </h4> <h4 style="font-weight:500;font-size:1.5rem;font-family:&#39;PingFang SC&#39;, &#39;Hiragino Sans GB&#39;, Arial, &#39;Microsoft YaHei&#39;, Verdana, Roboto, Noto, &#39;Helvetica Neue&#39;, sans-serif;color:#222226;background-color:#ffffff;text-align:center;"> <span style="font-size:14px;"><span style="color:#e03e2d;">真题阶段</span></span><span style="font-size:14px;">为你提供</span><span style="font-size:14px;background-color:#fbeeb8;">解题思路</span><span style="font-size:14px;">,培养你的</span><span style="font-size:14px;background-color:#fbeeb8;">解题思维</span><span style="font-size:14px;">,同时</span><span style="font-size:14px;background-color:#fbeeb8;">点明考点</span><span style="font-size:14px;">,结合文档进行重点解读,加深你的印象.</span> </h4> <h4 style="font-weight:500;font-size:1.5rem;font-family:&#39;PingFang SC&#39;, &#39;Hiragino Sans GB&#39;, Arial, &#39;Microsoft YaHei&#39;, Verdana, Roboto, Noto, &#39;Helvetica Neue&#39;, sans-serif;color:#222226;background-color:#ffffff;text-align:center;"> <span style="font-size:14px;color:#3598db;">只为你的高分,我们交个朋友!让每位学生都可以学的起!!</span> </h4> <p> <span style="font-size:14px;color:#3598db;"><img src="https://img-bss.csdnimg.cn/202103040423318088.png" alt="" width="788" height="450" /></span> </p>
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值