one case of how to begin vuejs

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

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

Webpack ? Parcel ? Yarn ? Babel ? HMR ?

vue-devtools

vuejs/vue-devtools: Chrome devtools extension for debugging Vue.js applications. developer tools
Vue Component Tree Fire DOM

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

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

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

Enjoy Vue.js !!

one case of how to begin vuejs

one case of how to begin vuejs

More Decks by wtnabe

Other Decks in Programming

Featured

Transcript