Zenn
Open2

初めてのVue.js

Vue 3
Kenji OmoriKenji Omori

背景

とりあえず Vue 触ってみるかというお話です。公式サイトを眺める事から始めます。

ざっくり理解していく

  • フロントエンドのフレームワーク
  • 公式サイトは Introduction と Tutorial を読めばざっくり理解できそう
Introduction
  • Vue 2 は 2023年12月31日でサポート終了予定
  • 故に、Vue 3 を触っていくことになる
  • Vue とは
    • ユーザインタフェースを作る JavaScript framework の一つ
    • 特徴は Declarative RenderingP と Reactivity // うーん、ちょっとわからないですね...
    • HTML・CSS・JavaScritp の理解が足りない人はここを読むといいらしい

JavaScript language overview を読んでいく

  • JavaScript のシンタックスは Java と C 言語をベースに構成している
  • JavaScritp はオブジェクト指向プログラミングをサポート
  • Data type は以下の通り
    • Number：整数と少数(とても大きな整数を除く)
    • BigIng：大きな整数
    • String：テキスト
    • Boolean：true or false
    • Symbol： ユニークな識別子
    • Undefined : 何も代入されていない変数
    • Null : non-value
  • Object は以下の通り
    • Function
    • Array
    • Date
    • RegExp
    • Error

真面目に読んでいたのですが、手を動かした方が早そうなので最後まで読むのを中止する。

Tutorial をやってみる

と思いましたが、こちらもかなり技術不足(難しい...)を感じます。自分のレベルに合わせて w3schools の Vuee Tutorialをやります。

Kenji OmoriKenji Omori

w3schools の Vue Tutorial を進める

  • Vue は script tag<script>で追加可能
  • Vue directives は v- で始まり、HTML tag に拡張機能を追加できる
    • v-bind: CSSとか紐づけられるイメージ
    • v-if: 条件分岐で利用
    • v-show:
    • v-for:
    • v-on:
    • v-model