Vue.jsの基本
Vue.jsの基本形について書き留めておきます。
[ad#top-1]
完成形
こちらが完成形です。「change」ボタンを押すと「Hello World !」という文字が「Hello Vue.js !」に変わるようになります。
ソースコード
ソースコードは以下のとおりです。
<!DOCTYPE html>
<html lang="jp">
<head>
<title>Vue Test #1</title>
</head>
<body>
<h1>Vue Test #1</h1>
<div id="app">
Hello {{ message }} !
<button @click="update">change</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'World'
},
methods: {
update() {
this.message = 'Vue.js'
}
}
})
</script>
</body>
</html>
[ad#ad-1]
スポンサーリンク