作りたかったもの
[jQuery から Vue.js へのステップアップ]
(https://qiita.com/mio3io/items/e7b2596d06b8005e8e6f#%E6%96%87%E5%AD%97%E3%82%92%E5%85%A5%E3%82%8C%E6%9B%BF%E3%81%88%E3%82%8B)
これの最初のやつを作りたかった。クリックするとテキストが変わるやつ。
#まずvue.jsをダウンロードしておく
https://jp.vuejs.org/v2/guide/installation.html
その後、html,jsファイルをフォルダに入れておく。
読み込むときのポイント：jqueryと同じ要領で読み込まない
Vue.jsの場合、head内ではなく</body>の直前に
test.js
<script src="〇〇.js"></script>
を入れる。jqueryを読み込ませる要領でhead内に入れてたら何も反映されなくて1時間くらい悩んだ。
コード
test.html
<head>
<script src="vue.js"></script>
</head>
<body>
<h1>Vue.js</h1>
<div id="app">
Hello {{ message }} !
<button @click="update">change</button>
</div>
<script src="test.js"></script>
</body>
test.js
new Vue({
el: '#app',
data: {
message: 'World'
},
methods: {
update() {
this.message = 'Vue.js'
}
}
})