前言：由于直接看官方文档时，有很多东西不是太理解，比如当官方文档提出“渲染”这个概念、以及为什么要使用vue
ui、为什么要使用Vite，感觉看完不是太理解，所以还是听从内心的声音，找个视频看看，ok，迈出vue学习的第0.1步~出发！
P1：vue简介
为什么需要vue？从node说起。
node，后端渲染，服务器渲染完的网页发送到客户端。前端的显示的界面view，后端的存储数据的模型model，服务器把二者拼接后发送给浏览器。
缺点：如果实际项目有Web端、移动端、PC端，现在返回的是浏览器能用的页面（model和view耦合了），那么就需要3个服务器满足以上的三种需求。
目标：一个服务器为多个客户端服务。
为了达成目标，服务器不能再返回网页，要返回JSON。这种风格叫做REST（服务器）。
然而，JSON不能直接拿来给用户看，所以需要将JSON整成Views页面。之前，我们用AJAX从服务器加载到数据，再用DOM将这些数据创建成一个个的DOM元素，将这些整合到页面里。
缺点：DOM写着麻烦，而且用DOM做这个会导致性能差。
那么，如何将views和model连起来？使用view model，这就是MVVM。vue就是一个view model。
什么是viue？官网上给出的是：
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和
JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
声明式编程，对应命令式编程，命令式需要解剖做事的每一个步骤，一步一步执行，声明式编程则是结果导向。
※组件化：前端之前的开发单位是一个页面，现在的开发单位则细分至组件，好处是再写一个网页的时候不需要重新写，代码的复用性提高。
P2：hello,vue
如何使用vue?
1、直接在网页中使用
<!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>first-vue</title>
<!-- 引入vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="挂载到这儿"></div>
<script>
//编写vue代码
//创建一个根组件，在vue3中，组件就是一个普通的js对象
//组件，用来创建组件实例，组件是组件实例的模板
//组件 --> 组件生成组件实例 --> 组件实例帮助我们创建虚拟DOM --> DOM（在页面中呈现）
// （为了提高性能，我们操作的都是虚拟DOM，真实的DOM由vue自己操作）
const Root = {
template: "<h1>我爱Vue</h1>" //模板，我们希望组件在页面中呈现的样子
}
//创建app实例
const app = Vue.createApp(Root)
//将实例挂在到页面中
app.mount("#挂载到这儿")
</script>
</body>
</html>
// 应用+挂载可以一行搞定
Vue.createApp(Root).mount("#挂载到这儿");
P3：data
重点关注代码注释部分，解释了vue是如何将views和model连在一起的：
<!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>first-vue</title>
<!-- 引入vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="here"></div>
<script>
//编写vue代码
//创建一个根组件，在vue3中，组件就是一个普通的js对象
//组件，用来创建组件实例，组件是组件实例的模板
//组件 --> 组件生成组件实例 --> 组件实例帮助我们创建虚拟DOM --> DOM（在页面中呈现）
// （为了提高性能，我们操作的都是虚拟DOM，真实的DOM由vue自己操作）
const Root = {
data() {
return {
message: "好耶！！！" //data方法返回的对象，其中的属性会自动添加到组件实例中
}
}, //data是一个函数，需要一个对象作为返回值
//在模板中可以直接访问组件实例中的属性
//在模板中可以通过{{属性名}}来访问到组件实例中的属性
template: "<h1>11111今天又是快乐的一天，{{message}}</h1>" //模板，我们希望组件在页面中呈现的样子
}
Vue.createApp(Root).mount("#here")
</script>
P4：官网上的一个小实例 --- 按钮练习
代码如下：
<!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>first-vue</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="here"></div>
<script>
//组件是用来创建组件实例的（vm）
//为什么组件不是直接用，而是用来创建组件实例的？
//因为组件需要复用，如果拿来直接用， 组件之间会相互干扰
const Root = {
data() {
return {
count: 0 //记录点击次数
//data中的数据会自动和使用它的视图绑定，数据发生变化，视图会自动刷新
}
},
template: "<button @click='count++'>点我一下</button> --- 点了{{count}}下"
}
Vue.createApp(Root).mount("#here")
</script>
P5：模板
template是模板，它决定了组件最终的样子
定义模板的方式有三种：
- 在组件中通过template属性去指定
- 直接在网页的根元素中指定【实际开发中不常用】
- 组件中通过render()直接渲染（除非特殊需要，一般不用）
关于3：使用render()等于说又回到命令式编程了，比较麻烦，只在特殊场景下使用
关于2：如果直接将模板定义到网页中，此时模板必须符合html规范。大写标签可以在template中使用，在其中作为一个字符串，而在html中会自动把大写标签转化为小写标签。
另外一点提示：
1、如果在组件中定义了template，则会优先使用template作为模板，同时根元素中的所有内容都会被替换
2、如果在组件中没有定义template，则会使用根元素根元素的innerHTML作为模板
P6：使用构建工具：vite
安装vite
yarn init -y
yarn add -D vite
yarn add vue
vue的使用方法：
1、在src-main.js中引入vue，并创建一个根组件，然后创建应用挂载到页面
import { createApp } from "vue/dist/vue.esm-bundler.js"
const App = {
data() {
return {
message: "!!!!!哈哈哈哈哈"
}
},
template: "<h1>{{message}}</h1>"
}
在index中需要有一个id为app的div,不然挂不上
createApp(App).mount("#app")
2、在package.json中配置
"scripts": {
"dev": "vite --open",
"build": "vite bulid",
"preview": "vite preview"
}
3、跑起来（终端）
yarn dev
注：1、cd输入前半段按Tab可自动补全 2、clear清屏（终端）
P7：vue组件化
区分：什么是应用，什么是组件
组件，就是一个普通的js对象，组件一般开头都是大写，因为将来是要创建组件函数的，类似一个构造函数
const App = {
}
创建应用
const app = createApp(App)
挂载到页面
const vm = App.mount("#root")
挂载完，mount()会返回一个实例，这个实例我们可以用vm接收，是根组件的实例
现在的代码是有问题的，我们需要一点一点改善我们的代码。我们把代码写在了构建工具里，使用vite对代码进行管理。
但此时只有一个js文件，为了使开发时代码结构更加清晰，我们通常会对代码进行模块化管理。main.js是主程序，主程序作为入口文件通常只做一件事：创建应用实例并挂载。创建根组件和主程序功能不相关，通常我们会把它提出来。
在src下新建一个App.js把根组件提出去，并把const App改为export default把它作为一个默认的导出向外暴露。返回到main.js中import App from "./App"把App.js引进来。这样一个组件一个文件，结构更加清晰。
创建按钮，代码如下：
export default {
data() {
return {
message: "!!!!!哈哈哈哈哈",
count: 0
}
},
template: `
<h1>{{message}}</h1>
<button @click='count++'>点我一下</button>{{count}}
<button @click='count++'>点我一下</button>{{count}}
<button @click='count++'>点我一下</button>{{count}}
<button @click='count++'>点我一下</button>{{count}}
`
}
得到结果如下，同步更新，除非给count编号，较为麻烦。
为了增强代码的复用性，使代码组件化，我们进行以下操作：
1、封装一个自定义的按钮组件MyButton.js
//创建一个子组件
export default {
data() {
return {
count: 0
}
},
template: `
<div>
<h4>这是我的子组件</h4>
<button @click='count++'>点我一下</button><span>{{count}}</span>
</div>
`
}
在App.js中引入子组件，并在组件中注册子组件，引用后就可以用了，用标签的方式去写。
注意：在哪里引用就在哪里注册
App.js中的代码：
//创建一个根组件
import MyButton from "./MyButton"
export default {
data() {
return {
message: "!!!!!哈哈哈哈哈"
}
},
// 在组件中注册子组件
components: {
MyButton: MyButton
},
template: `
<h1>{{message}}</h1>
<MyButton></MyButton>
<MyButton></MyButton>
<MyButton></MyButton>
<MyButton></MyButton>
`
}
效果如图所示：
单独建立一个文件夹components，把子组件MyButton.js拉进去
在html中也可以引用MyButton，但要符合语言规范，重命名注册组件时的MyButton，变成小写，如果模板是用在网页当中的，那么所有的组件名称都要改成小写。
P8：单文件组件
template是用字符串的形式在编写模板
1、这些字符串会在项目运行时，在浏览器中被编译为js的函数（性能不太好）
2、在字符串中编写代码体验很差（主要是没有提示）
为了解决这个问题，Vue为我们提供了一种单文件组件（SFC）
··· 单文件组件的格式是vue
···vue文件用来编写单文件组件，vue文件本身并不能被浏览器所识别，所以它必须被构建工具打包后，才可使用。
···同时vue文件在打包时，构建工具会直接将template转换为函数，无需在浏览器中再去编译，这样一来性能也会有所提升
创建一个单文件组件：在src中创建App.vue，在里面可以写一个script标签
引入vite并配置
P9：自动创建项目
命令
yarn create vue
如果使用npm则
npm init vue@latest
latest是指最新版，如果创建vue2,则在这里输入vue@2
1257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
