one case of how to begin vuejs

088b1b43ff5dd64aa0f000da9e9da777?s=47 wtnabe
December 16, 2017

one case of how to begin vuejs

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

088b1b43ff5dd64aa0f000da9e9da777?s=128

wtnabe

December 16, 2017
Tweet

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
  7. None
  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

  13. None
  14. None
  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
  19. None
  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

  27. None
  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
  34. None
  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

  43. None
  44. Enjoy Vue.js !!