[筆記] HiSKIO 2020 Vue3 專業職人入門篇

章節連結

課程相關資訊
內容

Demo

系列文章

前端框架御三家之一的 Vue，在 2020 年第四季迎來的第三代版本，代號為 One Piece。雖說已略為上手 2.0 版，決定藉由 HiSKIO 2020 Vue3 專業職人的課程，來加速自己的熟悉程度。這篇會筆記下 Vue 3.0 的基本寫法，以及自己開發上的一些補充。

本篇範圍：Chapter 4 ( JavaScript ES6 ) ，一共有 12 篇

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。

內容

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <p>{{text}}</p>
  <input type="text" v-model="text"/>
  <!-- v-if 會直接拔除、塞入 DOM-->
  <p v-if="message.show">{{message.name}}</p>
  <p>Number: {{number}}</p>
  <p>Multiple * 5 : {{multipleNumber}}</p>
  <p>Object Index: {{indexInObject.index}}</p>
  <button @click="add">Add</button>
  <button @click="minus">Minus</button>
  <button @click="addToReadOnly">AddToReadOnly</button>
  <button @click="changeMessageStatus">Show / Hide Message</button>
  <br/>
  <br/>
  <div class="box__wrapper">
    <a href="#" @click="displayCountryCode">Click to open / close</a>
    <ul :class="['box',{open:isOpen}]">
      <!-- v-show 用 css 的方法來控制開關-->
      <!-- v-bind:key 可以避免更動時都重新渲染，避免使用 array index 當 key，以免渲染錯誤-->
      <!-- v-if 和 v-for 是不能同時使用的，v-if 的優先權高於 v-for-->
      <!-- 請先用 js 篩選完資料後，再用 v-for -->
      <li
        v-for="(country,index) in countryCodes"
        :key="country.code"
        v-show="country.show"
        :class="[country.class,{open:isOpen}]"
      >
        {{index+1}}. {{country.name}} | {{country.code}}
      </li>
    </ul>
  </div>
</template>

<script>
// 若使用 readonly，可以確保其他函式僅 get 值
import { ref, reactive, readonly, computed } from 'vue'

export default {
  name: 'App',
  setup () {
    // 用 Vue.ref() 作綁定, 綁定後會有一個屬性為 value
    // 修改其 value 後，畫面值會變動
    const isOpen = ref(true)
    const text = ref('Hello Vue!')
    const number = ref(0)
    const copyNumber = readonly(number)
    const countryCodes = ref([
      { name: 'Taiwan', code: '886', show: true, class: 'red' },
      { name: 'Japan', code: '81', show: true, class: 'red' },
      { name: 'United States', code: '1', show: false, class: 'blue' },
      { name: 'United Kingdom', code: '44', show: true, class: 'blue' },
      { name: 'Singapore', code: '65', show: true, class: 'blue' }
    ])

    // reactive 僅接受 [],{}，可以進行深層檢查，不需要用 .value 就可以取得值
    const message = reactive({ name: 'Steve Jobs', show: true })
    const indexInObject = reactive({ index: 0 })

    // 若你有方法要給 template 的模板作操作，那一定要在 setup 中 return
    const add = () => {
      number.value += 1
      indexInObject.index += 2
    }
    const minus = () => {
      number.value -= 1
      indexInObject.index -= 2
    }

    const addToReadOnly = () => {
      copyNumber.value += 1
    }

    const changeMessageStatus = () => {
      message.show ? message.show = false : message.show = true
    }

    const displayCountryCode = () => {
      isOpen.value = !isOpen.value
    }

    // 經由 computed 計算後，若要取值都得加上 .value
    const multipleNumber = computed(() => {
      return number.value * 5
    })

    setTimeout(() => {
      text.value = 'Hello World!'
    }, 1000)

    return { text, message, number, add, minus, indexInObject, addToReadOnly, countryCodes, changeMessageStatus, isOpen, displayCountryCode, multipleNumber }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.box{
    padding:12px;
    background-color: rgb(218, 214, 214);
    transition: height 0.4s;
    height:0px
}
.box.open{
    height:120px;
}
.box > li{
    display: none;
    justify-content: center;
    align-items: center;
    transition: height 0.4s;
}
.box > li.open{
    display: flex;
}
.red{
    color:red;
}
.blue{
    color:blue
}
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<p v-if="message.show">{{message.name}}</p>

<p>Number: {{number}}</p>

<p>Multiple * 5 : {{multipleNumber}}</p>

<p>Object Index: {{indexInObject.index}}</p>

<button @click="minus">Minus</button>

<button @click="addToReadOnly">AddToReadOnly</button>

<button @click="changeMessageStatus">Show / Hide Message</button>

<br/>

<a href="#" @click="displayCountryCode">Click to open / close</a>

<li

v-for="(country,index) in countryCodes"

:key="country.code"

v-show="country.show"

:class="[country.class,{open:isOpen}]"

{{index+1}}. {{country.name}} | {{country.code}}

</li>

</ul>

</div>

</template>

// 若使用 readonly，可以確保其他函式僅 get 值

import { ref, reactive, readonly, computed } from 'vue'

export default {

name: 'App',

setup () {

// 用 Vue.ref() 作綁定, 綁定後會有一個屬性為 value

// 修改其 value 後，畫面值會變動

const isOpen = ref(true)

const text = ref('Hello Vue!')

const number = ref(0)

const copyNumber = readonly(number)

const countryCodes = ref([

{ name: 'Taiwan', code: '886', show: true, class: 'red' },

{ name: 'Japan', code: '81', show: true, class: 'red' },

{ name: 'United States', code: '1', show: false, class: 'blue' },

{ name: 'United Kingdom', code: '44', show: true, class: 'blue' },

{ name: 'Singapore', code: '65', show: true, class: 'blue' }

])

// reactive 僅接受 [],{}，可以進行深層檢查，不需要用 .value 就可以取得值

const message = reactive({ name: 'Steve Jobs', show: true })

const indexInObject = reactive({ index: 0 })

// 若你有方法要給 template 的模板作操作，那一定要在 setup 中 return

const add = () => {

number.value += 1

indexInObject.index += 2

}

const minus = () => {

number.value -= 1

indexInObject.index -= 2

}

const addToReadOnly = () => {

copyNumber.value += 1

}

const changeMessageStatus = () => {

message.show ? message.show = false : message.show = true

}

const displayCountryCode = () => {

isOpen.value = !isOpen.value

}

// 經由 computed 計算後，若要取值都得加上 .value

const multipleNumber = computed(() => {

return number.value * 5

})

setTimeout(() => {

text.value = 'Hello World!'

}, 1000)

return { text, message, number, add, minus, indexInObject, addToReadOnly, countryCodes, changeMessageStatus, isOpen, displayCountryCode, multipleNumber }

}

</script>

<style>

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

.box{

padding:12px;

background-color: rgb(218, 214, 214);

transition: height 0.4s;

height:0px

}

.box.open{

height:120px;

}

.box > li{

display: none;

justify-content: center;

align-items: center;

transition: height 0.4s;

}

.box > li.open{

display: flex;

}

.red{

color:red;

}

.blue{

color:blue

}

</style>

Demo

<br /> See the Pen <a rel="nofollow" href="https://codepen.io/andy922200/pen/BaLWdOm">Vue 3 Demo Instruction</a> by Andy Lien<br /> (<a rel="nofollow" href="https://codepen.io/andy922200">@andy922200</a>) on <a rel="nofollow" href="https://codepen.io">CodePen</a>.<br />