写点什么

【Vue3】起步

用户头像
学习委员
关注
发布于: 2021 年 05 月 04 日
【Vue3】起步

前言

Vue3 中文文档


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


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


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


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


安装

Vue 3 有几种安装方式


  1. CDN

  2. npm


npm 方面, Vue 官方提供 vue-cliVite 两种搭建方式。


而对于学习笔记来说,最主要是快,能直接在浏览器跑起来,所以本文会使用 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>
复制代码


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


误区

  1. Vue 3 不再兼容 Vue 2 语法。

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


项目代码

项目总地址:Hello Vue3

本节笔记地址:01 Vue3 起步


延伸阅读

发布于: 2021 年 05 月 04 日阅读数: 32
用户头像

学习委员

关注

反派 2019.03.19 加入

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

评论

发布
暂无评论
【Vue3】起步