08-初始vue3
写在前面
https://juejin.cn/post/7106374777601785893
https://juejin.cn/post/7253828299938906169
配置项写法
<body>
<div id="app">
</div>
</body>
<script>
const app = Vue.createApp({
// ...
})
app.mount("#app")
</script>
配置项写法示例
<body>
<div id="app">
<button @click="count--">-</button>
{{count}}
<button @click="count++">+</button>
</div>
</body>
<script>
// 使用Vue.createApp创建了一个Vue应用程序实例。
const app = Vue.createApp({
data() {
return {
count: 3
}
},
})
// 使用app.mount("#app")将Vue应用程序实例挂载到id为"app"的div上，这样Vue应用程序就能够控制这部分HTML代码了。
app.mount("#app")
</script>
组合式api写法
<body>
<div id="app">
<button @click="count--">-</button>
{{count}}
<button @click="count++">+</button>
</div>
</body>
<script>
const app = Vue.createApp({
// setup函数用于设置组件的响应式数据，并返回必要的数据和方法。
setup(props) {
// let count = 3 无法双向绑定，如果要让值设置成响应式，需要使用Vue.ref(属性)
let count = Vue.ref(3)
return {
count
}
}
})
// 使用app.mount("#app")将Vue应用程序实例挂载到id为"app"的div上，这样Vue应用程序就能够控制这部分HTML代码了。
app.mount("#app")
</script>
通过点击事件触发函数操作
<body>
<div id="app">
<button @click="subCount">-</button>
{{count}}
<button @click="addCount">+</button>
</div>
</body>
<script>
const app = Vue.createApp({
setup(props) {
let count = Vue.ref(3);
// 定义函数，函数名称就是触发点击事件后执行的函数
function subCount() {
count.value--
}
function addCount() {
count.value++
}
// 别忘记返回
return {
count,
subCount,
addCount
}
}
})
// 别忘记挂载
app.mount("#app")
</script>
将容器类型做成响应式
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue3</title>
<script src="../js/vue3.js"></script>
</head>
<body>
<div id="app">
<button @click="subAge">年龄-1</button>
<p>
<span>姓名：{{hero.name}}</span>
<span>年龄：{{hero.age}}</span>
<span>爱好：{{hero.hobby.join('、')}}</span>
</p>
<button @click="addAge">年龄+1</button>
</div>
</body>
<script>
const {createApp, reactive} = Vue
const app = createApp({
setup(props) {
const baseData = {name: '小满', age:3, hobby: ['逃课', '摸鱼']}
// const hero = Vue.reactive(baseData)
const hero = reactive(baseData)
function subAge() {
hero.age--
}
function addAge() {
hero.age++
}
return {
hero,
subAge,
addAge
}
}
})
app.mount("#app")
</script>
</html>
简单总结
setup
# 1 如果使用配置项API---》写起来跟vue2一样
# 2 如果写组合式API---》所有代码都要写在setup函数中
-后期除了setup函数，其他都不带了
# 3 setup函数必须返回变量或函数--》在template中才能使用
# 4 默认不带响应式，需要使用ref或reactive包裹
ref和reactive
# 1 ref 包裹值类型[数字，字符串，布尔]，做成响应式
# 2 reactive包裹引用类型[对象，数组]，做成响应式
# 3 使用reactive包裹的对象，直接通过 . [] 取值赋值就是响应式的
ref包裹的对象，需要使用 对象.value 修改值
# 4 使用ref包裹的，在template中，不许用使用 变量.value
import {} from 'Vue' 和 const {} = Vue 的区别
import {} from 'Vue' 和 const {} = Vue 是两种不同的导入 Vue 的方式，它们的区别在于语法和用途。
-
import {} from 'Vue':
- 这是 ES6 的模块导入语法，用于导入模块中的特定成员。
- 当你使用
import {} from 'Vue'时，你可以选择性地导入 Vue 模块中的特定成员，例如createApp、reactive等。 - 例如：
import { createApp, reactive } from 'Vue'
-
const {} = Vue:
- 这是从一个对象中解构出特定成员的 JavaScript 语法。
- 当你使用
const {} = Vue时，你是从 Vue 对象中解构出特定的成员，使得你可以直接使用这些成员，而不需要每次都写Vue.xxx。 - 例如：
const { createApp, reactive } = Vue
综上所述，两种方式都可以用来导入 Vue 模块中的特定成员，但是语法略有不同。 import {} from 'Vue' 是 ES6 的模块导入语法，而 const {} = Vue 是从对象中解构出特定成员的 JavaScript 语法。
使用vite创建项目
执行命令
npm create vite@latest //创建项目
npm create vite@latest name // 创建项目的时候可以带名称
vue3使用router-view
- 在src下面新建一个文件夹router，然后里面新建一个index.js文件
- 在index.js中，写入逻辑。
import { createRouter, createWebHistory } from 'vue-router'
// 注意 这里一定要叫 routes 不然报错 Cannot read property ‘forEach‘ of undefined
const routes = [
{
path: "/book",
name: "book",
component: () => import("../views/BookView.vue")
},
{
path: "/",
name: 'home',
component: () => import("../views/HomeView.vue")
}
]
const router = createRouter({
// history: createWebHashHistory, hash模式
history: createWebHistory(), // history模式
routes
})
export default router
- 在main.js中
import { createApp } from 'vue'
import router from "./router/index.js"
import './style.css'
import App from './App.vue'
const app = createApp(App)
app.use(router);
app.mount("#app")
- 在App.vue中
<template>
<div>
<router-view></router-view>
</div>
</template>
完成。
