Vue.js最佳实践(五招助你成为vuejs大师)

2

3

4

5

6

7

8

created(){

  this.fetchPostList()

},

watch: {

  searchInputValue(){

    this.fetchPostList()

  }

}

2

3

4

5

6

watch: {

  searchInputValue:{

    handler: ‘fetchPostList‘,

    immediate: true

  }

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

import BaseButton from ‘./baseButton‘

import BaseIcon from ‘./baseIcon‘

import BaseInput from ‘./baseInput‘

export default {

 components: {

  BaseButton,

  BaseIcon,

  BaseInput

 }

}

<BaseInput

 v-model="searchText"

 @keydown.enter="search"

/>

<BaseButton @click="search">

 <BaseIcon name="search"/>

</BaseButton>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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)

})

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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){

 }

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

data() {

 return {

  loading: false,

  error: null,

  post: null

 }

},

created () {

 this.getPost(this.$route.params.id)

},

methods () {

 getPost(postId) {

  // ...

 }

}

<router-view :key="$route.fullpath"></router-view>

2

3

4

5

6

7

8

9

10

<template>

 <li

  v-for="route in routes"

  :key="route.name"

 >

  <router-link :to="route">

   {{ route.title }}

  </router-link>

 </li>

</template>

2

3

4

5

6

7

8

9

10

functional: true,

render(h, { props }) {

 return props.routes.map(route =>

  <li key={route.name}>

   <router-link to={route}>

    {route.title}

   </router-link>

  </li>

 )

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

//父组件

<BaseInput

  :value="value"

  label="密码"

  placeholder="请填写密码"

  @input="handleInput"

  @focus="handleFocus>

</BaseInput>

//子组件

<template>

 <label>

  {{ label }}

  <input

   :value="value"

   :placeholder="placeholder"

   @focus=$emit(‘focus‘, $event)"

   @input="$emit(‘input‘, $event.target.value)"

  >

 </label>

</template>

2

3

4

5

<input

   :value="value"

   v-bind="$attrs"

   @input="$emit(‘input‘, $event.target.value)"

  >

2

3

4

5

6

7

8

9

10

11

12

13

14

<input

  :value="value"

  v-bind="$attrs"

  v-on="listeners"

>

computed: {

 listeners() {

  return {

   ...this.$listeners,

   input: event =>

    this.$emit(‘input‘, event.target.value)

  }

 }

}