寫在前面
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建立專案
https://cn.vitejs.dev/
執行命令
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>
完成。