Vue をちゃんと入門
触ったことある。けど業務では未使用だし本格的には触っていない。だもんでちゃんと入門してみることにした(復習の意味も込めて)
参考にするもの
本家を参考にしつつ、無料で実装動画が見れるのでそれを写経をしていこうかと
Vue はでっかい object？
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
例えばこれのmessageを変更する場合app.message = 'change value';のようにすれば変更ができる
でかい object にしか見えない…..
ループ
例えばこんな配列があったとします。これを順に表示する場合
var app = new Vue({
el: "#app",
data: {
todos: [
{ text: "frist text" },
{ text: "second text" },
{ text: "thead text" }
]
}
})
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
こんな感じになります。んー PHP のテンプレートエンジンみたい…for ... in ...これは、けっして真新しくもなくもともと JS で存在しているfor inと同じ挙動してますね。(あっているのか？)
違和感があるとしたらこの箇所が{}とかで括られていない点くらいですかね。
イベント
React でも Vue でも思ったんだけども昔の JS で onClick 属性ってあったと思うんだけど、僕がこの業界に入りたての頃にそんな属性使うのは、やばいっすよって言われた記憶がある…
さて気を撮り直して早速
var app = new Vue({
el: "#app",
data: {
message: "hi Vue!!"
},
methods: {
reverseMessage: () => {
this.message = this.message
.split("")
.reverse()
.join("")
}
}
})
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
ここで自分なりの理解と整理
new Vue()でインスタンスを作成しそれを代入、中身に関して
el element を指しているでしょう(えっへん)。render 先を指定しているイメージ
data React で言う State ってイメージにしておこう。もちろんこのプロパティは object が渡されている(表現があっているのか？)
methods これも React でも同じような class に書くから違和感は、ない。
PHP の class で言うなら el は説明が難しいが名称が異なるだけでこの object のプロパティであるということ
基本 DOM 操作は Vue 任せ
公式にそう書かれている。まぁー確かにここまでの記述で DOM 操作しているものはない。なんということでしょう。DOM 操作から解放された。
ここでは、ちょっと飛ばすけどv-modelという双方向バインディングがかんたんに行えるディレクティブが存在する
次回以降
componentについて学習する。Vue の重要な抽象概念の一つが存在している。ここはかなーり重要だと思うし、VuexやNuxt.jsでも大切になってくる箇所なのでしっかりと身につけて行きたいですな。
ちょっと小話
名探偵コナン結構好きなんだけども、お腹のベルトから出るボールとキック力増強シューズこのコラボって人殺しかねないレベルで危険な気がする。
それとスケボー！こいつもやばい。なんせバイクに追いつかれない速さを持っている。
コナン君はとーーーーーっても危険な小学一年生だ。