theme: vue-pro
前言
Vue 是一套用于构建用户界面的渐进式框架，作为当今前端三大框架之一，Vue 是我觉得最容易上手的框架。
本文是我学习 Vue 3 笔记的第一篇，把常用的知识点整理成一个小册。
需要声明的是，Vue 3 提供了 CompositionAPI 的语法，而很多文章也大肆宣传该语法，从而让部分开发者以为新版不再兼容 Vue 2 的语法了。
但其实 Vue 3 同样兼容大部分 Vue 2 的语法。
安装
Vue 3 有几种安装方式
- CDN
- npm
npm 方面， Vue 官方提供 vue-cli 和 Vite 两种搭建方式。
而对于学习笔记来说，最主要是快，能直接在浏览器跑起来，所以本文会使用 CDN 的方式开发。
CDN 的安装方式直接在 html 文件中使用以下代码，即可使用最新版本的 Vue
<script src="https://unpkg.com/vue@next"></script>快速上手
Vue 采用了一套简洁的模板语法来声明式地将数据渲染进 DOM 的系统，通过双花括号动态读取响应式数据。
以下例子来自
代码语言：javascript复制<!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的方式去创建项目。
