More than 3 years have passed since last update.

運営者ギルド

【Vue.js】猫本を参考に基本的なところをまとめてみた。

Last updated at 2020-03-30Posted at 2020-03-28

はじめに

2か月程前、Vue.jsに関して以下の本を用いて学習を始めました。

2週間ほど勉強して、少しだけアレンジして作成したToDoリストが以下になります。(Bootstrapでデザインして、状態ボタンを1つ追加しただけだけど)

その後、Laravelと組み合わせたポートフォリオ作成を目指して、Laravelの勉強に専念。

やっとこさ最近LaravelとVueの連携について理解できてきたので、とりあえずVue.jsで新しいポートフォリオのフロントサイドを作り始めようと思ったのですが。。。

手が一切動かない。全然覚えてない。悲しい。。。泣　

2週間程度勉強したのですが、1か月経ち、気づけば頭からすっぽり抜けてしまっていました。。。~~(記憶力なんてこんなもん)~~

ってことで改めて復習がてらVue.jsの基本を記事にまとめてみました。(今後の備忘録も兼ねて)

※WordPressで体裁を整えたものをコピペしたところ、テーブルの形が崩れてしまいました。。。もし当記事が気になりましたら、以下よりご覧いただけますと幸いです。。。

Vue.jsの表示

まずはVue.jsでHello worldしてみる。

index.html

<div id="app">
  <p>{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>

#appの内側にテンプレートを書き込んでいく。

インターネットに接続できる環境であれば、Vue.jsのインストールにCDNが利用可能。

マスタッシュ記法を用いて{{}}内にプロパティ名を記述するとその値が描画される。

main.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  }
})

コンストラクタ(クラスのインスタンス生成時に実行されるメソッド)関数Vueを使ってルートとなるVueインスタンスを作成。

data内のデータをテンプレート側に送っている。変数化するとコンソールからもアクセスできるが必須ではない。

実際の描画

<p>hello</p>

基本機能(ディレクティブ/組み込みコンポーネント)

v-bind

クラス、スタイル、属性などタグ内のバインドに使用。※Mustache{{}}はテキストコンテンツ特有の記法のため、タグ内で使用することができない。

<input type="text" v-bind:value="message">

省略パターン

<input type="text" :value="message">

v-for

リストデータを用いて要素を繰り返し描画する際に、繰り返したいタグに対して使用。

v-on

「クリックしたとき」「要素が変わったとき」などDOMイベントのハンドリング(イベント)を受け取り、処理を行う際に使用。

※猫本では、イベントに紐づける処理の内容を「イベントハンドラ」、イベントハンドラをイベントと紐づけることを「ハンドル」と呼んでます。

<button v-on:click="handleClick">クリック</button> <!--handleClickはコンポーネントのmethodsオプションに定義-->

省略形「@」

<button @click="handleClick">クリック</button>

v-model

データとフォームの入力項目をバインド(同期)する際に使用(双方向データバインディング)。

下記でフォームの文字を編集すると、同期して画面のメッセージも更新される。

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  }
})

v-if

プロパティがTrueの時だけ条件分岐でテンプレートを描画したい際に使用。条件を満たさなかった際はコメント化。似たディレクティブにv-showがあり、こちらはstyle="display: none;"のスタイルが付与されて描画。

<templete>タグを使うと複数の要素をグループ化できる。

<templete v-if="ok">
  <h1>タイトル</h1>
  <p>コンテンツ</p>
</templete>

また、v-else-if、v-elseを組み合わせることで複数の条件を指定できる。

<transition>タグ

組み込みコンポーネント。CSSトランジションやアニメーションを容易に適用できる。

基本的なオプションの構成

Vueクラスのインスタンスの生成テンプレート

//main.js
vue = Vue.new({
el: '#app',
data: {
message: "Hello Vue.js"
},
computed: {
computedMessage: function(){
return this.message + "!"
},
},
created: {
// アクションフック
},
methods: {
myMethod: function(){
},
},
})

el: mountする要素

アプリケーションを紐づけるセレクタ。

data:

アプリケーションで使用するデータの登録。

computed:

算出プロパティ。関数によって算出されたデータ。メソッド内ではthis(Vueインスタンスを指す)を付ける。テンプレートの可読性を保つためにここに記述。

created:

ライフサイクルハック。特定のタイミングで自動的に呼び出す。呼び出したいタイミングによってメソッドは変える。処理を割り込ませる仕組みのことを「フック」と呼ぶ

methods:

アプリケーションで使用するメソッド。コードを管理しやすくするために処理を分けたり、イベントハンドラなど細かな実装を担当する。

コンポーネント

機能をもつUI部品ごとにテンプレートとJavaScriptを1つのセットにして、ほかのUI部品とは切り離した開発、管理をできるようにする仕組み。設計図。再利用が容易になる。

※UI(User Interface)とは、ユーザーがPCとやり取りをする際の入力や表示方法などの仕組み。

index.html

<h1>Vue.js</h1>
<div id="app">
  <hello />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('hello',
{
  template: '<p>Hello!</p>'
})
var app = new Vue({
  el: '#app',
});
</script>

コンポーネントの定義

Vue.component(名前,{設定情報});

コンポーネントの出力

<コンポーネント名 />

<h1>Vue.js</h1>
<div id="app">
  <mycomponent />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var component = {
  template:'<p>localcomponent</p>'
}
new Vue({
  el: '#app',
  components: {
    'mycomponent':component
  }
});
</script>