Vue.js入門

始めに

Vue.jsの基礎をまとめました。
初学者の方でも分かるように書いていますので、よければ参考にしてください！

参考記事
[URL]https://qiita.com/kiyokiyo_kzsby/items/ce9fe8b72953584fecee

環境

JSFiddle(HTML・CSS・JavaScriptを簡単に試せるオンラインIDE)

Viuインスタンスの生成

① 　html側にVueを適応したい箇所に<div id="id名"></div>を記載する。(jsffidleでは、headやbodyタグがあらかじめ読み込まれているので、ここでは記載していない。)

② divタグ外に<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>と記載する。
これによりVue.jsを使用できるようになる。
詳細は公式ホームページ参照　https://jp.vuejs.org/v2/guide/installation.html#CDN

③new VueでVueインスタンスを生成し el でhtml側のどの部分でVueを適用するのか指定できます。

html

<div id='app'>
</div>

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

js

new Vue ({
el: '#app'
})

変数

data

jsに以下のように記述することで、data要素に変数を定義することができます。
html側に{{変数名}}とすることで、変数を表示できます。※{{}}はマスタッシュ構文

html

<div id='app'>
 {{ message }}
</div>

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

js

new Vue ({
el: '#app',
data: [
 message: '初めてのVue'
]
})

ディレクティブ

v-on 　任意のイベントによってメソッドを実行させる

Vueインスタンスにmethodsを記載することで、メソッドを使用できます。

①html側にbuttonタグを配置し、v-on:アクション="アクション名"のようにv-onディレクティブを指定する。
これによりボタンをクリックした際に、②で作成するmethodsのbuttonメソッドを実行させることができる。

②methods: {~~~}以下を記述することで、buttonメソッドを作成する。
ここではメソッドが実行された際、alertを表示させるようにしている。

html

<div id='app'>
 {{ message }}

 <button v-on:click="button">
 ここをクリック
 </button>

</div>

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

js

new Vue ({
 el: '#app',
 data: [
  message: '初めてのVue'
   ],
 methods: {
  button: function {
   alert();
    }
  }
})

v-vind

タグ属性の値をVueインスタンス内で定義した変数で表現する際に使います。

①html側に、aタグを配置しv-bindディレクティブを指定する。(v-bind:属性="属性名")

②js側で、data内に変数url(属性名)を記述する。

③リンクをクリックすると、任意のページを表示する。

html

<div id='app'>
  <p><div id='app'>
   {{ message }}
  <button v-on:click="button">
  ここをクリック
  </button>
  <a v-bind:href="url">Vue公式</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

js

new Vue ({
 el: '#app',
 data: [
  message: '初めてのVue',
  url: 'https://jp.vuejs.org/v2/guide/installation.html#CDN'
   ],
 methods: {
  button: function {
   alert();
    }
  }
})

v-model 双方向データバインディング。

双方向データバインディングとはvue.jsの機能で、data変数とフォームの値を連動させることが出来ます。
v-bindでは変数を表示させるだけでしたが、v-modelではフォームの値を変更すると変数の値も変更されます。

① html側で、<input>タグを記述しv-modelディレクティブを指定する。(v-model="変数名")
v-modelの動作を確認する為、hello変数を{{ hello }}で表示させる。

②js側で、hello変数を記述する。

③フォームの値を変更すると、hello変数の値が変化していることが確認できる。

html

<div id='app'>
 <input v-model="hello">
 {{ hello }}
</div>

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

js

new Vue ({
 el: '#app',
 data: [
  hello: 'こんにちは'
   ],
})

v-for 配列を要素にマッピングする。

v-forはdata内で、記述した配列よhtml側で表示させることができます。

①js側で、languages配列を作成する。

②ulタグ内にliタグを作成する。
liタグにv-forディレクティブを指定する。(v-for="要素　in 配列名")

③<li v-for="la in languages"></li>内に{{ la }}と記述して配列の要素の表示させる。

html

<div id='app'>
　<ul>
   <li v-for="la in languages">{{ la }}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

js

new Vue ({
 el: '#app',
 data: [
  languages: ['Ruby', 'PHP', 'Python'],
   ],
 methods: {
  button: function {
   alert();
    }
  }
})

終わりに

Vue.jsの基礎をまとめました。
次回は一歩進んだ内容をまとめるので良ければ見てください！