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 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述.由于 ...
随机推荐
- 并发编程 - 线程同步（八）之自旋锁SpinLock
前面对互斥锁Monitor进行了详细学习,今天我们将继续学习,一种更轻量级的锁--自旋锁SpinLock. 在 C# 中,SpinLock是一个高效的自旋锁实现,用于提供一种轻量级的锁机制.SpinL ...
- 安装mysql报错5.7.13-Table 'mysql.user' doesn't existFor more information
临时写的一个小系统客户要求用mysql,所以下载一个来研究下.解压后开始配置my.ini 配置my.ini [mysql]# 设置mysql客户端默认字符集default-character-set= ...
- Flink学习（十六） ProcessFunctionAPI（底层API）
我们之前学习的转换算子是无法访问时间的时间戳信息和水位线信息的.而这些在一些应用场景下,极为重要,例如MapFunction这样的map转换算子就无法访问时间戳或者当前事件的事件时间. 基于此,Dat ...
- 使用 SK 进行向量操作
先祝大家 2025 新年好. 在 2024 年落地的 LLM 应用来看,基本上都是结合 RAG 技术来使用的.因为绝大多数人跟公司是没有 fine-turning 的能力的.不管是在难度还是成本的角度 ...
- Polar困难模式部分题解
choose from pwn import *from LibcSearcher import *context.terminal = ["tmux","splitw& ...
- javascript 利用 Math.min 与 Math.max 优化逻辑判断
文章同步发布:https://blog.jijian.link/2020-04-08/js-math-min-max/ Math.min 和 Math.max 方法常用来获取多个数值的最小值和最大值, ...
- 测试驱动开发（TDD）浅析
.wj_nav { display: inline-block; width: 100%; margin-bottom: 0.375rem } .wj_nav span { display: inli ...
- 办公自动化-批量更新tar包内文件
最近工作有点忙,学习的时间也少了,为了提高工作效率,有时候我们需要自己写一些提高办公处理效率给的工具或者脚本或者程序. 比如,我目前遇到的一个事项,需要更新很多个tar包文件,把tar包内的某个文件替 ...
- go 语言中的占位符详解
在 Go 语言的 fmt 包中,占位符用于格式化输出,允许在输出时插入变量的值.以下是一些常用的占位符及其用法: 通用占位符: %v:按照值的默认格式输出. %+v:输出结构体时,会添加字段名. %# ...
- 阿里云ECS服务器Ubuntu下安装docker-ce技巧
官方文档 先来份Ubuntu 下安装 docker 的官方文档 -> Get Docker CE for Ubuntu 官方文档的安装方式是最靠谱的,但是对于国内的小伙伴来说墙是硬伤... 国内 ...