---
title: '3小時學不完ㄉVue'
disqus: ray
---
3小時學不完ㄉVue
===
[TOC]
### ==前置知識==
一個完整的網頁是有三個語言共同構成
* HTML
* CSS
* JAVASCRIPT(以下簡稱JS)
**HTML**掌管文本，也就是顯示什麼內容
**CSS**掌管美術和排版
也就HTML的內容該長什麼樣子 他的排版到顏色大小字型
**Javascript**（以下簡稱JS）是一個獨立的程式語言，他能夠控制HTML跟CSS來修改內容，所以他負責流程控制(附註 JS 跟 Java為兩個完全不同語言，只是剛好同名 但毫無關係）
那**Vue**是什麼呢？
由於使用原始JS來控制數以千字的文本與頁數開發效率很低，Vue可以理解成JS的超級函式庫，它提供強大的功能來協助控制網頁，之所以說是超級函式庫原因是他根本重寫了整個語言的使用方式使其變得極度容易上手與適合開發大型專案
所以我們稱其為"框架"（超越函式庫的存在）
值得一提的是Vue是世界前端三大框架之一
被業界及許多知名專案使用
Vue的上手難度低，且具備大量中文文獻（Vue的開發者是一名華人）
### ==環境安裝==
首先去官網安裝NodeJS(此教學版本使用16.16.0LTS版本)
[NodeJS官網](https://nodejs.org/en/)
安裝完畢後打開小黑窗(終端機) (Windows的開啟方式為開啟檔案總管 在地址輸入欄位輸入cmd 按下Enter，為了後續操作方便建議在桌面進行
如下圖)
在小黑窗中輸入`npm create vite@latest`
再來照著小黑窗的指示一步一步前進，他會要你輸入指令安裝 基本上只需要打指令幾可
`? Project name:` 為要你輸入專案名稱，建議隨意幾可 建議全英文
`Select a framework` 我們選擇vue
`Select a variant` 我們一樣選擇vue
再來他跳出Done訊息後下面附帶三個指令，依序照著打
最後會顯示這個訊息
那恭喜你到這邊環境安裝皆已完備
### ==課程主體==
#### 簡述Vue組件與熱更新特性
* 神奇的.vue檔案
* css的區域性與不互相干擾性
* html的熱更新
* Vite是啥
#### 如何渲染變數訊息
* 宣告變數
* 渲染變數
```html
<template>
<div>
{{x}}
<!--
{{變數名稱}} 表示渲染該變數
-->
<button @click="plus">+1</button>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
var x;
export default {
data: () => ({
x: 0, //宣告x變數
}),
methods:{
plus () {
this.x += 1;
}
},
components: {
HelloWorld
}
}
</script>
<style scoped>
</style>
```
#### 如何透過按鈕修改變數
* @click (v-on:click)
* v-model
按鈕程式範例碼
```html
<template>
<div>
{{x}}
<button @click="x+=1">+1</button>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
var x;
export default {
data: () => ({
x: 0,
}),
components: {
HelloWorld
}
}
</script>
<style scoped>
</style>
```
#### methods function使用
* function
* this概念
@click使用method的程式範例碼
```html
<template>
<div>
{{x}}
<button @click="plus">+1</button>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
var x;
export default {
data: () => ({
x: 0,
}),
methods:{
plus () {
this.x += 1;
}
},
components: {
HelloWorld
}
}
</script>
<style scoped>
</style>
```
#### computed屬性
* 簡化變數顯示
computed屬性的程式範例碼
```html
<template>
<div>
{{show*6/2+5%7}}
{{dealedShow}}
<button @click="show++">+1</button>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
var x;
export default {
data: () => ({
show: 1,
array: [11,23,42]
}),
methods:{
plus () {
}
},
computed:{
dealedShow(){
return this.show*6/2+5%7;
}
},
components: {
HelloWorld
}
}
</script>
<style scoped>
</style>
```
#### v-if / v-show 條件判斷式
* v-if跟v-show差異
computed屬性的程式範例碼
```html
<template>
<div>
<div v-if="show===1">
分頁1
</div>
<div v-if="show===2">
分頁2
</div>
<div v-if="show===3">
分頁3
</div>
<div v-if="show===4">
分頁4
</div>
<div v-if="show===5">
分頁5
</div>
<button @click="show++">+1</button>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
var x;
export default {
data: () => ({
show: 1,
}),
methods:{
plus () {
}
},
components: {
HelloWorld
}
}
</script>
<style scoped>
</style>
```
#### 用Vue控制class
*這裡影片我忘記提到，以文字講解*
vue允許你把變數直接變成css的class或者style(操作方式類似，可自行查詢操作方式，不再特別講解)
```html
<template>
<div :class="{ 'green': isGreen }">Block</div>
</template>
<script>
export default {
data() {
return {
isGreen : false
}
}
}
</script>
<style>
.green{
color: green;
}
</style>
```
我宣告了一個 變數叫做 isGreen
`:class="{ 'green': isGreen }"`的功能便是 當 isGreen==true的時候，便會把green加入div 的class中
實例題
```html
<template>
<div class="big" :class="{ 'green': isGreen }">Block</div>
</template>
<script>
export default {
data() {
return {
isGreen : true
}
}
}
</script>
<style>
.green{
color: green;
}
.big{
font-size: 64px;
}
</style>
```
最後執行的結果會是
```html
<div class="big green">Block</div>
```
因為isGreen 為true,所以"green"被加入了class列表中
#### Vue組件概述
* 扣題 **簡述Vue組件與熱更新特性**
* 添增html
* css的區域性與不互相干擾性
#### Vue組件傳值 props/emit
* props
* emit
* 傳送圖片
App.vue(父親元件)
```html
<template>
{{show}}
<HelloWorld :parentMsg="80" @callFather="plus"/>
<HelloWorld :parentMsg="100" @callFather="plus"/>
<HelloWorld :parentMsg="200" @callFather="plus"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import image from "./assets/vue.svg"
var x;
export default {
data: () => ({
show: 0,
image: image,
}),
methods:{
plus (val) {
this.show += val;
}
},
components: {
HelloWorld
}
}
</script>
<style scoped>
</style>
```
HelloWorld.vue(小孩元件)
```html
<template>
<div class="bg" @click="callFather">
{{parentMsg}}
</div>
</template>
<script>
export default {
props: ["parentMsg"],
methods:{
callFather () {
this.$emit('callFather', this.parentMsg);
}
},
}
</script>
<style scoped>
.bg{
background-color: gray;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
}
</style>
```
#### transition動畫
* 簡單淡出動畫
### ==補充課程==
#### Router前端路由與後端路由
* 前端route安裝
* vue route說明以及使用
#### Vuex中央倉庫
* Vuex概念說明
* Vuex實作
Sign in with Wallet
Connect another wallet