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

自学前端开发 - 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
1
```
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。之后将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示。如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
```
cd <your-project-name>
npm install
npm run dev
1
2
3
```
现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和

 文件引入

可以使用 CDN 引入
```
<script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
1
```
这里使用了 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>


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
```
1. 使用ES模块版本：注意使用

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

vue 学习之前

vue 的使用环境

npm 引入

文件引入