08-初始vue3

小满三岁啦發表於2024-05-06
Vue

寫在前面

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 的方式，它們的區別在於語法和用途。

  1. import {} from 'Vue':

    • 這是 ES6 的模組匯入語法，用於匯入模組中的特定成員。
    • 當你使用 import {} from 'Vue' 時，你可以選擇性地匯入 Vue 模組中的特定成員，例如 createApp、reactive 等。
    • 例如：import { createApp, reactive } from 'Vue'

  2. 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

  1. 在src下面新建一個資料夾router，然後裡面新建一個index.js檔案
  2. 在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
  1. 在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")
  1. 在App.vue中
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

完成。

相關文章