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('')
  	}
  }
})

まとめ

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