这篇主要对 vue 最基础的应用程序 Application 和组件 Components 进行一个简要和直观的认知, 具体要分析的代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>app和组件基本概念</title>

  <script src="./js/vue@3.2.23.js"></script>

</head>

<body>

  <div id="root"></div>

</body>

<script>

  // createApp 表示创建一个 Vue 应用, 存储到 app变量中

  // 传入的参数表示, 该应用最外层的组件, 应该如何展示

  // mvvm 设计模式, m->model; v->view视图

  // mv: 数据和视图; vm: 视图和数据

  const app = Vue.createApp({

    data() {

      return {

        message: 'hello world'

      }

    },

    template: `<div>{{message}}</div>`

  })

  // vm 代表的就是 vue 应用的根组件

  const vm = app.mount('#root')

</script>

</html>

首先是这一段:

Vue 创建了一个名为 app 的应用 (存储在app这边变量), 并将这个 app 挂载到 ID 为 'root' 的 DOM 元素上进行管理.

const app = Vue.createApp({});

app.mount('#root')

然后传入的对象参数 data () 和 template 表示这个 app 应用最外层的组件应该怎样展示. 组件之前说过就是页面的一部分, 那这些组件的根组件其实就是 app.mount('#root').

// vm 代表的就是 vue 应用的根组件

const vm = app.mount('#root');


const app = Vue.createApp({

    data () {

        return {

            message: 'hello, ziyin'

        }

    },

    template: `<div>{{message}}</div>`

});

app.mount('#root')

因此从这里就可以感受到 vue 的操作是一种面向数据的编程. 我们定义了数据 message, 也定义了模板 template 后, vue 就会自动将数据和模板关联管理起来, 渲染成我们想要的页面效果. 我们也将这种设计方式成为 mvvm 的设计模式.

  • m: 代表了 model 即数据

  • v: 代表了 view 即可视图

  • vm: 代表了 viewModel 即视图和数据的连接层

上例 m, v 都是我们自己定义的, 但如何关联起来就是 vue 的 vm 组件连接层帮我们自动做的啦.

那如果通过根组件 vm 来获取其他组件或者数据呢, 以这里的 message 为例, 可以这样去获取:

vm.$data.message = 'world'

此时页面就会自动变成 "hello, world" 啦. 就数据和视图是响应式变化的, 即 vue 就是面向数据编程.

vue3 基础-应用app和组件基本概念的更多相关文章

  1. Spark各个组件的概念，Driver进程

    spark应用涉及的一些基本概念: 1.mater:主要是控制.管理和监督整个spark集群 2.client:客户端,将用应用程序提交,记录着要业务运行逻辑和master通讯. 3.sparkCon ...

  2. React Native指南汇集了各类react-native学习资源、开源App和组件

    来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...

  3. 《iOS开发指南：从零基础到App Store上架(第2版)》

    <iOS开发指南:从零基础到App Store上架(第2版)> 基本信息 作者: 关东升 丛书名: 图灵原创 出版社:人民邮电出版社 ISBN:9787115348029 上架时间:201 ...

  4. 【转帖】H5 手机 App 开发入门：概念篇

    H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年 ...

  5. vue3系列：vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

    基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

  6. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  7. 《Android Studio开发实战 从零基础到App上线》资源下载和内容勘误

    转载于:https://blog.csdn.net/aqi00/article/details/73065392 资源下载 下面是<Android Studio开发实战 从零基础到App上线&g ...

  8. 前端判断是否APP客户端打开触屏，实现跳转APP原生组件交互之遐想

    今天做了一个html的活动页面,本来马上就要完工,准备开开心心收尾,结果~... 产品突然提出需要说,要讲html中的某些交互和APP原生组件挂钩,心里一万头xxx奔过~ 静下心来思考 以往我们是判断 ...

  9. 组件基础之动态tab组件

    <template> <div id="demo31"> <p>-----------------组件基础之动态tab组件一---------- ...

  10. Kubernetes笔记（二）：了解k8s的基本组件与概念

    前文 Kubernetes笔记(一):十分钟部署一套K8s环境 介绍了如何快速搭建一个k8s系统.为了继续使用k8s来部署我们的应用,需要先对k8s中的一些基本组件与概念有个了解. Kubernete ...

随机推荐

  1. Android高版本Service在后台一分钟被杀死

    最近公司出现了一个Bug,Service在后台写log时候一分钟左右被杀死,或者运行一会就被杀死了,上网搜了一下原来是Android高版本为了保护电量,流量什么的,会在后台杀死这些Service,现在 ...

  2. QT5笔记： 20. QStringListModel的使用

    主要为 :添加.插入.修改.删除.清空等操作 例子:本例子中QListView 没有做任何处理,只是拖放至ui文件,设置了布局 MainWindow.h #ifndef MAINWINDOW_H #d ...

  3. 设计原则&模式：原型模式 Prototype（创建型）

    定义:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.也就是说,这种不通过new关键字来产生一个对象,而是通过对象复制(Java中的clone或反序列化)来实现的模式,就叫做原型模式. ...

  4. centos 8 编译*.cpp文件

    1.安装g++ yum -y install gcc-c++ 2.编译*.cpp文件 g++ -o test_app_name test_source_file.cpp 3.运行编译结果 ./test ...

  5. 全源最短路——Johnson 算法

    一.问题引入 目前我们所知道的一些常见的最短路算法有 dijkstra.spfa.floyd. dijkstra 和 spfa 是单源最短路,floyd 是多源最短路. 如果我们需要在 \(O(nm) ...

  6. Selenium 测试介绍

    本文会从以下下几个方面介绍Selenium,相信大家阅读后会对Selenium有一个全新的认识.  为什么是Selenium  初探Selenium  Selenium组成  Selenium ...

  7. mongodb查询某个字段数据

    如下 db.集合名.find( {}, {需要查询的字段:1, _id:0} ) 例如 db.userInfo.find({}, {'created_at':1, _id: 0}) 默认会显示 _id ...

  8. 生产环境swarm集群规划和管理

    swarm集群角色 swarm集群中有两种角色,manager node和 worker ndoe. manager的功能: 维护集群状态 任务调度 为swarm集群提供HTTP API 可以创建只有 ...

  9. linux命令：lsof命令

    lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控制协议 ...

  10. 【Guava工具类】Strings&Ints

    String相关工具 Strings Guava 提供了一系列用于字符串处理的工具: 对字符串为null或空的处理 nullToEmpty(@Nullable String string):如果非空, ...