在数据分析中有一个最重要的一环就是数据可视化, 数据报表的开发. 从我从业这几年的经历上看, 经历了从业务系统导表格数据, 到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. 并发编程 - 线程同步（八）之自旋锁SpinLock

    前面对互斥锁Monitor进行了详细学习,今天我们将继续学习,一种更轻量级的锁--自旋锁SpinLock. 在 C# 中,SpinLock是一个高效的自旋锁实现,用于提供一种轻量级的锁机制.SpinL ...

  2. 解决easyexcel合并单元格数组求和重复问题

    背景 EasyExcel(根据条件动态合并单元格的重复数据))_Violet-CSDN博客_easyexcel动态合并单元格现有的订单导出是使用的easyExcel完成的.对于相同单元格的合并是自定义 ...

  3. AI图像翻译

    在当今互联互通的世界中,快速准确地翻译图像中的文本的能力非常宝贵.无论您是商务人士.教育工作者.设计师还是内容创作者,Visual Paradigm Online 的 AI 图像翻译器都能提供强大的解 ...

  4. Typecho 引入 DPlayer

    想在文章中插入视频,尝试 iframe 和 video 标签后发现 m3u8 流会触发下载无法播放,用 hls 该问题后,碰到了 403 forbbiden.联想到前些天新浪图床加 referrer ...

  5. MySQL - [08] 存储过程

    题记部分 一.什么是存储过程   存储过程是事先经过编译并存储在数据库中的一段SQL语句的集合,调用存储过程可以简化应用开发人员的很多工作,减少数据在数据库和应用服务器之间的传输,对于提高数据处理的效 ...

  6. ABC391D题解

    前置知识: map priority_queue 思路 考虑预处理每一个图块在第几秒后会被删除. 如何预处理?我使用了一种非常暴力的做法,首先处理的过程肯定是从下往上的,于是每一个图块能被删除一定是它 ...

  7. 当懒惰遇上AI：我如何用Coze让大模型帮我整理2.5万字课程笔记

    能写代码绝不动手,能用AI绝不写代码 -- AI粉嫩特攻队信条 通过本文学会打造这个AI工具,只有一个要求:识字且会上网! 一个小困扰 有朋友最近在上一位大佬的线上直播课程,感叹道: "老师 ...

  8. Pycharm pull 报错“Pull Failed: refusing to merge unrelated histories”

    分析: 在github已将建立仓库 pycharm clone到本地 pycharm pull 在第3步报错 "Pull Failed: refusing to merge unrelate ...

  9. Visio绘制时间轴安排图的方法

      本文介绍基于Visio软件绘制时间轴.日程安排图.时间进度图等的方法.   在很多学习.工作场合中,我们往往需要绘制如下所示的一些带有具体时间进度的日程安排.工作流程.项目进展等可视化图表.    ...

  10. JMeter 线程编号 __threadNum 获取不到

    场景: 在 BeanShell PreProcessor 中,使用 vars.get("__threadNum") 获取不到当前线程数,如: import org.apache.j ...