Vue.js
★Progressive framework
Declarative Rendering
↓
Component System
↓
Client-side Routing
vue-router
↓
Large-scale State Management
vuex
↓
Build System
vue-cli， vueify, vue-loader
↓
Client-server Data Persistence
★単一ファイルコンポーネント
https://jp.vuejs.org/v2/guide/single-file-components.html
npm install -g vue-cli
vue -V
vue init <webpackなど> my-project
cd my-project
npm install
npm run dev
npm run build
テンプレート種類： https://github.com/vuejs-templates
★短縮の書き方
v-bind -> :
<div :style="{ background: color }"></div>
v-on -> @
<button @click="funcName"></button>
★HTMLとJavaScriptの連携方法
方法１
<div id="app"></div>
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
方法２
<div id="app"></div>
import App from './App.vue'
new Vue({
el: '#app',
render: h => h('App'), //<App/>
components: {
App
}
})
方法３
<div id="app">
<app></app>
</div>
import App from './App.vue'
new Vue({
el: '#app',
components: {
App
}
})
方法４
<div id="app"></div>
import App from './App.vue'
new Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})
★vue routerにパラメタ渡し
<router-link to="/admin/create">...</router-link>
const router = new VueRouter({
routes : [
{
path: '/admin/:action',
component: admin,
props: true
},
{
path: '*',
component: notfound
}
]
});
var admin = {
props: ['action'],
...
};
※利用時にthis.action
★Template定義
1. Strings
Vue.component('my-checkbox', {
template: `<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title"></div></div>`,
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});
2. ES6 Template Literals
Vue.component('my-checkbox', {
template: `<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>`,
...dataとmethods：略...
});
3. X-Templates
Vue.component('my-checkbox', {
template: '#checkbox-template',
...dataとmethods：略...
});
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title">{{ title }}</div>
</div>
</script>
4. Inline Templates
Vue.component('my-checkbox', {
...dataとmethods：略...
});
<my-checkbox inline-template>
<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title">{{ title }}</div>
</div>
</my-checkbox>
5. Render Functions
Vue.component('my-checkbox', {
...dataとmethods：略...
render(createElement) {
return createElement(
'div',
{
attrs: {
'class': 'checkbox-wrapper'
},
on: {
click: this.check
}
},
[
createElement(
'div',
{
'class': {
checkbox: true,
checked: this.checked
}
}
),
createElement(
'div',
{
attrs: {
'class': 'title'
}
},
[ this.title ]
)
]
);
}
});
6. JSX
Vue.component('my-checkbox', {
...dataとmethods：略...
render() {
return <div class="checkbox-wrapper" onClick={ this.check }>
<div class={{ checkbox: true, checked: this.checked }}></div>
<div class="title">{ this.title }</div>
</div>
}
});
7. Single File Components
<template>
<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title">{{ title }}</div>
</div>
</template>
<script>
export default {
...dataとmethods：略...
}
</script>
Vue: HTML先 -> JavaScript後
React: JavaScript先 -> HTML後
