vue learning by hsu

5-1 5-1 Vuex 簡介 | 重新認識 Vue.js | Kuro Hsu 

6-1  https://book.vue.tw/CH6/6-2-composition-intro.html

6-2 6-2 Composition API 的核心 | 重新認識 Vue.js | Kuro Hsu

vue setup function

组合式 API：setup() | Vue.js (vuejs.org)

3-2 Vue SFC 單一元件檔 | 重新認識 Vue.js | Kuro Hsu

 我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性：

vue

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

template attribute

 <template>：内容模板元素 HTML 内容模板 （ <template> ）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。

vue variable and string

 <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<component :is="'card'"></component>

becareful the :attribute is variable and "varaible" and double quote used single '' will be string 

vue css style

 Class and Style Bindings | Vue.js (vuejs.org)

vue app.vue

3-2 Vue SFC 單一元件檔 | 重新認識 Vue.js | Kuro Hsu

定义一个组件​

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC

javascript template litterater

 Day03【ES6 小筆記】JS 組字串好方便！ 一目瞭然最清楚（模板字串符 template literal） - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)

alert(`Hello ${name.value}!`)