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

<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