Zenn
📚

vue.js　チュートリアルがわからない＃１＃２

2024/11/09に公開
Vue.js
Web
idea

vue.jsの学習どこから始めよう？

参考にした記事：https://zenn.dev/comm_vue_nuxt/articles/start-to-learn-vue-2024

1公式のチュートリアル

学習のとっかかりとして公式チュートリアルが存在するのでやってみようかな～と思った。
プログラミング弱者の私は、チュートリアルを読んでもわからない部分が多々ありましたので、自分でもわかるように補足したものをまとめていきます。多分チュートリアルの隣に並べながら読んだら分かりやすいかも。いろいろ間違ってたら教えてほしいです…。
https://ja.vuejs.org/tutorial/#step-1

1はじめに

とばします。

2宣言的レンダリング

vueの特徴的な要素として3つあります。

  • 単一ファイルコンポーネント：HTML（構造）、CSS（見た目）、JavaScript（動作） をひとつの vue ファイルにまとめて書くことができる仕組み
  • 宣言的レンダリング：jsを変更すると勝手にHTMLも更新される仕組み
  • リアクティブ：データの値や変数が変わると自動で画面も変わる。Vue の reactive() API を使うと、リアクティブな状態を簡単に設定できる。reactive() で生成したオブジェクトは プロキシ を使っている。←関数みたいなイメージ？

data オプション

Vue のコンポーネントでは、data オプションを使ってリアクティブな状態を設定することができます。data オプションとは、コンポーネントが持つデータを定義するための方法です。ただし、Vue のコンポーネント内で data を使用する際は、必ず関数としてオブジェクトを返す形式にする必要があります。
たとえば、以下のように書きます:

export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}

export default { ... }:
これは Vue コンポーネントをエクスポートしている部分です。Vue では、コンポーネントを他のファイルから読み込んで再利用するために、この書き方を使います。
data() メソッド:
data() は リアクティブな状態を定義するための関数です。この関数はオブジェクトを返す必要があります。この関数内で定義されたデータは、そのコンポーネント内でリアクティブ（変更に反応する）な変数として利用できます。
return { message: 'Hello World!' }:
data() 関数が返すオブジェクトの中に message というプロパティがあります。
message の初期値として 'Hello World!' が設定されています。

Vue では、data() メソッドで定義した データプロパティ を、テンプレート内で {{ }}（mustache 構文）を使って表示できます。これにより、HTML 内に動的なテキストをレンダリングすることが可能です。

<h1>{{ message }}</h1>

実用例

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>
  • <h1> タグの中に message の値 'Hello World!' が表示されます。

jsでの応用例

以下のコードを使って応用する

<h1>{{ message.split('').reverse().join('') }}</h1>

jsコードの解説
この <h1> タグの中では、Vue の mustache 構文（{{ }}） を使って message という変数の値を表示しています。しかし、単に message を表示するのではなく、文字列を逆順にして表示 するために、JavaScript のメソッドを使っています。
split(''):
文字列を1文字ずつに分割して、配列に変換します。
例: 'Hello World!' → ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd', '!']
reverse():
配列の順序を逆にします。
例: ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd', '!'] → ['!', 'd', 'l', 'r', 'o', 'W', ' ', 'o', 'l', 'l', 'e', 'H']
join(''):
配列の要素を再度 1つの文字列に結合します。
例: ['!', 'd', 'l', 'r', 'o', 'W', ' ', 'o', 'l', 'l', 'e', 'H'] → '!dlroW olleH'

テンプレートの変更

<script>
export default {
  data() {
    return {
      message: 'わああ!'
    }
  }
}
</script>

<template>
  <h1>{{message}}</h1>
</template>

Discussion