3小時學不完ㄉVue

3小時學不完ㄉVue

前置知識

一個完整的網頁是有三個語言共同構成

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官網

安裝完畢後打開小黑窗(終端機) (Windows的開啟方式為開啟檔案總管在地址輸入欄位輸入cmd 按下Enter，為了後續操作方便建議在桌面進行
如下圖)

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

在小黑窗中輸入npm create vite@latest
再來照著小黑窗的指示一步一步前進，他會要你輸入指令安裝基本上只需要打指令幾可
? Project name: 為要你輸入專案名稱，建議隨意幾可建議全英文
Select a framework 我們選擇vue

Select a variant 我們一樣選擇vue

再來他跳出Done訊息後下面附帶三個指令，依序照著打

最後會顯示這個訊息

那恭喜你到這邊環境安裝皆已完備

課程主體

簡述Vue組件與熱更新特性

神奇的.vue檔案
css的區域性與不互相干擾性
html的熱更新
Vite是啥

如何渲染變數訊息

宣告變數
渲染變數

<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

按鈕程式範例碼

<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的程式範例碼

<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屬性的程式範例碼

<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屬性的程式範例碼

<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(操作方式類似，可自行查詢操作方式，不再特別講解)

<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中

實例題

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

最後執行的結果會是

<div class="big green">Block</div>

因為isGreen 為true,所以"green"被加入了class列表中

Vue組件概述

扣題 簡述Vue組件與熱更新特性
添增html
css的區域性與不互相干擾性

Vue組件傳值 props/emit

props
emit
傳送圖片

App.vue(父親元件)

<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(小孩元件)

<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實作