new 一个vue对象就形成一个 vue实例//用于挂载vue应用的dom元素
//定义用于挂载vue应用的dom元素 <div id="app"> //自定义组件 <component01></component01> <component02></component02> </div> //用于创建vue根组件的配置对象 :包含data methods watch computed component等属性和方法 const helloVueApp = { data(){ return { message:"Hello Vue!", } }, methods:{ fun1(){ return this.message; }, fun2(){}, fun3(){} // ... }, watch:{ message:function(newValue,oldValue){ this.message = newValue; } }, computed:{ fun4:function(){} }, //定义组件--这里定义的是局部组件 component:{ "component01":{ props:["value1","value2..."], data(){}, template:`` // ..... } } } //创建vue实例:将vue应用挂载到dom元素上 const vm = Vue.createApp(helloVueApp).mount("#app")<div id="app"></div>
const helloVueApp = {}
比如 const vm = Vue.createApp(helloVueApp).mount("#app") 这就是创建vue实例的过程
* vm就是创建好的实例 (他可以饮用配置对象中的方法和数据)
* #app指向dom元素 vue实例将在该元素中生效
* helloVueApp 是用于生成根组件的配置对象
* mount方法将挂载vue应用到dom元素上
* 实例和实例中定义的各种组件形成了完整的vue应用
标签:vue,dom,helloVueApp,实例,组件,message From: https://www.cnblogs.com/cui-ting/p/16861711.html