前端_Vue_1.初识Vue

---

一、前言

自动化行业一般桌面程序比较多，最近发现现场有许多网页版的系统，客户说网页系统比较方便，输个IP就能访问了。

确实，这是B/S相对于C/S一个很大的优势。
既然客户喜欢，为了增加自身竞争力，我也得做起来。

但我已经很久没接触网页了，上次写还是用最原始的HTML、CSS和JS。
于是，第一步我决定进行技术选型，了解一下现有的新型网页技术（指前端）。通过一些招聘网、技术群，我发现 Vue 和 React ，这两种技术出现的比较多。所以我决定从这两者中进行选择。稍微了解了下这两者，发现许多人认为两者是差不多的，学了其中一个后，再学另一个会很快。但相对来讲， Vue 可能更适合小白。既然如此，我就选择了从 Vue 开始。

---

二、开始

1 简介

关于Vue是什么，特性、语法怎样，官方文档有详细介绍。
它的网址是https://cn.vuejs.org/

本文主要摘取其中几个重点，记录学习。由于笔者是个Web开发小白，许多基本语法都不清楚，所以有时遇到一些基础知识也会从头去学。

1.1 什么是Vue？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

下面是一个最基本的示例：

// js
import { createApp } from 'vue'
createApp({
	data() {
		return {
			count: 0
		}
	}
}).mount('#app')
1
2
3
4
5
6
7
8
9

<div id="app">
	<button @click="count++">
		Count is: {{ count }}
	button>
div>
1
2
3
4
5
6

该示例展示了 Vue 的两个核心功能：

• 声明式渲染： Vue基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系。
• 响应式：Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。

你可能已经有了许多疑问——先别急，后续我们会详细介绍每一个细节。现在，请先继续看下去，确保对Vue框架有一个宏观的了解。

声明式，
声明式这个词在其他语言中也会遇到，通俗的解释网上有一大堆，一般会和命令式做比较，声明式就是“告诉机器你要做什么，机器会自己去做”；命令式就是“告诉机器每一步应该怎么做”。可见，声明式代码更加内聚，高度抽象，屏蔽了许多细节。
声明式交代的是一整件事情；命令式是交代每一步怎么行动。

1.2 渐进式框架

Vue是一个框架，也是一个生态。Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。
根据你的需求场景，你可以用不同的方式使用 Vue：

• 无需构建步骤，渐进式增强静态的 HTML
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

为什么将 Vue 称为“渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。

我的理解是非常适合边学边用的框架。

1.3 单文件组件

在大多数使用了构建工具的Vue项目中，我们可以使用一种类似HTML格式的文件来书写Vue组件，它被称为单文件组件（也被称为 .vue ，英文Single-File Components，缩写为SFC）。顾名思义，Vue的单文件组件会将一个组件的逻辑（JavaScript），模板（HTML）和样式（CSS）封装在同一个文件里。

<script>
export default {
	data() {
		return {
			count : 0
		}
	}
}
script>

<template>
	<button @click="count++">Count is: {{ count }} button>
template>

<style scoped>
button {
	font-weight: bold;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

单文件组件是Vue的标志性功能。如果你的用例需要进行构建，官方推荐用它来编写Vue组件。

这个功能我挺感兴趣的，有点类似自定义控件的感觉，且控件相关的一切都放在一个文件中，
可复用。

1.4. API风格

Vue的组件可以按两种不同的风格书写：选项式API和组合式API。

1.4.1. 选项式API（Options API）

使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如data、methods和mounted。选项所定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

<script>
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件监听器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

作为新手，我感觉这种选项式特别整洁清晰。
就像在代码中定义了各种下拉选项框，要添加属性，就往选项框中加项；要用某个属性或者方法，只需要选择对应的项即可。

1.4.2. 组合式API（Composition API）

通过组合式API，我们可以使用导入的API函数来描述组件逻辑。在单文件组件中，组合式API通常会与