|
|
|
|
# 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，就行了。】
|
|
|
|
|
|
