作りたかったもの
jQuery から Vue.js へのステップアップ
これの最初のやつを作りたかった。クリックするとテキストが変わるやつ。
まず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'
}
}
})