【Vue3】起步

学习委员

关注

发布于: 2021 年 05 月 04 日

前言

Vue3 中文文档

Vue 是一套用于构建用户界面的渐进式框架，作为当今前端三大框架之一，Vue 是我觉得最容易上手的框架。

本文是我学习 Vue 3 笔记的第一篇，把常用的知识点整理成一个小册。

需要声明的是，Vue 3 提供了 CompositionAPI 的语法，而很多文章也大肆宣传该语法，从而让部分开发者以为新版不再兼容 Vue 2 的语法了。

但其实 Vue 3 同样兼容大部分 Vue 2 的语法。

安装

Vue 3 有几种安装方式

npm 方面， Vue 官方提供 vue-cli 和 Vite 两种搭建方式。

而对于学习笔记来说，最主要是快，能直接在浏览器跑起来，所以本文会使用 CDN 的方式开发。

CDN 的安装方式直接在 html 文件中使用以下代码，即可使用最新版本的 Vue

<script src="https://unpkg.com/vue@next"></script>

复制代码

点击查看官方说明

快速上手

Vue 采用了一套简洁的模板语法来声明式地将数据渲染进 DOM 的系统，通过双花括号动态读取响应式数据。

以下例子来自官方文档

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>hello world</title>  <script src="https://unpkg.com/vue@next"></script></head><body>  <!-- vue监听的容器元素 -->  <div id="root"></div>
  <script>    Vue.createApp({      data() {        return {          content: 1 // 响应式数据        }      },      mounted() {        // 每隔1秒 content 自加 1        setInterval(() => {          this.content += 1        }, 1000)      },      // 模板，把 content 这个响应式数据插入到html中。      // 每当 content 的数据发生改变，页面也会随之响应      template: '<div>{{content}}</div>'    }).mount('#root')
    // 使用 mount 绑定要监听的元素  </script></body></html>

复制代码

在浏览器打开该页面，可以看到页面的变化。

误区

Vue 3 不再兼容 Vue 2 语法。
Vue 项目必须通过脚手架搭建。有些小白刚学 Vue 时就找一份用脚手架搭建项目的教程来学，并不知道可以用 CDN 的方式去创建项目。

项目代码

项目总地址：Hello Vue3

本节笔记地址：01 Vue3 起步

创作场景

【Vue3】起步

前言

安装

快速上手

误区

项目代码

延伸阅读

学习委员

评论