Upgrade to Pro — share decks privately, control downloads, hide ads and more …

one case of how to begin vuejs

Avatar for wtnabe wtnabe
December 16, 2017
Programming
2
460

one case of how to begin vuejs

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

wtnabe

December 16, 2017
Tweet

More Decks by wtnabe

See All by wtnabe
Effective Jekyll
Avatar for wtnabe wtnabe
0
49
5 min Jekyll/Liquid Plugin cooking
Avatar for wtnabe wtnabe
0
23
Ruby de Wasm
Avatar for wtnabe wtnabe
0
48
Cloud Native Buildpacksって結局どうなの？
Avatar for wtnabe wtnabe
0
39
Decoupled System with Turbo Frame
Avatar for wtnabe wtnabe
1
120
join-kanazawarb-or-7years-passed-since-it-was-borned
Avatar for wtnabe wtnabe
0
780
let-me-edit-with-editor
Avatar for wtnabe wtnabe
0
330
google-photos-and-storage-and-rclone
Avatar for wtnabe wtnabe
0
450
Kanazawa.rb meetup #56 Coderetreat Intro
Avatar for wtnabe wtnabe
0
440

Other Decks in Programming

See All in Programming
AIプログラマーDevinは PHPerの夢を見るか？
Avatar for Shinya Saita shinyasaita
1
230
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
Avatar for Yuichi Maekawa kaelaela
10
6k
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
250
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
2
540
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
Avatar for Takuya Katsusa takuyakatsusa
2
560
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
120
Android 16KBページサイズ対応をはじめからていねいに
Avatar for mine2424 mine2424
0
130
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
Avatar for 武田 憲太郎 kentaroutakeda
2
950
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
Avatar for kesoji kesoji
0
240
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
Avatar for shimabox shimabox
2
530
AI コーディングエージェントの時代へ：JetBrains が描く開発の未来
Avatar for Masaru Horioka masaruhr
1
190
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
Avatar for Shohei Okada okashoi
1
270

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
690
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.9k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k

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 !!