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 ...
随机推荐
- day:2 软件测试流程——H模型
软件测试流程_H 模型 一.详细流程 1.产品召开需求澄清会议,产品.开发.测试都参加 2.测试和开发拿到需求 3.测试经理拿到需求,根据需求编写测试计划 测试计划(内容:测试目的,背景,范围,测试准 ...
- idea debug时提示”Method breakpoints may dramatically slow down debugging“的解决办法
- try catch异常捕获工具类
异常捕获工具类 package com.example.multiThreadTransaction_demo.utils; import lombok.extern.slf4j.Slf4j; imp ...
- linux系统升级/更新OpenSSL版本操作流程记录
问题描述:有时OpenSSL版本过老升级,或者需要更新OpenSSL版本 1.登录linux系统后输入openssl version 查看现在使用的版本 我的输入后版本信息为:OpenSSL 1.1. ...
- PHP检测用户是否关闭浏览器的方法
1.例子1 echo str_repeat(" ",3000); ignore_user_abort(true); mylog('online'); while (true) { ...
- 深入解析 Druid 连接池：连接有效性检测与 Keep-Alive 机制
背景 在 Java 程序中,下面是一个经常会碰到的错误. Caused by: com.mysql.cj.exceptions.CJCommunicationsException: Communica ...
- python正则表达式笔记2
由 '\' 和一个字符组成的特殊序列在以下列出. 如果普通字符不是ASCII数位或者ASCII字母,那么正则样式将匹配第二个字符.比如,\$ 匹配字符 '$'. \number匹配数字代表的组合.每个 ...
- mysql-8.0.19-winx64.zip 的安装与卸载
一.安装 1.下载mysql 官网:https://dev.mysql.com/downloads/mysql/,本人用的目前的最新版本8.0.19,版本格式为zip,如下图 2.解压到指定路径,如下 ...
- anaconda创建新环境
博客地址:https://www.cnblogs.com/zylyehuo/ anaconda创建新环境 conda create -n 环境自定义的名称 python=版本号 anaconda指定路 ...
- Linux-两台Linux服务器间设置共享文件夹（NFS服务器）
一.环境信息服务器1:192.168.120.141 文件夹:/opt服务器2:192.168.120.142 文件夹:/opt将服务器1的/opt文件夹共享到服务器2的/ ...