在数据分析中有一个最重要的一环就是数据可视化, 数据报表的开发. 从我从业这几年的经历上看, 经历了从业务系统导表格数据, 到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的更多相关文章

  1. 在Windows环境中开始Docker的学习和体验

    研究docker有一段时间了,当然我主要的使用环境还是在Linux中,确实很方便. 但也有不少朋友希望使用Windows来工作学习,这里介绍一下在Windows中如何快速开始Docker的学习和体验吧 ...

  2. NDK学习4: Eclipse HelloWorld

    NDK学习4: Eclipse HelloWorld 1.配置Eclipse NDK环境  Window->preferences->android->ndk   2.新建Andro ...

  3. Zend Framework学习日记(2)--HelloWorld篇(转)

    Zend Framework学习日记(2)--HelloWorld篇 这一篇主要演示如何用zf命令行工具建立一个基于Zend Framework框架的工程,也是我初学Zend Framework的小练 ...

  4. Spring MVC 学习笔记一 HelloWorld

    Spring MVC 学习笔记一 HelloWorld Spring MVC 的使用可以按照以下步骤进行(使用Eclipse): 加入JAR包 在web.xml中配置DispatcherServlet ...

  5. MOOS学习笔记2——HelloWorld回调

    MOOS学习笔记2--HelloWorld回调 例程 #include "MOOS/libMOOS/Comms/MOOSAsyncCommClient.h" bool OnConn ...

  6. MOOS学习笔记1——HelloWorld

    MOOS学习笔记1--HelloWorld 例程 /* * @功能:通讯客户端的最简单程序,向MOOSDB发送名为"Greeting" * 数据"Hello", ...

  7. Vue3学习（七）之 列表界面数据展示

    一.前言 昨晚可能是因为更新完文章后,导致过于兴奋睡不着(写代码确实太容易让人兴奋了),结果两点多才睡着,大东北果然还是太冷了. 不知道是不是因为膝盖和脚都是冰凉的,所以才导致很晚才能入睡? 刚眯了一 ...

  8. Vue3学习（十一）之 table表格组件的使用

    一.前言 大约有两周没学习更文,不是懒,而是没心情,相亲路屡战屡败,着实很影响心情. 我想这世上对我而言,最难的事,莫过于恋爱结婚了,再一次经历了见光死的高光时刻. 二.又见Ant Design Vu ...

  9. python--基础学习（一）开发环境搭建，体验HelloWorld

    python学习之前 最近想用python写爬虫,由于之前没接触过,所以从零开始,找了技术博文大概了解下基础. 印象比较深的是"python你不去认识它,可能没什么,一旦你认识了它,你就会爱 ...

  10. ⚡ vue3 全家桶体验

    前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述.由于 ...

随机推荐

  1. [TJOI/HEOI2016] 求和 题解

    为什么又是佳媛姐姐啊啊啊! 斯特林数在这道题中不好处理,直接拆开: \[f(n)=\sum_{i=0}^n\sum_{j=0}^i\begin{Bmatrix}i\\j\end{Bmatrix}2^j ...

  2. [JOISC 2023 Day3] Tourism 题解

    大家好,我喜欢珂朵莉树,所以我用珂朵莉树 \(AC\) 了本题. 实际上,我们比较容易发现,这题实际上就是求 \([l,r]\) 中的所有点作为关键点时,虚树所压缩的所有点(实际上就是显现出来的点+在 ...

  3. QT5笔记：3.手动撸界面和可视化托界面混合

    3.手动撸界面和可视化托界面混合 参考视频:https://www.bilibili.com/video/BV1AX4y1w7Nt 3.1 工具栏可以通过在UI界面右键选择添加工具栏 3.2 设置窗口 ...

  4. Log4j2 中三种常见 File 类 Appender 对比与选择

    在 Log4j2 中,若不考虑 Rolling(支持滚动和压缩)类文件 Appender,则包含以下三种文件 Appender:FileAppender.RandomAccessFileAppende ...

  5. 【编程思想】C# delegate 委托的本质：方法对象的应用

    一.前言 翻回之前写的博客,前期写的结构确实差很多, 这次细看了<委托那些事(一).(二)>,忍不住重新写一下,之前把简单的事情复杂化了. 为什么现在思维不一样了,有一点我认为是见识的计算 ...

  6. 制作ubuntu22.04的根文件系统

    amd64 点击查看代码 制作Ubuntu 22.04的根文件系统涉及到几个关键步骤.以下是详细的步骤说明,包括创建目录结构.安装基本软件包以及配置系统. ### 步骤1:准备环境 首先,确保你的开发 ...

  7. 一个ABAQUS model需要的Component

    component of abaqus model Abaqus模型由几个不同的组件组成,它们共同描述了要分析的物理问题. a abaqus model 至少要有: discrete goemtry ...

  8. Redis压测脚本及持久化机制

    Redis压测脚本及持久化机制 Redis性能压测脚本 Redis的所有数据是保存在内存当中的,得益于内存高效的读写性能,Redis的性能是非常强悍的.但是,内存的缺点是断电即丢失,所以,在实际项目中 ...

  9. TPC-H 研究和优化尝试

    TPC-H测试提供了8张表,最近做这个测试,记录下过程中的关键点备忘. 1.整体理解TPC-H 8张表 2.建立主外键约束后测试22条SQL 3.分区表改造,确认分区字段 4.重新测试22条SQL 5 ...

  10. Django实战项目-学习任务系统-定时任务管理

    接着上期代码框架,开发第4个功能,定时任务管理,再增加一个学习定时任务表,主要用来设置周期重复性的学习任务,定时周期,定时时间,任务标题和内容,预计完成天数,奖励积分和任务状态等信息. 现实中学习一门 ...