kmmkの雑種系日記

学習まとめです。

Vue.jsの初歩の初歩

1 Vue.jsの歴史っぽいこと

最近フロントエンドがバックエンドの責務も負うようになってきて複雑化してきた。

Vue.jsについて

UIを構造化して「コンポーネント」として利用することで、DOM操作をしやすくしている

f:id:makoo5:20190731144507p:plain

Vue.jsでUIを構築する際の考え方

UIは以下の3つから成り立ってる

・データ

・ビュー(データを画面に表示するもの)

・アクション(ユーザーのイベント・データ変更など)

実際に動かしてみる

index.html

<div id="app">
<p>
{{mes}}
</p>
</div>

vue.js

new Vue({
el:'#app',
data:{
mes:'こんにちは'
}
});

クリック処理追加

ここではクリックするとフォロワーが増える疑似体験ができるものを例に書いていきます。

f:id:makoo5:20190731181119p:plain

index.html

<div id="app">
   <p>{{count}}人にフォローされています</p>
   <button v-on:click="increment">フォローする</button>
</div>

Vue.js

new Vue({
   el:'#app',
   data:{
      count:0
   },
   methods:{
    increment: function(){
   this.count += 1
  }
  }
})

Tips

オプション名 内容
data ビューに表示するためのデータを記述
el 適応させる要素
methods イベント時の振る舞い
computed 算出される値(複雑なロジック)
filters データを文字列と整形する

おまけ

置き換えれる

//前
   <button v-on:click="increment">

//後
   <button @click="increment">