Vue3简介
01 Vue
- vue 是一个前端的框架，主要负责帮助我们构建用户的界面
- MVVM：Model - View - View Model
- vue 负责 vm 的工作（视图模型），通过 vue 可以将视图和模型相关联。
- 当模型发生变化时，视图会自动更新
- 也可以通过视图去操作模型
- vue 思想：
- 组件化开发
- 声明式的编程
02 Hello World
编写Vue代码一般步骤
- 创建一个根组件
- 创建app实例
- 将实例在页面中挂载
- 准备一个div容器，页面
注意
组件用来创建组件实例（VM），组件是组件实例的模板
组件 --> 组件生成组件实例 --> 虚拟DOM --> DOM（在页面中呈现）
<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
<!-- 引入vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 编写vue代码
// 创建一个根组件，在vue3中组件就是一个普通的js对象
// 组件用来创建组件实例，组件是组件实例的模板
// 组件 --> 组件生成组件实例 --> 虚拟DOM --> DOM（在页面中呈现）
const Root = {
template: "<h1>我爱Vue</h1>" // 希望组件在页面中呈现的样子
}
// 创建app实例
//const app = Vue.createApp(Root)
// 将实例在页面中挂载
//app.mount("#app")
Vue.createApp(Root).mount("#app")
</script>
</body>
</html>
03 data
举例：
<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
<!-- 引入vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 编写vue代码
// 创建一个根组件，在vue3中组件就是一个普通的js对象
// 组件用来创建组件实例，组件是组件实例的模板
// 组件 --> 组件生成组件实例 --> 虚拟DOM --> DOM（在页面中呈现）
const Root = {
data() {
return {
message: "Vue好棒！" // data方法返回的对象，其中的属性会自动添加到组件实例中
}
}, // data是一个函数，需要一个对象作为返回值
// 在模板中可以直接访问组件实例中的属性
// 在模板中可以通过 {{属性名}} 来访问到组件实例中的属性
template: "<h1>我爱Vue，{{message}}</h1>" // 希望组件在页面中呈现的样子
}
// 创建app实例
//const app = Vue.createApp(Root)
// 将实例在页面中挂载
//app.mount("#app")
Vue.createApp(Root).mount("#app")
</script>
</body>
</html>
data 的数据如果是从服务器传过来JSON数据，那么我们就可以呈现到页面
04 按钮练习
为什么创建组件实例？
创建组件实例方便组件被使用的时候，组件跟组件之前相互独立，data里面函数返回，每次返回对象不同，组件就独立了
如果只创建组件，直接使用组件会产生影响，是同一个对象
<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
<!-- 引入vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!--
如果直接将模板定义到网页中，此时模板必须符合html的规范
My-Button -> my-button
如果在组件中定义template，则会优先使用template作为模板，
同时根元素中的所有内容，都会被替换
如果在组件中没有定义template，则会使用根元素的innerHTML作为模板使用
-->
<!-- <button @click="count++">点我一下</button> - 点了{{count}}次 -->
<p>哈哈哈哈，我是app中的内容！</p>
</div>
<script>
// 组件是用来创建组件实例的（vm）
// 创建一个按钮，可以显示按钮的点击的次数
const Root = {
data() {
return {
count: 0 // 记录点击次数
}
}
// template:
// "<button @click='count++'>点我一下</button> - 点了{{count}}次"
}
Vue.createApp(Root).mount("#app")
</script>
</body>
</html>
小结
-
data中的数据会自动和使用它的视图绑定，数据发生变化视图会自动刷新
-
template是模板，它决定了组件最终的样子
定义模板的方式有三种：
1.在组件中通过template属性去指定
2.直接在网页的根元素中指定
3.组件中通过render()直接渲染（一般不用，用这个就回到了命令式编程） -
如果直接将模板定义到网页中，此时模板必须符合html的规范（不建议定义到网页）
My-Button -> my-button -
如果在组件中定义template，则会优先使用template作为模板，
同时根元素中的所有内容，都会被替换
如果在组件中没有定义template，则会使用根元素的innerHTML作为模板使用
05 使用构建工具
正常不会用上面的写法，麻烦，使用构建工具 Vite
-
手动配置，安装
yarn init -y
yarn add vite -D
yarn add vue
使用yarn有问题，用的npm
-
新建文件 index.html 和 src/indx.js
-
编写代码
注意：引入js，要写
type="module"
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="./src/index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
src/index.js
// 引入vue
// 这里引入的vue，默认不支持通过template属性来设置模板
import { createApp } from "vue"
// 创建一个根组件
const App = {
data() {
return {
message: "我爱Vue！"
}
},
template: "<h1>{{message}}</h1>"
}
// 创建应用挂载到页面
createApp(App).mount("#app")
-
纯手写脚手架(一般不这样干，现在是看逻辑)
package.json(在原始代码基础上加)
"script": { "dev": "vite --open", "build": "vite build", "preview": "vite preview" } -
运行
npm dev运行有问题，这里使用的
npm run dev
运行成功
-
修改引入的vue
上面引入的vue，默认不支持通过template属性来设置模板，修改为：
import { createApp } from 'vue/dist/vue.esm-bundler.js' -
此时页面就可以显示
上面的流程要会，之后再使用脚手架
07 Vue组件化
按照上面的编写代码的流程先写初步的代码
注意：
mount()的返回值就是根组件的实例
按照之前代码写是有问题的
只有一个js文件，没有模块化管理
- 我们把index.js作为入口文件（主程序）只做一件事：创建实例并挂载
- 我们把里面的根组件拿出来 App.js 默认导出
// 创建根组件 export default { data() { return { msg: "waiVue" } }, template: `<h2>{{msg}}</h2>` } - index.js里面引入
import App from './App'
此时index.js就是主文件，App.js就是根组件，这样，一个文件一个组件，更加模块化清晰
引例：我要使用4个按钮，每个按钮count++,如果重新设置button然后点击事件（上面练习写到过），四个按钮的数字都会同步增加
组件化
封装一个自定义按钮组件 子组件 MyButton.js
export default {
data() {
return {
count: 0
}
},
template: `
<div>
<h2>子组件</h2>
<button @click="count++">点我一下</button>
<span>{{count}}</span>
</div>
`
}
使用子组件
- 根组件App.js里面引入
import MyButton from "./MyButton" - 根组件中注册子组件(下面的写法可以简写)
components: { MyButton: MyButton }, - 根组件template里面使用子组件(这里面想用几个button就写一个，他们之前不会影响)
<MyButton></MyButton>
当我们页面想使用那个子组件直接引入即可，想在哪里使用在哪里使用
注意
-
根组件中注册子组件，第一个MyButton是我们想叫的名字可以写别的，第二个MyButton是我们引入来的名字，即属性名：属性值，相同时可简写
-
在根组件写的
<MyButton></MyButton>放在index.html里面写不好使，我去App.js里面改成小写my-button: MyButton就可以用了（但是：开发的时候不要这样写！！！）
