<body>
<script src="vue.js"></script>
<div id="abc">
<p>{{message}}</p>
</div>
<script>
new Vue({
el: '#abc',
data: {
message: 'HelloWorld!'
},
})
</script>
</body>
{{}}二重中括弧はnew Vueでコードされたdataの中の同じキー[message]を探してその値[HelloWorld]を代入し表示してくれる。
(発展）
{{}}の中身はRuby on Railsの式展開#{}のように変数や構文が使えます。
・データの中身を５に変えて
data: { number: 5}
<p>{{number}}</p>
・その数を使って計算させてみる
<p>{{number + 3}}</p>
・関数を使ってメソッドを作って表示
同じ処理を定義し何度も使い回しができる形にしたもの。
関数とは
<script>
function 関数名(){
処理
}
</script>
無名関数とは関数名なしのもの。
<script>
function(){
処理
}
</script>
今回は
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<p>{{sayYes()}}</p>
</div>
<script>
new Vue({
el: '#app',
// data: { number: 5}
methods: {
sayYes: function() {
return 'Yes';
}
}
})
</script>
</body>
