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
400
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
Ruby de Wasm
wtnabe
0
4
Cloud Native Buildpacksって結局どうなの?
wtnabe
0
9
Decoupled System with Turbo Frame
wtnabe
1
59
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
700
let-me-edit-with-editor
wtnabe
0
260
google-photos-and-storage-and-rclone
wtnabe
0
350
Kanazawa.rb meetup #56 Coderetreat Intro
wtnabe
0
380
lightweight authenticity of microservices
wtnabe
0
400
Automate WordPress deployment with WordMove
wtnabe
1
430
Other Decks in Programming
See All in Programming
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
LangChainの現在とv0.3にむけて
os1ma
4
900
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
200
Rubyのobject_id
qnighy
6
1.3k
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
370
今インフラ技術をイチから学び直すなら
yuhta28
1
130
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
130
What you can do with Ruby on WebAssembly
kateinoigakukun
0
160
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
130
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
910
Featured
See All Featured
A better future with KSS
kneath
235
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
We Have a Design System, Now What?
morganepeng
48
7.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Being A Developer After 40
akosma
84
590k
Side Projects
sachag
451
42k
Embracing the Ebb and Flow
colly
83
4.4k
Infographics Made Easy
chrislema
239
18k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Practical Orchestrator
shlominoach
185
10k
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 !!