|
|
|
|
# Vue3 学习笔记
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
> 这是Vue3的学习笔记，内容可能会有一部分和V2重复。
|
|
|
|
|
|
|
|
|
|
首先是快速来认识Vue是用来干嘛的。
|
|
|
|
|
|
|
|
|
|
Vue 是一个前端框架，同时他可以让你在一个网页中实现多个子页的效果的单页面应用程序。
|
|
|
|
|
|
|
|
|
|
它所采用的思想是通过组件化思想来实现的。也就是有点想数据结构中的二叉树的样子，不过区别就是二叉树的节点是叫做叶节点，而在Vue中就称之为组件【或模板】。
|
|
|
|
|
|
|
|
|
|
OK，大概认识了Vue是啥东东之后，就开始学习它的基础概念和思想。
|
|
|
|
|
|
|
|
|
|
首先，先学习vue的语法结构，毕竟是一个框架，肯定有着一套独特书写格式。
|
|
|
|
|
|
|
|
|
|
实例：
|
|
|
|
|
|
|
|
|
|
```vue
|
|
|
|
|
<span> {{ msg }} </span>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
这是展示内容的格式，不错，和Java 的JSP很像。
|
|
|
|
|
|
|
|
|
|
单个应用实例：
|
|
|
|
|
|
|
|
|
|
```vue
|
|
|
|
|
import { createApp } from 'vue'
|
|
|
|
|
|
|
|
|
|
const app = createApp({
|
|
|
|
|
/* 根组件选项 */
|
|
|
|
|
})
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
这就是vue的核心实体。通过一个createAPP来创建一个实例。而根组件选项则可以填`data`对象，并返回。
|
|
|
|
|
|
|
|
|
|
如下：
|
|
|
|
|
|
|
|
|
|
```vue
|
|
|
|
|
import { createApp } from 'vue'
|
|
|
|
|
|
|
|
|
|
const app = createApp({
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
count: 0
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
完整的实例：
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<link rel="icon" href="/favicon.ico">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Vite App</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<div> {{ count }} </div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
import { createApp } from 'vue'
|
|
|
|
|
|
|
|
|
|
const app = createApp({
|
|
|
|
|
el: '#app',
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
count: 0
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
得咯~这样就实现了Vue框架的搭建了。【当然我这里省去了文件引入，其实还是要引入框架的vue.js，就行了。】
|
|
|
|
|
|
|
|
|
|
data 是一个对象，或者是一个模型，因为框架采用MVVM的思想。即模型-视图双向绑定的意思。
|
|
|
|
|
|
|
|
|
|
说到这里不得不提最经典的站点模型，即MVC，又称 视图 - 控制器 - 模型。
|
|
|
|
|
|
|
|
|
|
这个模型是至今还有人采用的最常用的开发模型。虽然它可能在某些方面会老套，但在现有的框架开发中，很多服务，技术都是采用了这个MVC的经典的思想模型。
|
|
|
|
|
|
|
|
|
|
回归框架中，通过MVVM的模型，我们可以实时看到我们所开发的Vue项目所处理的数据状态。
|
|
|
|
|
|
|
|
|
|
OK，至此学完了如何使用vue和了解Vue是啥，干嘛用。
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 第二章 生命周期
|
|
|
|
|
|
|
|
|
|
在vue中，只有Vue所new 出来的 对象【实例】有steup，
|
