【Vue3从入门到项目实现】前置知识及Vue基础

概念

理论基础

MVC 架构（以JavaWeb举例）

• M ：Model，（pojo、service、dao等）
• V ：View，（JSP, HTML等）
• C：Controller (servlet)

MVVC 架构（以Vue举例）

• M ：Model，对于data中的数据（JS对象）
• V ：View，模板（DOM）
• VC：视图模型， vue实例对象 （根据数据操作DOM，双向绑定）

npm基本概念

npm全称是node package manager（包管理工具）；npm和maven、gradle十分相似。但是maven与gradle是用来管理Java jar包的，而npm是用来管理js的。

WebPack基本概念

webpack是一个打包器（bundler），它能将多个js文件打包成一个文件（其实不止能打包js文件，也能打包其他类型的文件，比如css文件，json文件等）。

HTML、CSS、JavaScript

菜鸟教程学习：
https://www.runoob.com/html/html5-intro.html

Vue基础学习

推荐使用官网的教程，互动教学，简单快速！
https://cn.vuejs.org/tutorial/#step-1

补充一些官网教程没有的。可以有所了解，用的时候再查。

Object.defineProperty()

给对象添加属性，还可以设置get() set()方法

event

event的常用姿势：
event.preventDefault()

<a href="https://www.baidu.com" onclick="func0(event)">超链接</a>

function func0(event) {
	event.preventDefault()
}

键盘事件

键盘事件
以 @keyup.xxx 当键盘弹起 事件 为例：

watch 监视

还有一个深度监视

被vue管理的函数，最好写成普通函数
不被vue管理的函数，最好写成箭头函数

VSCode插件

• Live Server
• Auto Close Tag
• Auto Rename Tag
• Vetur
• Vue 3 Snippets
• JavaScript (ES6) code snippets
• HTML CSS Support
• Markdown Preview Enhanced

浏览器扩展

• Vue Devtools