---
# System prepended metadata

title: '[社課]vue出新世界'
tags: [社課, Vue.js, 共筆]

---

---
title: "[社課]vue出新世界"
tags:
- 社課
- 共筆
- Vue.js
---
# vue出新世界
<!-- 活動簡述 -->
**簡報連結：**

> 請從這裡開始

```html
<!doctype html>
<html lang="en" class="h-100" data-bs-theme="light">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Examples</title>
    <!-- .CSS 樣式引入區域 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <style>
        main>.container {
            padding-top: 80px;
        }

        ;
    </style>
</head>

<body class="d-flex flex-column h-100">
    <header>
        <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    Example
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">首頁</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                    <form class="d-flex" role="search">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>

    <main class="flex-shrink-0">
        <div class="container">
            <h1>Hello</h1>
        </div>
    </main>

    <footer class="footer mt-auto py-3 bg-body-tertiary">
        <div class="container">
            <span>Example</span>
        </div>
    </footer>

    <!-- .js 引入區域 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous">
    </script>
</body>

</html>
```

```html
<!DOCTYPE html>
<html>

<head>
    <title>我的網頁</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">{{ message }}</div>

    <script>
        const { createApp, ref } = Vue

        createApp({
            setup() {
                const message = ref('Hello vue!')
                return {
                    message
                }
            }
        }).mount('#app')
    </script>
</body>

</html>
```
```html
<!DOCTYPE html>
<html>

<head>
    <title>我的網頁</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <p> 總共金額 {{subtotal()}}</p>
        <p> 總共金額 {{subtotal()}}</p>
        <p> 總共金額 {{subtotal()}}</p>
    </div>

    <script>
        const vm = Vue.createApp({
            data(){
                return{
                    price: 100,
                    quantity: 10
                }
            },
            methods:{
                subtotal:function(){
                    return this.price * this.quantity;
                }
            }
        }).mount('#app');
    </script>
</body>

</html>
```

```html
<!DOCTYPE html>
<html>

<head>
    <title>我的網頁</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <button :disabled="isBtnDisabled">click me!!</button>
        <button :disabled="true">click me!!</button>
        <button :disabled="false">click me!!</button>
    </div>

    <script>
        const vm = Vue.createApp({
            data(){
                return{
                    isBtnDisabled: false
                }
            },
        }).mount('#app');
    </script>
</body>

</html>
```

```html
<!DOCTYPE html>
<html>

<head>
    <title>我的網頁</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
    </div>
    
    <script>
        const { createApp, ref } = Vue

        const vm = Vue.createApp({
            data() {
                return {
                    message: "Hello"
                }
            }
        }).mount('#app')
    </script>
</body>

</html>
```

```html
<!DOCTYPE html>
<html>

<head>
    <title>我的網頁</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <!-- Use cdn import VUE.JS -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- Use cdn import Boostrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</head>

<body>
    <div id="app">
        <div class="container h-100">
            <div class="row h-100 justify-content-center">
                <div class="col-6 col-lg-4">
                    <!-- Card -->
                    <div class="card mt-5">
                        <div class="card-body">
                            <h3 class="card-title fw-bold text-center mb-4">登入</h3>

                            <button type="submit" class="btn border my-2 w-100">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="bi bi-facebook float-start" viewBox="0 0 16 16">
                                    <path
                                        d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
                                </svg>
                                使用FaceBook登入
                            </button>

                            <button type="submit" class="btn border my-2 w-100">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="bi bi-google float-start" viewBox="0 0 16 16">
                                    <path
                                        d="M15.545 6.558a9.4 9.4 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.7 7.7 0 0 1 5.352 2.082l-2.284 2.284A4.35 4.35 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.8 4.8 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.7 3.7 0 0 0 1.599-2.431H8v-3.08z" />
                                </svg>
                                使用Google登入
                            </button>

                            <button type="submit" class="btn border my-2 w-100">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="bi bi-apple float-start" viewBox="0 0 16 16">
                                    <path
                                        d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282" />
                                    <path
                                        d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282" />
                                </svg>
                                使用Apple登入
                            </button>


                            <hr class="dropdown-divider">

                            <form id="form" class="my-2">
                                <div class="form-group">
                                    <label for="emailInput">電子郵件</label>
                                    <input type="email" class="form-control" placeholder="電子郵件" v-model="InputEmail">
                                </div>

                                <div class="form-group">
                                    <label for="passwordInput">密碼</label>
                                    <input type="password" class="form-control" placeholder="密碼"
                                        v-model="InputPassword">
                                </div>
                                <button type="submit" class="btn btn-primary mt-2 border w-100"
                                    :disabled="checkInput">登入</button>

                                <div class="form-group form-check mt-2">
                                    <input type="checkbox" class="form-check-input" id="rememberCheck">

                                    <label class="form-check-label" for="rememberCheck">記住我的帳號</label>

                                    <a class="float-end" href="">忘記密碼?</a>
                                </div>

                            </form>
                        </div>
                    </div>
                    <!-- End of Card -->
                </div>
            </div>
        </div>
    </div>

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    InputEmail: "",
                    InputPassword: "",
                    CorrectEmail: "123456@gmail.com",
                    CorrectPassword: "123456789"
                }
            },
            computed: {
                checkInput() {
                    if (this.InputEmail.trim() == "" || this.InputPassword.trim() === "") {
                        return true;
                    }
                    else {
                        return false;
                    }
                }
            },
            methods: {
                login(email, password) {
                    if (email === this.CorrectEmail && CorrectPassword === this.CorrectPassword) {
                        console.log('正確');
                    }
                    else {
                        console.log('錯誤');
                    }
                }
            }
        }).mount('#app');
    </script>
</body>

</html>
```

```html
<!DOCTYPE html>
<html>

<head>
    <title>我的網頁</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <p>Count: {{ count }}</p>
        <button v-on:click="plus">Plus</button>
        <!--V-on或@-->
    </div>
    
    <script>
        const { createApp, ref } = Vue

        const vm = Vue.createApp({
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                plus () {
                    this.count++
                }
            }
        }).mount('#app')
    </script>
</body>

</html>
```

```html
<!DOCTYPE html>
<html>

<head>
    <title>我的網頁</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <!-- Use cdn import VUE.JS -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- Use cdn import Boostrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</head>

<body>
    <div id="app">
        <div class="container h-100">
            <div class="row h-100 justify-content-center">
                <div class="col-6 col-lg-4">
                    <!-- Card -->
                    <div class="card mt-5">
                        <div class="card-body">
                            <h3 class="card-title fw-bold text-center mb-4">登入</h3>

                            <button type="submit" class="btn border my-2 w-100">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="bi bi-facebook float-start" viewBox="0 0 16 16">
                                    <path
                                        d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
                                </svg>
                                使用FaceBook登入
                            </button>

                            <button type="submit" class="btn border my-2 w-100">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="bi bi-google float-start" viewBox="0 0 16 16">
                                    <path
                                        d="M15.545 6.558a9.4 9.4 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.7 7.7 0 0 1 5.352 2.082l-2.284 2.284A4.35 4.35 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.8 4.8 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.7 3.7 0 0 0 1.599-2.431H8v-3.08z" />
                                </svg>
                                使用Google登入
                            </button>

                            <button type="submit" class="btn border my-2 w-100">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="bi bi-apple float-start" viewBox="0 0 16 16">
                                    <path
                                        d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282" />
                                    <path
                                        d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282" />
                                </svg>
                                使用Apple登入
                            </button>


                            <hr class="dropdown-divider">

                            <form id="form" class="my-2">
                                <div class="form-group">
                                    <label for="emailInput">電子郵件</label>
                                    <input type="email" class="form-control" placeholder="電子郵件" v-model="InputEmail">
                                </div>

                                <div class="form-group">
                                    <label for="passwordInput">密碼</label>
                                    <input type="password" class="form-control" placeholder="密碼"
                                        v-model="InputPassword">
                                </div>
                                <button type="button" class="btn btn-primary mt-2 border w-100" :disabled="checkInput"
                                    @click="login">登入</button>

                                <div class="form-group form-check mt-2">
                                    <input type="checkbox" class="form-check-input" id="rememberCheck">

                                    <label class="form-check-label" for="rememberCheck">記住我的帳號</label>

                                    <a class="float-end" href="">忘記密碼?</a>
                                </div>

                            </form>
                        </div>
                    </div>
                    <!-- End of Card -->
                </div>
            </div>
        </div>
    </div>

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    InputEmail: "",
                    InputPassword: "",
                    CorrectEmail: "123456@gmail.com",
                    CorrectPassword: "123456789"
                }
            },
            computed: {
                checkInput() {
                    if (this.InputEmail.trim() == "" || this.InputPassword.trim() === "") {
                        return true;
                    }
                    else {
                        return false;
                    }
                }
            },
            methods: {
                login() {
                    console.log();
                    if (this.InputEmail === this.CorrectEmail && this.InputPassword === this.CorrectPassword) {
                        console.log('正確');
                    }
                    else {
                        console.log('錯誤');
                    }
                }
            }
        }).mount('#app');
    </script>
</body>

</html>
```