<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
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章
原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:
初识Vue 3.0 —— data:获取到data的值 -
Qui-Note
所有评论(0)