次の現場で使うかもしれない技術ということでvue.jsをちょこちょこっと勉強。とっていっても1時間ぐらいしか勉強しておらずイントロだけですが・・
Contents
vue.jsとは?
- js側とview側とのデータバインディング
- 各種イベントをトリガーに各メソッドを動かすことができる
まだほんのさわりにしか触れてませんが、やった感じではAngularJSと似ているなと実感
ソース
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script> <script src='./vue.js'></script> <title>vue</title> </head> <body> <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> <div id="app"> <li v-for="todo in todos"> {{todo.text}} </li> <button v-on:click="showMessage">押してみよう</button> </div> <div id="app2"> <input v-model="input" v-on:keyup.enter="add"> <ul> <li v-for="todo in todos"> <span>{{todo.text}}</span> <button v-on:click="remove($index)">削除</button> </li> </ul> </div> </body> </html> |
vue.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
window.onload = function() { var demo = new Vue({ el : '#demo', data : { message : 'Hello world' } }) var app = new Vue({ el : '#app', data : { todos : [ { text : 'homerun' }, { text : 'two base' }, { text : 'three base' } ], message :'ok' }, methods:{ showMessage : function(){ //スコープに注意! //functionの外の引数は取れない console.log(this.message); } } }) var app = new Vue({ el : '#app2', data : { todos : [ { text : 'homerun' }] }, methods:{ add : function(){ var text = this.input.trim(); if (text) { this.todos.push({text:text}); } }, remove:function(rowIndex){ //indexの配列の位置を1つだけ削除 this.todos.splice(rowIndex,1) } } }) } |
といった感じでしょうか。
[…] Vue.jsについて […]