Vue.js改善ナレッジポイントのまとめ

created(){
  this.fetchPostList()
},
watch: {
  searchInputValue(){
    this.fetchPostList()
  }
}

watch: {
  searchInputValue:{
    handler: 'fetchPostList',
    immediate: true
  }
}

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'
export default {
 components: {
  BaseButton,
  BaseIcon,
  BaseInput
 }
}

import Vue from 'vue'
function capitalizeFirstLetter(string) {
 return string.charAt(0).toUpperCase() + string.slice(1)
}
const requireComponent = require.context(
 '.', false, /\.vue$/
  //找到components文件夹下以.vue命名的文件
)
requireComponent.keys().forEach(fileName => {
 const componentConfig = requireComponent(fileName)
 const componentName = capitalizeFirstLetter(
  fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
  //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
 )
 Vue.component(componentName, componentConfig.default || componentConfig)
})

data() {
 return {
  loading: false,
  error: null,
  post: null
 }
}, 
watch: {
 '$route': {
  handler: 'resetData',
  immediate: true
 }
},
methods: {
 resetData() {
  this.loading = false
  this.error = null
  this.post = null
  this.getPost(this.$route.params.id)
 },
 getPost(id){
 }
}

data() {
 return {
  loading: false,
  error: null,
  post: null
 }
},
created () {
 this.getPost(this.$route.params.id)
},
methods () {
 getPost(postId) {
  // ...
 }
}

 ERROR - Component template should contain exactly one root element. 
  If you are using v-if on multiple elements, use v-else-if 
  to chain them instead.

functional: true,
render(h, { props }) {
 return props.routes.map(route =>
  

   
    {route.title}
   
  
 )
}

computed: {
 listeners() {
  return {
   ...this.$listeners,
   input: event => 
    this.$emit('input', event.target.value)
  }
 }
}