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
360
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
Decoupled System with Turbo Frame
wtnabe
1
37
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
640
let-me-edit-with-editor
wtnabe
0
230
google-photos-and-storage-and-rclone
wtnabe
0
310
Kanazawa.rb meetup #56 Coderetreat Intro
wtnabe
0
340
lightweight authenticity of microservices
wtnabe
0
360
Automate WordPress deployment with WordMove
wtnabe
1
400
CircleCI Hands-on for Beginners
wtnabe
0
370
Introducing Todays CI Services
wtnabe
0
290
Other Decks in Programming
See All in Programming
2024 コーディング研修
ckazu
0
350
Elm Form Validation
bkuhlmann
0
520
Ruby GitHub Packages
bkuhlmann
0
650
Apache Hive 4 on Treasure Data
ryukobayashi
1
450
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.3k
Fast JSX: Don't clone props object #28768
yossydev
1
210
Open standards for building event-driven applications in the cloud
meteatamel
0
190
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Site Reliability Engineering for GMO
pyama86
9
1.1k
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
690
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
920
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Thoughts on Productivity
jonyablonski
60
3.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Navigating Team Friction
lara
179
13k
Being A Developer After 40
akosma
67
580k
Debugging Ruby Performance
tmm1
70
11k
We Have a Design System, Now What?
morganepeng
43
6.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Designing the Hi-DPI Web
ddemaree
276
33k
The Invisible Customer
myddelton
114
12k
A Tale of Four Properties
chriscoyier
153
22k
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 !!