vuejs_meetup.key

Size: px

Start display at page:

Download "vuejs_meetup.key"

まなおうじ
5 years ago
Views:

1 Rails Vue.js Vue.js Meetup

2 About CUUSOO SYSTEM Vue.js Plugin vue-i18n: vue-validator:

3 Vue.js

4 Vue.js

5 HTML UX jquery Ajax Javascript CSS Rails Sprockets

7 MVC UI/UX UI

8 Rails & data-* Controller # Javascript $(document).ready(function () { var module = constantnize($( body ).data( controller-name )); if (module) { module.init(); } }); # HTML template <html> <body data-controller-name= <%= contoller.controller_name %> ></doby> </html>

9 jquery & DOM $('body.projects').on('focus', 'textarea', function () { var value = $(this).val().split( \n ); var value_row = 0; $.each(value, function(i, val) { value_row += Math.max(Math.ceil(val.length / self.cols), 1); }); var input_row = $(this).attr('rows'); var original_row = $(this).data('default_row'); var next_row = (input_row <= value_row)? value_row + 0 : Math.max(value_row + 1, original_row); $(this).attr('rows', next_row); });

12 Vue.js

13 Vue.js

14 jquery UI

16 Vue.js DOM UI CommonJS

17 Vue.js

18 ViewModel Vue.js Web Vue.js Vue.extend module.exports var Modal = module.exports = Vue.extend({ template: require('./modal.html'), components: { }, data: function () { return { title: '', } }, methods: { show: function () { }, hide: function () { }, onclickclose: function (e) { } } }); component system:

19 ViewModel Vue.extend Vue.component require components v-component v-ref # ViewModel var Widget = module.exports = Vue.extend({ template: require('./widget.html'), components: { modal: require('../modal') }, methods: { onclickopenmodal: function () { this.$.modal.show(); }, } }); # View <div class= widget > <div v-component="modal" v-ref="modal"></div> </div>

20 ViewModel TODO ViewModel API conflict namespace v v-events $emit 1 events: { ChildWidget:remove : function (vm, index) { // remove the item from the item collection // }) } onclickremoveitem: function (event, index) { this.$dispatch( ChildWidget:remove, event.targetvm, index ); }) dispatch x onclickremoveitem: function (event, index) { this.$dispatch( ChildWidget:remove, event.targetvm, index ); })

21 Template View Template(html) require # Tempalte <div class= widget > <div v-component="modal" v-ref="modal"></div> </div>

22 Filter Filter ViewModel module.exports require Filter Component ViewModel Vue.filter require filters # Filter module module.exports = { required: function required (val) { return!val? false : true; }, }; # ViewModel var filters = require(./filters ); var Invitation = module.exports = Vue.extend({ template: require('./invitaion'), filters: { validaterequired: function (val) { this.validation. = filters.required(val); return val; }, } });

23 Resource plugin (superagent) WebAPI end-point resource var request = require('superagent-browserify'); module.exports = list; function list (params, fn) { params = params {}; var endpoint = /api/v1/xxx ; // } request.get(endpoint).query(params).withcredentials().end(fn); superagent:

24 Plugin vue-i18n: cookie locale v-t Vue.t Rails i18n like key # Entrypoint var cookie = require('cookie-cutter'); var Vue = require('vue'); var i18n = require('vue-i18n'); // locale setting var locale = cookie.get('locale') en ; Vue.use(i18n, { lang: locale, locales: { en: require('./locales/en.json'), ja: require('./locales/ja.json') } }); # Tempalte <div> <p v-t= foo.bar"></p> </div> vue-i18n:

25 Vue.js app/ assets/javascripts.!"" Capfile!"" Gemfile!"" Gemfile.lock!"" README.md!"" Rakefile!"" app!"" config!"" config.ru!"" db!"" frontend!"" lib!"" log!"" public!"" script!"" spec #"" vendor

26 Vue.js - - UI - API -.!"" Makefile!"" gulpfile.js!"" index.js!"" lib $!"" api $ $!"" utils.js $!"" validates.js $ #"" widgets!"" locales $!"" en.json $ #"" ja.json #"" package.json

27 Gulp + Browserify JS JS app/assets/ javascripts application.js require Sprockets.!"" app $!"" assets $ $!"" images $ $!"" javascripts $ $ $!"" application.js $ $ $!"" bundle.js $ $ $ $ $ $ #"" zzz.js $ $ #"" stylesheets!"" frontend $!"" Makefile $!"" gulpfile.js $!"" index.js $!"" lib $ $!"" api $ $ $ $!"" utils.js $ $!"" validates.js $ $ #"" widgets $!"" locales $ $!"" en.json $ $ #"" ja.json $ #"" package.json

28 Rails Controller script require ViewModel JSON data # erb template <div id="widgets" v-cloak v-repeat="item: items" v-component="widget-item"></div> <script> (function () { var Widget = require('bundle').widget; var data = JSON.parse('<%= j(object.to_json).html_safe %>'); new Widget({ el: '#widgets', data: data }); })();

29 Vue.js Component - - Vue.js Component

30 Vue.js Component - Vue.js Component

31 jquery Vue.js

33 Vue.js UI Model $data Vue.render

node_fest_2014.key

node_fest_2014.key 2014/11/15 Tokyo Node Fest 2014 @ahomu 2014/11/15 Tokyo Node Fest 2014 @ahomu % npm install normalize.css % bower install jquery % npm install -g bower { } package.json "name": "best-practices",