首页 > 其他分享 >谈谈什么叫vue实例 vue应用 vue组件

谈谈什么叫vue实例 vue应用 vue组件

时间:2022-11-05 23:45:49浏览次数:64  
标签:vue dom helloVueApp 实例 组件 message

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

相关文章

  • 【Vue3】插槽slot
    Vue3插槽父组件向子组件提前挖好的坑(slot)处,填入对应的内容就叫插槽。插入的内容不局限于文本,甚至可以传入多个元素和数组。一、理解插槽如何使用插槽插槽使用的......
  • Vue Need to install with `app.use` function
    UncaughtSyntaxError:Needtoinstallwith`app.use`function(atmessage-compiler.esm-bundler.js:54:19)atcreateCompileError(message-compiler.esm-bundler.j......
  • 13-组件篇之消息队列(2)_ev
    在app端生成一个客户端id到最后面进行去重就做到幂等性  面试重点      存储是最耗时的                   ......
  • SAP Java Connector 组件介绍
    SAPJavaConnector3.1运行时环境由两部分组成:sapjco3.jar-包含JCo的Java运行时类的存档{libraryprefix}sapjco3{sharedlibraryextension}-包含JCo原生......
  • vuex 持久化
    下载插件 vuex-persistedstatenpmi vuex-persistedstate然后到store文件下面index.js 引入importcreatePersistedStatefrom"vuex-persistedstate";......
  • vue中获取dom对象-$refs与ref
    vue中获取dom对象vue中获取dom对象的语法:<divref="自定义对象名"></div>this.$refs."自定义对象名"$refs组件需要搭配ref来使用例子:绑定这个divhtml中:<divref="......
  • 限流 - 限流注解组件开发
    限流概述系统存在服务上限,流量超过服务上限会导致系统卡死、崩溃。限流:为了在高并发时系统稳定可用,牺牲或延迟部分请求流量以保证系统整体服务可用。限流算法固定窗......
  • 小米商城实例(部分)
    xiaomiShop.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="vi......
  • 前端vue2+vue-router3+ElementUI+axios综合使用代码教程登录页案例
    为了测试vue2+vue-router3路由+ElementUI界面+axios网络HTTP请求的基本使用情况专门编写一个登录页面进行demo验证  依赖情况package.json{"name":"default",......
  • 读取数组树下的某值,并返回其父级下的任何值 vue
    1//遍历树获取对应id的项中的值2queryTree(tree,value){3letstark=[];4stark=stark.concat(tree);5while(stark.length)......