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
440
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
20
5 min Jekyll/Liquid Plugin cooking
wtnabe
0
8
Ruby de Wasm
wtnabe
0
31
Cloud Native Buildpacksって結局どうなの?
wtnabe
0
24
Decoupled System with Turbo Frame
wtnabe
1
87
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
750
let-me-edit-with-editor
wtnabe
0
300
google-photos-and-storage-and-rclone
wtnabe
0
400
Kanazawa.rb meetup #56 Coderetreat Intro
wtnabe
0
420
Other Decks in Programming
See All in Programming
昭和の職場からアジャイルの世界へ
kumagoro95
1
270
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
振り返れば奴(Cline)がいる
keiyagi
0
170
SpringBoot3.4の構造化ログ #kanjava
irof
2
880
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
5k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
180
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
290
WebDriver BiDiとは何なのか
yotahada3
1
120
負債になりにくいCSSをデザイナとつくるには?
fsubal
4
220
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
350
Ruby on cygwin 2025-02
fd0
0
120
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
26
5.1k
Building an army of robots
kneath
302
45k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Building Your Own Lightsaber
phodgson
104
6.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Typedesign – Prime Four
hannesfritz
40
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Fireside Chat
paigeccino
34
3.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 !!