Vue 3基础入门 课件 第2章 Hello World与Vue3基础特性.pptxVIP

第2章HelloWorld与Vue3基础特性

2.1Vue3实例创建createApp(RootComponent)mount(#app)mount(:应用实例方法,挂载应用到DOMVue:Vue3库的全局对象createApp(:新增全局方法,创建应用实例#app:CSS选择器,指定挂载目标元素RootComponent:根组件对象(含data、methods、template)constvm=:保存应用实例引用作用:创建Vue3应用实例并指定根组件作用:将Vue3应用挂载到指定DOM元素每个Vue3应用都从createApp(开始,一个页面可创建多个独立应用实例

组件实例(vm)应用实例挂载机制每个Vue3应用从createApp0开始挂载前:组件未初始化,模板未渲染vm.sdata:响应式数据对象一个页面可创建多个独立应用实例挂载后:生成响应式系统,渲染DOMvm.Sprops:接收的props一个应用实例只能挂载一个DOM挂载点元素内容被Vue生成的DOM替换vm.Sel:根DOM元素挂载后生成响应式系统,渲染DOM实现数据的双向绑定提供对组件所有属性和方法的访问应用实例管理全局配置,组件实例提供属性方法访问2.1Vue3实例创建

响应式系统原理Vue2vsVue3对比创建方法:newVue(})→Vue.createApp(0)data选项必须为函数,返回普