Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
one case of how to begin vuejs
Search
wtnabe
December 16, 2017
Programming
2
460
one case of how to begin vuejs
Kanazawa.rb meetup #64 で紹介した Vue.js の始め方
wtnabe
December 16, 2017
Tweet
Share
More Decks by wtnabe
See All by wtnabe
Effective Jekyll
wtnabe
0
49
5 min Jekyll/Liquid Plugin cooking
wtnabe
0
23
Ruby de Wasm
wtnabe
0
48
Cloud Native Buildpacksって結局どうなの?
wtnabe
0
39
Decoupled System with Turbo Frame
wtnabe
1
120
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
780
let-me-edit-with-editor
wtnabe
0
330
google-photos-and-storage-and-rclone
wtnabe
0
450
Kanazawa.rb meetup #56 Coderetreat Intro
wtnabe
0
440
Other Decks in Programming
See All in Programming
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.7k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
160
Team operations that are not burdened by SRE
kazatohiei
1
310
ふつうの技術スタックでアート作品を作ってみる
akira888
1
890
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
120
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
2
170
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
130
型で語るカタ
irof
0
150
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
Featured
See All Featured
Designing for Performance
lara
610
69k
Writing Fast Ruby
sferik
628
62k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Scaling GitHub
holman
460
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Become a Pro
speakerdeck
PRO
29
5.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Documentation Writing (for coders)
carmenintech
72
4.9k
For a Future-Friendly Web
brad_frost
179
9.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Transcript
Vue.js @wtnabe Kanazawa.rb meetup #64 2017-12-16(Sat) at IT-Plaza MUSASHI
Vue.js vue-devtools vue-cli runtime ( template ) data ( )
Vue.js
※ Vue.js v2 v1
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
Component React Single File Component <template>, <script>, <style> Scoped CSS
Shadow DOM ( Web Components ) {{ }} placeholder @ v- directive ViewModel
None
React class HelloMessage extends React.Component { render() { return (
<div> Hello {this.props.name} </div> ); } } JavaScript JSX
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
Vue.js v2 <template> <p>{{ greeting }} World !</p> </template> <script>
export default { data() { greeting: 'Hello' } } </script> JavaScript
, props , etc JSX, v- , {{ }} ,
etc
Progressive
None
None
Webpack ? Parcel ? Yarn ? Babel ? HMR ?
Rail
vue-devtools
vuejs/vue-devtools: Chrome devtools extension for debugging Vue.js applications. developer tools
Vue Component Tree Fire DOM
None
Vue.js mini ed debug
Small Footprint
vue-cli
vuejs/vue-cli: Simple CLI for scaffolding Vue.js projects scaffold
vue-cli Yarn Browserify + Browserify-HMR Babel + Babelify + vue-jsx
Vue + Vueify npm-run-all sprintf-js
fy JS import OK
vue-cli OK
None
progressive
template runtime
Vue2.x template
template https://jp.vuejs.org/v2/api/#template
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#
template // Define a new component called todo-item Vue.component('todo-item', {
template: '<li>This is a todo</li>' }) Single File Component
None
data function
https://jp.vuejs.org/v2/guide/components.html#data - Vue 1 : data “ “
3 Vue.js Vue.js ― Web gihyo.jp … data function data
Warning
Vue warn var app = new Vue({ el: '#app', data:
{ message: 'Hello Vue!' } })
var app = new Vue({ el: '#app', data: function() {
return { message: 'Hello Vue!'; } } })
1. template runtime 2. data
vue-cli Single File Component progressive
Asset Bundling JS CSS jQuery plugin Flux
None
Enjoy Vue.js !!