vue.js 猫本 やって見た。属性のデータバインディング v-bindの修飾子
p58 のv-bindの修飾子でつまずいたのでまとめます。
サンプルを作ってもスクロールしたかどうかよくわからない。
サンプルは猫本を購入してください。
サンプルにはtext-content.prop scroll-top.propがサンプルとして挙げられてます。
私はこれを使うに当たってわからんが出ました。
javascriptでいうと、
- text-contentは
- scroll-topは
こちらで記述できるのでは?と何故ケバブケースで記述するんだろう？
こちらに答えがありました。
公式ドキュメントに答えが属性名は大文字、小文字を区別できません。大文字か小文字でねってことだそうです！区別したかったらケバブケースで記述する。
なるほど~。だから大文字の文字の直前を-で挟んで、小文字にしてるんですね。
そして.propをつけることで$elにプロパティを設定できるそうです。
そして動くサンプル。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Vue.js App</title>
</head>
<body>
<div id="app">
<!--この#appの内側にテンプレートを書き込んでいく-->
<div v-bind:text-content.prop="message"></div>
{{ scroll }}
<div v-bind:scroll-top.prop="scroll" class="box">
test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>
</div>
<input type="range" v-model.number="scroll">
</div>
<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script>
var app = new Vue({
el: '#app',
data: {
message:'Vue.js!',
scroll: 0
},
mounted:function(){
this.scroll = 0
}
});
</script>
<style>
.box {
border: 1px solid #000;
overflow: scroll;
height: 100px;
}
</style>
</body>
</html>
htmlファイルを作りこちらを貼って頂いて、ブラウザーで確認してみてください。
