Vue.jsの私的なまとめです。
テンプレート
私的テンプレ
import XxxComponent from './components/XxxComponent'
import xxxMixins from './mixins/xxxMixins'
new Vue({
el: '#app',
components: {
'xxx-component': XxxComponent
},
props: {
item: {
type: Object,
required: true,
default: () => {
return {
data: []
}
}
}
},
data () {
return {
title: 'タイトル',
item: []
}
},
created () {
//
},
mounted () {
//
},
watch: {
item (value, oldValue) {
//
},
item: {
handler (value, oldValue) {
//
},
deep: true
}
},
computed: {
xxx (param) {
}
},
methods: {
/**
* 説明
* @param {string} param 内容
* @return {string} return 内容
*/
xxx (param) {
}
},
mixins: [xxxMixins]
})
el
elはマウントする要素
el: '#app'
el: '#app'としたらHTMLのid="app"の中にVue.jsで使いたいHTMLを書く
<div id="app">
// 中略
</div>
data
dataはvue.jsで使うデータを定義する
data () {
return {
title: 'タイトル',
list: {
data: []
}
}
}
マスタッシュ構文
- HTMLの中に
{{ }}でdataやcomputedを表示させる -
$dataを付けるとdataやcomputedと区別が付きやすくなる
data () {
return {
text: 'タイトル'
}
}
<h1>{{ $data.text }}</h1>
v-for
v-forで配列からHTMLにループ処理ができる
data() {
return {
list: [ 'りんご', 'ばなな', 'すいか' ]
};
}
<ul>
<li v-for="item in $data.list">{{ item }}</li>
</ul>
v-model
<input type="text" v-model="$data.text">
v-text
<p v-text="$data.text"></p>
v-if
v-if="!error"-
v-if="text !== 'OK'"などの書き方もできる
<div v-if="error">
<p>エラー</p>
</div>
v-show
<div v-show="error">
<p>エラー</p>
</div>
v-ifとv-showの違い
- v-showはCSSのdisplay要素が変わる
- v-ifはHTML要素が変わる
- 頻繁に変わる場合はv-showを使う
created
- createdはelとDOM作成前
created () {
// 処理
}
mounted
- mountedはDOM作成後
mounted () {
// 処理
}
createdとmountedの違い
- createdはelとDOM作成前
- mountedはDOM作成後
- 詳しくはライフサイクルダイアグラムを参照
watch
- watchは変更があったら処理される
- 第1引数が変更後の値
- 第2引数が変更前の値
watch: {
item (value, oldValue) {
// 処理
}
}
- 配列はhandlerを使う
- deepネストされた値もみる
watch: {
item: {
handler (value, oldValue) {
// 処理
},
deep: true
}
}
computed
- computedはキャッシュされる
computed: {
xxx (param) {
// 処理
}
}
methods
- methodsにはJSDocを入れる
methods: {
/**
* 説明
* @param {string} param 内容
* @return {string} return 内容
*/
xxx (param) {
// 処理
}
}
mixins
- 他のファイルからインポートできる
- 共通部分などに使う
import xxxMixins from './mixins/xxxMixins'
new Vue({
mixins: [xxxMixins]
})
components
<xxx-component>
import XxxComponent from './components/XxxComponent'
new Vue({
components: {
'xxx-component': XxxComponent
},
})
props
- componentsに受け渡す値を定義する
- type:型
- required:必須かどうか
- default:初期値
props: {
item: {
type: Object,
required: true,
default: () => {
return {
data: []
}
}
}
}
template
import template from './templates/XxxTemplate.html'
export default {
template: `
<div>
<p>test</p>
</div>
`
}
- templateは別ファイルにすることができる
- HTMLを分けたほうがHTMLの可読性が良くなる
import template from './templates/XxxTemplate.html'
export default {
template: template
}
$emit
- 親コンポーネントにmethodsを動かす
action (param) {
this.$emit('change-emit', param)
}
<xxx-component
@change-emit="action"
></xxx-component>
axios
- Ajaxで使う
getData () {
const action = '/api/'
const params = {
params: 'xxx'
}
axios.get(action, params)
.then(response => {
// 成功時
}).catch(error => {
console.error(error)
// エラー時
})
}
transition
- transitionはアニメーションと使うことができる
<transition name="fade">
<div v-show="error">
<p>エラー</p>
</div>
</transition>
- CSSが必要
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}