Vue.jsの初歩の初歩

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

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

Vue.jsについて

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

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

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

・データ

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

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

実際に動かしてみる

index.html

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

vue.js

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

クリック処理追加

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

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">