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
380
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
49
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
680
let-me-edit-with-editor
wtnabe
0
250
google-photos-and-storage-and-rclone
wtnabe
0
330
Kanazawa.rb meetup #56 Coderetreat Intro
wtnabe
0
360
lightweight authenticity of microservices
wtnabe
0
380
Automate WordPress deployment with WordMove
wtnabe
1
420
CircleCI Hands-on for Beginners
wtnabe
0
390
Introducing Todays CI Services
wtnabe
0
290
Other Decks in Programming
See All in Programming
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
日付と正規化
megmogmog1965
0
140
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
【Go言語】ジェネリクス
tomo1227
0
170
継続的な活動で築く地方エンジニアの道
myamashii
2
360
유연한 Composable 설계
l2hyunwoo
0
380
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
CSC307 Lecture 11
javiergs
PRO
0
240
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Web development in the modern age
philhawksworth
203
10k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Visualization
eitanlees
139
14k
BBQ
matthewcrist
82
9k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
YesSQL, Process and Tooling at Scale
rocio
166
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Thoughts on Productivity
jonyablonski
64
4.1k
For a Future-Friendly Web
brad_frost
173
9.2k
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 !!