vue.jsを初めて学ぶ① [hello world]

vue.jsを学ぶ記事では一貫して、
jsfiddle上で、Vue.jsのCDNを読み込んで使用していく。

jsfiddle → ブラウザで、html,css,vueが実装できる。

Vue.js → CDNが使用できる。

hello world

• ガイドへ移動
  
• scriptタグをindex.htmlに貼り付ける

以下どちらでも可能

index.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

• scriptタグを使用して、vue.jsのCDNを使用できるようにする
• {{message}}にて、Vueのmessage内容が反映される。

index.js

new Vue({
　el: '#app',
　data: {
　　message: 'Hello World'
　}
})

• elにて、id'app'を持つ要素にdata(message)をもたせる。

以上で Hello Worldが表示される。

Hello Worldを反転させる

• htmlファイルに、buttonタグとvue専用のDOMイベント v-on:click="メソッド名" を追加。

index.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id = "app">
  <p>
    {{message}}
  </p>
  <button v-on:click="reverseMessage">
    メッセージ反転
  </button>
</div>

• jsファイルに、methodsを追加。ｈｔｍｌで指定したDOMのメソッド名とfunction関数を記述する。この関数がDOMが動作した時の処理になる。

(reverseMessageでは、文字が反転する関数が記述される。)

index.js

new Vue({
	el: '#app',
  data: {
  	message: 'Hello World'
  },
  methods: {
  	reverseMessage: function() {
  		this.message = this.message.split('').reverse().join('')
  	}
  }
})

まとめ

1. htmlファイルにscriptタグを導入し、Vue.jsをインストール
2. new Vue（）で括ることでVue.jsが使用できる
3. el: htmlファイル内の要素を指定
4. data: データをもたせる事ができる。さらに、messageで文字列などの要素を持たせる。
5. jsファイルで指定した要素（idやclass）を、htmlファイルに用意し{{}}で囲み指定する。message要素が表示。
6. Vue専用DOMのv-on:clickを追加
7. reverseMessageで、文字反転の関数を呼び出す。