one case of how to begin vuejs

Kanazawa.rb meetup #64 で紹介した Vue.js の始め方

Transcript

1. Vue.js @wtnabe Kanazawa.rb meetup #64 2017-12-16(Sat) at IT-Plaza MUSASHI
2. Vue.js vue-devtools vue-cli runtime ( template ) data ( )
3. Vue.js
4. ※ Vue.js v2 v1
5. Vue.js ES 5 compat ( since IE 10 / iOS 6 / Android 4.4 ) Progressive JavaScript Framework React AngularJS 1 React JS-centric AngularJS 1 Web Components-centric ( Google ) template
6. Component React Single File Component <template>, <script>, <style> Scoped CSS Shadow DOM ( Web Components ) {{ }} placeholder @ v- directive ViewModel
8. React class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } JavaScript JSX
9. AngularJS 1 <html ng-app> ... <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> ng-directive
10. Vue.js v2 <template> <p>{{ greeting }} World !</p> </template> <script> export default { data() { greeting: 'Hello' } } </script> JavaScript
11. , props , etc JSX, v- , {{ }} , etc
12. Progressive
15. Webpack ? Parcel ? Yarn ? Babel ? HMR ?
16. Rail
17. vue-devtools
18. vuejs/vue-devtools: Chrome devtools extension for debugging Vue.js applications. developer tools Vue Component Tree Fire DOM
20. Vue.js mini ed debug
21. Small Footprint
22. vue-cli
23. vuejs/vue-cli: Simple CLI for scaffolding Vue.js projects scaffold
24. vue-cli Yarn Browserify + Browserify-HMR Babel + Babelify + vue-jsx Vue + Vueify npm-run-all sprintf-js
25. fy JS import OK
26. vue-cli OK
28. progressive
29. template runtime
30. Vue2.x template
31. template https://jp.vuejs.org/v2/api/#template
32. https://jp.vuejs.org/v2/guide/installation.html# https://jp.vuejs.org/v2/guide/installation.html# https://jp.vuejs.org/v2/guide/installation.html# - https://jp.vuejs.org/v2/guide/installation.html#
33. template // Define a new component called todo-item Vue.component('todo-item', { template: '<li>This is a todo</li>' }) Single File Component
35. data function
36. https://jp.vuejs.org/v2/guide/components.html#data - Vue 1 : data “ “
37. 3 Vue.js Vue.js ― Web gihyo.jp … data function data Warning
38. Vue warn var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
39. var app = new Vue({ el: '#app', data: function() { return { message: 'Hello Vue!'; } } })
40. 1. template runtime 2. data
41. vue-cli Single File Component progressive
42. Asset Bundling JS CSS jQuery plugin Flux
44. Enjoy Vue.js !!