Vue 初识Vue 3.0 —— data:获取到data的值

初识Vue 3.0 —— data:获取到data的值

<h5>13.data</h5><p>组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一...

<h5>13.data</h5>
<p>组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象,然后 Vue 会通过响应性系统将其包裹起来,并以 $data 的形式存储在组件实例中。</p>
<div id="dd">
	<span style="margin-right: 15px;">data的num的值:{{num}}</span>
	<button @click="add">加1</button>
</div>
<pre>通过vm = dd.mount('#dd')将声明实例,vm.$data.num和vm.num的方法都可以获取到data的值,也可以改变data的值(F12查看打印值)</pre>
<script type="text/javascript">
	//data 实例
	const dd = Vue.createApp({
		data(){
return{
	num:0
}
		},
		methods:{
add(){
	this.num++;
}
		}
	})
	const vm = dd.mount('#dd');
	vm.num = 100;
	console.log('vm.$data.num:'+vm.$data.num); 
	console.log('vm.num:'+vm.num); 
</script>

交互效果见:https://course.51qux.com/vue3-0-1

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
Logo

前往低代码交流专区

更多推荐

  • 浏览量 6208
  • 收藏 0
  • 0

所有评论(0)

查看更多评论 
已为社区贡献4条内容