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的一个初体验就到这里啦, 还是蛮简单的.

posted @ 2022-08-21 15:04  致于数据科学家的小陈  阅读(304)  评论(0)  编辑  收藏  举报