教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
ここでは、Change ボタンを押すことによって、Set Message
が Changd Message
に変わるような実装を行なっていきます。
まずは、次のように追記をしていきましょう。
Copied!└── public
└── first_vue.html(変更前)
html12345678910111213141516171819202122232425262728 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message2 }}</p>
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!',
message2: 'Hoge'
}
} // この行から編集
})
</script>
</body>
</html>
Copied!└── public
└── first_vue.html(変更後)
html1234567891011121314151617181920212223242526272829303132333435363738 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message2 }}</p>
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!',
message2: 'Hoge'
}
},
// ここから追記する
mounted () { // 説明 2.7
this.setMsg(); // 説明 2.8
},
methods: { // 説明 2.9
setMsg: function () { // 説明 2.10
this.message = 'Set Message'; // 説明 2.11
}
}
// ここまで追記する
})
</script>
</body>
</html>
追加箇所の説明をしていきます。
mounted とすることで、アプリが立ち上がった最初のタイミングで実行される関数を定義できます。(説明 2.7)
this
とすることで、Vue オブジェクト自身を指す事になります。this.setMsg()
とすることで、これから定義する setMsg
メソッドを実行できます。(説明 2.8)
methods
とすることで、Vue オブジェクト内に関数を定義できます。(説明 2.9)
この中でsetMsg : fucntion() {}
と記述して処理を定義します。(説明 2.10)
this.message
とすることで、Vue オブジェクトの data 内で定義した変数 message を参照できます。ここではその 変数 message
に対して 'Set Message'
という文字列を代入させています。(説明 2.11)
ここまでできたら、次のステップに進みましょう。
Copied!└── public
└── first_vue.html(変更前)
html123456789101112131415161718192021222324252627282930313233343536 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message2 }}</p> <!-- この次の行に追記 -->
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!',
message2: 'Hoge'
}
},
mounted () {
this.setMsg();
},
methods: {
setMsg: function () {
this.message = 'Set Message';
} // この行から追記
}
})
</script>
</body>
</html>
Copied!└── public
└── first_vue.html(変更後)
html123456789101112131415161718192021222324252627282930313233343536373839404142 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message2 }}</p>
<button v-on:click="changeMsg">Change</button> <!-- 説明 2.12 -->
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!',
message2: 'Hoge'
}
},
mounted () {
this.setMsg();
},
methods: {
setMsg: function () {
this.message = 'Set Message';
},
// ここから追記する
changeMsg: function() { // 説明 2.13
this.message = 'Changed Message'
},
// ここまで追記する
}
})
</script>
</body>
</html>
追加箇所の説明をしていきます。
v-on:click="changeMsg"
で click が行われた時に changeMsg
メソッドを実行するという意味になります。(説明 2.12)
ここでは setMsg
メソッドと同じように changeMsg
メソッドを定義してボタンクリックに応じで処理が行われることを確認します。(説明 2.13)
上記のように、Change ボタンを押すことによって Set Message
が Changd Message
に変わります。
ここまでできたら、次のステップに進みましょう。