Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VueでTypeScriptを始める 3つのStyle/3 style to start v...

果物リン
January 23, 2020

VueでTypeScriptを始める 3つのStyle/3 style to start vue with typescript

VueでTypeScriptを始めたくなった!
で、どうすればいいのか知りたいし比較したくなったんだよ

果物リン

January 23, 2020
Tweet

More Decks by 果物リン

Other Decks in Technology

Transcript

  1. ຊ೔ͷαϯϓϧϓϩδΣΫτ • vue.js + typescript = vue.ts ͜ͱ͸͡Ί - Qiita


    https://qiita.com/nrslib/items/be90cc19fa3122266fd7
 ͜ͷهࣄͷίʔυΛશ໘తʹ࠾༻ • ࠓճͷίʔυ͸͜͜ͰݟΕ·͢ • Github fruitriin/vue-ts-test 
 https://github.com/fruitriin/vue-ts-test
  2. Home.vue • dataʹgreatText = “Hello” ͱ count = 0 •

    methodsʹonMyButtonClicked(count) • this.greatText = ͜ΜʹͪΘ, 
 this.count = count • Computed ʹ isRegular = this.count >= 3 • Watch ʹ count === 3 ͳΒ alert()
  3. MyButton.vue • data ʹ count: 0 • Props ʹ great

    :String • Methods ʹ onClcik() • this.great Λalert, this.countΛ +1
 click ΠϕϯτͰ this.count Λ emit up
  4. Reset.vue • data ʹ initialValue • Props ʹ value: String

    • Created Ͱ this.initialValue = this.value • Methods Ͱ • input(value) ͕ inputΠϕϯτͰvalueΛemit up • onClick() Ͱ this.input(this.initialValue)
  5. this.$emit(event) を @Emit() に • this.$emit(“event”, hoge) Λ
 @Emit() σίϨʔλ෇͖ͷผϝιουʹ͢Δ

    • this.$emit()ͷୈ2Ҿ਺͸
 @Emit()σίϨʔλΛ͚ͭͨϝιουͷୈ1Ҿ਺ʹ͢Δ
  6. TypeScriptの導入 • vue add typescript • ର࿩ܗࣜͰ࣭໰ʹ౴͑Δ • Use class-style

    component syntax ʹ “No” • yarn add @vue/composition-api
  7. まとめ • Class Styled Component • ར༻ऀଟ͍ • Vue.extend() •

    ͓खܰͩ͠ݸਓతʹਪ͠ • Composition API • ෳࡶͳίϯϙʔωϯτͷݟ௨͠ΛΑ͘͢Δ