vue.js

vue.js入門

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

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

勉強方法

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

https://jp.vuejs.org/index.html

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オブジェクトは下記2つを設定
    • 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イベントは下記のページに表が。

https://developer.mozilla.org/ja/docs/Web2/Reference/Events

また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.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>