vue.jsとは？なぜこれを勉強しようと思ったか？

vue.jsはMVCのVの部分のフレームワークでがっつり全体を作ることもできるし、jqueryのように部分的にも使うことができる。SPA、ないしPWAが今後増えることを考え、勉強しようと思った。特徴は下記

双方向バインディング

勉強方法

公式のドキュメントから勉強するのを今回は挑戦してみる。

vueの読み込む順番

Vueインスタンスを定義するファイルより先に読み込まないとエラーをはくのでrailsの場合、applicstion.jsに追記

application.js

//= require rails-ujs
//= require turbolinks
//= require vue
//= require_tree .

まずは事例で

変数を表示させたい時

なにか変数を定義してそれを表示させるという基本的な所から。

index.html

<div id="app">
  {{ message }}
</div>

vue.js

const app = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  }
})

結果 hello

vueは最初にvueオブジェクトを定義する
vueオブジェクトは下記２つを設定
- el:VueインスタンスがバインドするDOM要素の指定
- data : Vueインスタンスが持つプロパティオブジェクト

イベントで発火させて何かしたい時

index.html

<div id="app">
  <button v-on:click="changeMsg">change message</button>
  <p>{{ message }}</p>
</div>

例

const app = new Vue({
  el: '#app',
  data: {
    message: 'あばば'
  },
  methods: {
    changeMsg: function () {
      this.message = 'えばば'
    }
  }
})

vueではタグに

v-on:DOMイベント

とつけるとそのイベントのときに発火させられる。DOMイベントは下記のページに表が。

またmethodsで関数をvueインスタンスに渡すことができます。上記でやっていることは

elでappというVueインスタンスを指定
基本はdata内の処理を行う
ただし、methodsでchangeMsgを定義
htmlにv-on:clickでクリックした際にmethodsが発火するようにした

展開

変数を展開したいときは{{}}二重中括弧で囲む。vueで展開されたものはHTMLではなくプレーンなテキストとして扱われる。

例

<span>Message: {{msg}}</span>

htmlとして展開したい場合

例

rwHtml == <span style="color:red">this should be red.</span>
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

結果

Using mustaches:this should be red.
Using mustaches:this should be red.

v-htmlプロパティでhtmlで出力できる。

vueの記述方法

vueは大きく分けて下記二種類記述方法があり、基本的には下記の使い分けを個人的にはしている。

render関数で記述

プログラミングぽいというか<h2>を何個生成してなどループ処理などプログラミングっぽい記述をしたいときに使う。可読性は低い。

単一ファイルコンポーネント

htmlをパーツで記述する。vueは基本この書き方のほうが可読性が高くていい感じ。

コンポーネント

vue.jsではhtmlごとまとめることができてそれをコンポーネントと呼んでいる。

javascript

var MyComponent = Vue.extend({
  // オプション...
})
// グローバルに my-component タグでコンポーネントを登録する
Vue.component('my-component', MyComponent)
new Vue({
el:'#example'
})

html

<div id="example">
  <my-component></my-component>
</div>

気をつけたい細かいところ

`@click`=v-on

v-onは@clickと書くことができる

用語集

ディレクティブ・・・vから始まるvue.js特有の属性

vue.js入門