初识Vue 3.0 —— data:获取到data的值
七娃博客27 次
<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 条评论