Vue3 学习-初识体验-helloworld
在数据分析中有一个最重要的一环就是数据可视化, 数据报表的开发. 从我从业这几年的经历上看, 经历了从业务系统导表格数据, 到Excel+PPT, 再是开源报表工具, 再是主流商业BI产品(低/零代码平台), 最后又回归到数据产品开发.这些过程在不同场景仍然是交替应用着.对我而言, 基于移动端的商业数据BI还是我的刚需,要达到用户体验好的层面,还是得通过标准开发来实现.
好在现在的前端已经逐渐"工具化", 学一个框架搭搭积木就能满足我绝大多数需求, 觉得还是有必要学一波前端的.
Vue 的几点认识
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
对我来说, 主要是其学习成本很低, 能快速掌握, 其中几个特点我还是很感兴趣的. (我学的是3的版本哈)
- 声明式渲染
- 响应式的数据驱动
- 单文件组件 (组件即页面的一部分, 类似模块也行吧; 单文件就是将 模板, 逻辑, 样式写在一个.vue的文件中)
- Composition API
前期为了方便演示还是用 Options API 来演示组件逻辑 (即像2.x的 data, methods, mounted ...等)
HelloWorld 演示
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
template: `<div>hello, world!</div>`
}).mount('#root')
</script>
</body>
</html>
这里即将这个Vue的一个实例 App 挂载到了这个 id 为 "root" 的 div元素节点上, 并将 template 的dom也挂在了该节点中.
插值表达式语法 {{ }}
其实就跟很多后端语言的模板变量一样的, 里面可以放变量, 可以放 js 表达式.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
content: 666
}
},
mounted () {
console.log('mounted () 页面加载就会执行这个函数哦~')
},
template: `<div>{{content}}</div>`
}).mount('#root')
</script>
</body>
</html>
data () 这里会返回一些数据, 如 content, 然后能应用于模板, 响应式变化.
案例-定时器实现数字自动累加
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
content: 1
}
},
mounted () {
setInterval(() => {
this.$data.content += 1
}, 1000);
},
template: `<div>{{content}}</div>`
}).mount('#root')
</script>
</body>
</html>
这样页面每隔一秒就自动加一啦. Vue的一个初体验就到这里啦, 还是蛮简单的.
Vue3 学习-初识体验-helloworld的更多相关文章
- 在Windows环境中开始Docker的学习和体验
研究docker有一段时间了,当然我主要的使用环境还是在Linux中,确实很方便. 但也有不少朋友希望使用Windows来工作学习,这里介绍一下在Windows中如何快速开始Docker的学习和体验吧 ...
- NDK学习4: Eclipse HelloWorld
NDK学习4: Eclipse HelloWorld 1.配置Eclipse NDK环境 Window->preferences->android->ndk 2.新建Andro ...
- Zend Framework学习日记(2)--HelloWorld篇(转)
Zend Framework学习日记(2)--HelloWorld篇 这一篇主要演示如何用zf命令行工具建立一个基于Zend Framework框架的工程,也是我初学Zend Framework的小练 ...
- Spring MVC 学习笔记一 HelloWorld
Spring MVC 学习笔记一 HelloWorld Spring MVC 的使用可以按照以下步骤进行(使用Eclipse): 加入JAR包 在web.xml中配置DispatcherServlet ...
- MOOS学习笔记2——HelloWorld回调
MOOS学习笔记2--HelloWorld回调 例程 #include "MOOS/libMOOS/Comms/MOOSAsyncCommClient.h" bool OnConn ...
- MOOS学习笔记1——HelloWorld
MOOS学习笔记1--HelloWorld 例程 /* * @功能:通讯客户端的最简单程序,向MOOSDB发送名为"Greeting" * 数据"Hello", ...
- Vue3学习（七）之 列表界面数据展示
一.前言 昨晚可能是因为更新完文章后,导致过于兴奋睡不着(写代码确实太容易让人兴奋了),结果两点多才睡着,大东北果然还是太冷了. 不知道是不是因为膝盖和脚都是冰凉的,所以才导致很晚才能入睡? 刚眯了一 ...
- Vue3学习（十一）之 table表格组件的使用
一.前言 大约有两周没学习更文,不是懒,而是没心情,相亲路屡战屡败,着实很影响心情. 我想这世上对我而言,最难的事,莫过于恋爱结婚了,再一次经历了见光死的高光时刻. 二.又见Ant Design Vu ...
- python--基础学习（一）开发环境搭建，体验HelloWorld
python学习之前 最近想用python写爬虫,由于之前没接触过,所以从零开始,找了技术博文大概了解下基础. 印象比较深的是"python你不去认识它,可能没什么,一旦你认识了它,你就会爱 ...
- ⚡ vue3 全家桶体验
前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述.由于 ...
随机推荐
- Dev Express WPF 在当前界面显示进度加载等待信息
执行耗时任务时,为提高用户体验,一般会添加进度状态信息.Dev Express 的 LoadingDecorator 可以实现在当前界面中显示进度信息. 效果图如下: 默认 LoadingDecora ...
- PD还是QC？快充协议全解析
什么是快充协议 快充协议是一种通过提高充电效率来缩短设备充电时间的电池充电技术.它是通过在充电器和设备之间建立一种沟通机制,充电器能够根据设备的需求和状态,调整输出的电压和电流.这种沟通机制由快充协议 ...
- 使用vscode开发微信小程序
1. 安装插件 2. 文件-打开文件夹-将新建的微信小程序导入,代码会有高亮的效果 3. 编辑内容,查看效果,如果有就说明插件引入成功.
- 【Unity】光照解决方案笔记
[Unity]光照解决方案笔记 https://docs.unity.cn/cn/2022.3/Manual/BestPracticeLightingPipelines.html 确定对象显示效果的三 ...
- php 获取post方法payload(json)形式参数的方法
用默认get方式传递的时候,接收方式没有改变,仍然是$_GET. 但是用post方式传递数据的时候,用$_POST无法接收数据,应为小程序默认post发送的content-type为applicati ...
- Ubuntu通过VMware虚拟机安装步骤
1.下载Ubuntu系统镜像 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.这个错误需要BIOS CPU里面设置一下,具体问度娘. 18 ...
- 一次客户演讲PPT 反思
一 演讲ppt正常 制作流程: 编写演讲纲 与客户确认 确认通过后编写演讲稿 制作PPT 二 过程反思点 写纲前 与客户对接,了解需求及想法,最好音频记录 任务紧张程度.重要性想办法理清楚(领导跟踪情 ...
- wxFormBuilder 代码运行报错，尝试删除报错代码部分语句
解决方法: 定位到第60行,删掉部分代码如下 bSizer1.Add(gbSizer1, 1, wx.EXPAND , 1) 运行后效果如下图:
- mysql 表的创建，修改，删除
查看数据库所有表 show tables 创建 create table 表名 ( 列名 类型 约束条件 ... ) 类型有整形: tinyint(1B) ,smallint(2B),mediumin ...
- docker login harbor http login登录
前言 搭建的 harbor 仓库为 http 协议,在本地登录时出现如下报错: docker login http://192.168.xx.xx Username: admin Password: ...