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
51
5 min Jekyll/Liquid Plugin cooking
wtnabe
0
24
Ruby de Wasm
wtnabe
0
49
Cloud Native Buildpacksって結局どうなの?
wtnabe
0
41
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
450
Other Decks in Programming
See All in Programming
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
590
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
2
270
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
460
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
640
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
120
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
260
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
190
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
Porting a visionOS App to Android XR
akkeylab
0
910
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
120
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
11
7.1k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Navigating Team Friction
lara
187
15k
It's Worth the Effort
3n
185
28k
Statistics for Hackers
jakevdp
799
220k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Become a Pro
speakerdeck
PRO
29
5.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Writing Fast Ruby
sferik
628
62k
Docker and Python
trallard
45
3.5k
Building Applications with DynamoDB
mza
95
6.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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 !!