Kanazawa.rb meetup #64 で紹介した Vue.js の始め方
Vue.js@wtnabeKanazawa.rb meetup #642017-12-16(Sat)at IT-Plaza MUSASHI
View Slide
Vue.jsvue-devtoolsvue-cliruntime ( template )data ( )
Vue.js
※Vue.js v2v1
Vue.jsES 5 compat ( since IE 10 / iOS 6 / Android 4.4 )Progressive JavaScript FrameworkReact AngularJS 1React JS-centricAngularJS 1 Web Components-centric( Google )template
Component ReactSingle File Component, , <style><br/>Scoped CSS<br/>Shadow DOM ( Web Components )<br/>{{ }}<br/>placeholder @ v-<br/>directive<br/>ViewModel<br/>
Reactclass HelloMessage extends React.Component {render() {return (Hello {this.props.name});}}JavaScriptJSX
AngularJS 1...Name:ng-model="yourName"placeholder="Enter a name here">Hello {{yourName}}!ng-directive
Vue.js v2{{ greeting }} World !<br/>export default {<br/>data() {<br/>greeting: 'Hello'<br/>}<br/>}<br/>JavaScript
, props , etcJSX, v- , {{ }}, etc
Progressive
Webpack ? Parcel ? Yarn ? Babel ? HMR ?
Rail
vue-devtools
vuejs/vue-devtools: Chromedevtools extension for debuggingVue.js applications.developer tools VueComponent Tree FireDOM
Vue.js mini eddebug
Small Footprint
vue-cli
vuejs/vue-cli: Simple CLI forscaffolding Vue.js projectsscaffold
vue-cliYarnBrowserify + Browserify-HMRBabel + Babelify + vue-jsxVue + Vueifynpm-run-allsprintf-js
fy JSimportOK
vue-cli OK
progressive
template runtime
Vue2.x template
templatehttps://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-itemVue.component('todo-item', {template: 'This is a todo'})Single File Component
data function
https://jp.vuejs.org/v2/guide/components.html#data-Vue1 :data““
3 Vue.js Vue.js ―Webgihyo.jp …data functiondataWarning
Vue warnvar app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})
var app = new Vue({el: '#app',data: function() {return {message: 'Hello Vue!';}}})
1. template runtime2. data
vue-cliSingle File Componentprogressive
Asset BundlingJS CSSjQuery pluginFlux
Enjoy Vue.js !!