# 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>
```
Sign in with Wallet
Connect another wallet