vue3 基础-应用app和组件基本概念
这篇主要对 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和组件基本概念的更多相关文章
- Spark各个组件的概念，Driver进程
spark应用涉及的一些基本概念: 1.mater:主要是控制.管理和监督整个spark集群 2.client:客户端,将用应用程序提交,记录着要业务运行逻辑和master通讯. 3.sparkCon ...
- React Native指南汇集了各类react-native学习资源、开源App和组件
来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...
- 《iOS开发指南：从零基础到App Store上架(第2版)》
<iOS开发指南:从零基础到App Store上架(第2版)> 基本信息 作者: 关东升 丛书名: 图灵原创 出版社:人民邮电出版社 ISBN:9787115348029 上架时间:201 ...
- 【转帖】H5 手机 App 开发入门：概念篇
H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年 ...
- vue3系列：vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件
基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
- 《Android Studio开发实战 从零基础到App上线》资源下载和内容勘误
转载于:https://blog.csdn.net/aqi00/article/details/73065392 资源下载 下面是<Android Studio开发实战 从零基础到App上线&g ...
- 前端判断是否APP客户端打开触屏，实现跳转APP原生组件交互之遐想
今天做了一个html的活动页面,本来马上就要完工,准备开开心心收尾,结果~... 产品突然提出需要说,要讲html中的某些交互和APP原生组件挂钩,心里一万头xxx奔过~ 静下心来思考 以往我们是判断 ...
- 组件基础之动态tab组件
<template> <div id="demo31"> <p>-----------------组件基础之动态tab组件一---------- ...
- Kubernetes笔记（二）：了解k8s的基本组件与概念
前文 Kubernetes笔记(一):十分钟部署一套K8s环境 介绍了如何快速搭建一个k8s系统.为了继续使用k8s来部署我们的应用,需要先对k8s中的一些基本组件与概念有个了解. Kubernete ...
随机推荐
- ingsollrang英格索兰IC直流电动拧紧控制器维修
随着智能装配的概念逐渐在行业内推广,质量管理已成为实现智能装配过程中的一个重要环节,许多客户都有着数据记录.扭矩检测的需求,英格索兰的多种拧紧工具配合控制器,可以满足从基本拧紧到质量管理的一系列需求, ...
- SpringBoot - [02] 第一个SpringBoot程序
jdk maven3.6.3 springboot最新版 idea 如果使用官网 Spring Initializr ,则需要jdk17.21.22,并且是Springboot3.x 可以在idea创 ...
- Flink学习（十三） Flink 常见核心概念分析
分布式缓存熟悉 Hadoop 的你应该知道,分布式缓存最初的思想诞生于 Hadoop 框架,Hadoop 会将一些数据或者文件缓存在 HDFS 上,在分布式环境中让所有的计算节点调用同一个配置文件.在 ...
- WPF无边框的一个方案（保留默认窗口的拖动、阴影等效果）
使用 WindowStyle="None" AllowsTransparency="True" 的方式达成无边框的效果有很多无法忽视的缺陷,比如失去了拖动效果. ...
- luogu-P3262题解
简要题意 有一棵不超过十层的满二叉树,需要对每个节点进行染色.每个叶子节点会对其颜色相同的祖先节点产生贡献且黑白贡献不同.求最大贡献. 题解 首先我会暴力!我如果直接暴力枚举每个节点的颜色,复杂度就是 ...
- mysql 登录提示 “is not allowed to connect to this mysql server”
解决方法一 执行 mysql -u root -p 然后输入密码登陆mysql GRANT ALL PRIVILEGES ON . TO 'myuser'@'%' IDENTIFIED BY 'myp ...
- Oracle 23ai TPC-H 测试环境部署
最近,我在 Oracle Database 23ai 上进行了 TPC-H 100GB 测试,并整理了完整的实施步骤和优化经验.如果你也想评估 Oracle 数据库在决策支持场景下的性能,可以参考我的 ...
- Netty基础—2.网络编程基础二
大纲 1.网络编程简介 2.BIO网络编程 3.AIO网络编程 4.NIO网络编程之Buffer 5.NIO网络编程之实战 6.NIO网络编程之Reactor模式 1.网络编程简介 既然是通信,那么肯 ...
- [tldr] vscode的remote插件的config文件内容解析
参考VS Code Remote SSH配置 解决了什么问题 vscode的remote插件可以直接通过可视化的UI新建一个连接 通过ssh指令添加服务器的连接方式 但是这种方式添加的服务器名字等于服 ...
- github520cli解决无法github访问问题
github并没有被GFW直接墙掉,而是因为DNS污染导致经常无法访问 访问的时候经常出现push或者pull代码的时间很长,出现无法访问仓库,请检查是否有权限的报错,这可能就是被DNS污染了 如何解 ...