Code Serendipity

Keyword: Ruby, Python, javascript, RoR, heroku, AWS...

Code Serendipity

Keyword: Ruby, Python, wordpress, javascript, AWS...

RailsではじめてのVue.js :サンプルコード

https://jp.vuejs.org/images/logo.png

Vue.js とは

Vue.jsはMVVMと呼ばれる設計パターンを採用しているフレームワークです。MVVMフレームワークではModel、View、 ViewModel の3つでアプリケーションを構築します。このシリーズでは、設計パターンに関するややこしい話については触れません。双方向データバインディングを実現することに特化しているため、とてもシンプルにわかりやすく書くことができます。

Vue.jsを使いこなす - Vue.jsとは | CodeGrid

Vue.js のコアは、単純な{{テンプレート構文}}を使って宣言的にデータを DOM に描画することを可能にするシステムです。データと DOM は関連付けられ、そして全てがリアクティブになっています。

はじめに - Vue.js

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


<script>
var app = new Vue({
  el: '#app', // #対象となるHTML要素。ここで指定した要素に対し、dataで指定した値がバインドされる。
  data: {
    message: 'Hello Vue!'
  }
})
</script>

表示非表示をvue.jsで簡単に: v-ifディレクティブ でboolean型に

<div id="app">
  <p v-if="seen">Now you see me</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

ここで

app.seen = false;

にすると消える!

ループ:v-forディレクティブ

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

さらに、pushメソッドで

app.todos.push({ text: 'New item' })

追加/表示できる。

ユーザーのアクションをひろう:v-onディレクティブで リッスン要素(click, etc.)と実行関数を指定

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>


<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

</script>

双方向データバインディング

データバインディングとは、JavaScriptのオブジェクト(モデル)をHTMLテンプレート(ビュー)に結び付けるための機能。

html

<div id="app">
    <input type="text" v-model="name"> <!-- v-model 属性を追加 -->
    <div>Hello {{name}}!</div>
</div>
<script src="vue.js"></script>
<script src="app.js"></script>

app.js

var vm = new Vue({
  el: "#app"  // id="app"となっている要素を、ViewModelとして使う宣言
});

Railsに組み込む

コマンド一発でvue.jsをインストールできるようにwebpackerを入れる。 webpackerはRails 5.1 から導入された、従来のasset piplineとwebpackをつかったJSアプリケーションを共存させるための仕組み。Yarnに依存している。Webpackerが管理するJavaScriptのパスは、app/javascript/packs/になっている。webpackのサポートを有効にするには、rails newコマンドのオプションで–webpackを使用するか、Gemfileのgem ‘webpacker'の部分を有効にして、bin/rails webpacker:installを実行する。 Yarn は5.1 からデフォルトでサポートされるようになった。これによって、package.jsonがアプリケーションに追加され、node_modulesがアセットパイプラインのパスに追加されます。

gem 'webpacker', github: 'rails/webpacker'

f:id:serendipity4u:20170702143626p:plain

その後、

$ rails webpacker:install:vue

とすればvue.jsが使えるようになります。

参考

blog.spicelife.jp