自学前端开发 - VUE 框架 (一): 基础、模板语法、响应式基础、Class 与 Style 的绑定、渲染

@[TOC](自学前端开发 - VUE 框架 (一) 基础、模板语法、响应式基础、Class 与 Style 的绑定、渲染)
前端有一些比较流行的框架，例如 react.js、angular.js、jQuery 等，Vue.js 也是其中之一。Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助程序员高效地开发用户界面。

vue 和 jQuery 除了完成特效方面稍微重叠，其他方面的定位是不同的：jQuery 主要定位是获取元素，Vue 的定位是方便操作及控制数据。

Vue.js 官网
Vue 官方文档

vue 学习之前

在学习 vue 之前，有一些准备工作：

• vue 的环境
  主要是 vue 的使用方式
• vue 的使用风格
  vue 本身有很多风格可以使用，例如传统 html 文件和单文件组件、选项式API和组合式API等

vue 的使用环境

vue 支持 npm 引入和文件(CDN)引入。

npm 引入

使用 npm 工具执行命令

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。之后将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示。如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name>
npm install
npm run dev

现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和

文件引入

可以使用 CDN 引入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

这里使用了 unpkg，也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs。当然，也可以下载此文件并自行提供服务。

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是将无法使用单文件组件 (SFC) 语法。

使用文件引入，也有几种使用版本：

1. 全局构建版本：该版本的所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{
  { message }}</div>

<script>
  const {
      createApp } = Vue
  
  createApp({
     
    data() {
     
      return {
     
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
<!-- 脚本部分也可以写成 -->
<!-- 	<script>
		Vue.createApp({
			data() {
				return {
					message: 'Hello Vue!'
				}
			}
		}).mount('#app')
	</script> -->

2. 使用ES模块版本：注意使用 <script type="module">，且导入的 CDN 指向的是 ES 模块构建版本

<div id="app">{
  { message }}</div>

<script type="module">
  import {
      createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
  createApp({
     
    data() {
     
      return {
     
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

3. 使用导入映射表(Import Maps)版本

<script type="importmap">
  {
     
    "imports": {
     
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{
  { message }}</div>

<script type="module">
  import {
      createApp } from 'vue'

  createApp({
     
    data() {
     
      return {
     
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

vue 的使用风格

vue 的文件格式

vue 可以在 html 中直接使用，或创建为单文件组件使用。在 html 中使用类似于普通的 js 或 jQuery 之类的使用方式。在大多数启用了构建工具的 Vue 项目中，可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件。 顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。官方推荐使用这种方法来编写模块化的组件。

在初学阶段，只学习 html 使用方式。

vue 的 api 代码风格

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

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

通过组合式 API，可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。

在简单学习阶段，将使用选项式API风格。

vue 开发辅助工具

官方推荐安装浏览器开发者插件，使我们可以浏览一个 Vue 应用的组件树，查看各个组件的状态，追踪状态管理的事件，还可以进行组件性能分析。

下载并让浏览器加载插件：vuejs-devtools。

vue 基础

vue.js 的 M-V-VM 架构

和 MVC、MTV 架构类似，vue 采用了 MVVM(Model-View-ViewModel) 架构思想，它是一种基于前端开发的架构模式。

• Model : 指的是 vue 对象里的 data 属性里的数据，将会渲染至页面中去。
• View : 指的是 vue 对象要渲染的HTML页面，也称为“视图模板”。
• ViewModel : 指的是编写代码时的创建的应用实例对象，它是 vue.js 的核心，负责监控、连接 view 和 model，保证视图和数据的一致性。

创建 vue 应用

应用实例

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：

import {
    createApp } from 'vue'

const app = createApp({
   
  /* 根组件选项 */
})

根组件

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个**“根组件”，其他组件将作为其子组件**。根组件可以使用根组件模板或自定义的单文件组件。使用根组件模板时，Vue 将自动使用容器的 innerHTML 作为模板。

import {
    createApp } from 'vue'

const app = createApp({
   
	/* 根组件选项 */
	data(){
   
  		return {
   
  			count: 0
  		}
	}
})

data 组件可以使用数据填充模板。

挂载应用

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

<div id="app"></div>

app.mount('#app')

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。

应用配置

应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项，例如定义一个应用级的错误处理器，它将捕获所有由子组件上抛而未被处理的错误：

app.config.errorHandler = (err) => {
   
  /* 处理错误 */
}

多个应用实例

应用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。

const app1 = createApp({
   
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
   
  /* ... */
})
app2.