Vue常用知识点记录

---

一、计算属性

<template>
  <div>
    <input type="text" v-model="msg"><br>
    <p>computed: {{reverseMsg}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return{
      msg: ''
    }
  },
  computed: {
    reverseMsg () {
      return this.msg.split('').reverse().join('');
    }
  }
}
</script>

二、侦听器

<script>
export default {
    data() {
        return {
            title: '',
            obj: {
                a: 1,
                b: 2
            }
        }
    },
    watch: {
        // 1、 普通监听
        title (val, oldVal) {
            console.log(val, oldVal);
        },
        // 2、 深度监听
        obj: {
            handler (val, oldVal) {
                console.log(val, oldVal);
            },
            deep: true, // 开启深度检测
            immediate: true // 开启时 回调会在监听开始之后，立即调用
        }
    }
}
</script>

三、过滤器

<template>
  <div>
    <p>computed: {{date | formatDate }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return{
      date: Date.now();
    }
  },
  filters: {
    formatDate (val) {
      const date = new Date(val);

      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
}
</script>

四、组件之间通信

1、父组件向子组件传值

// father.vue
<template>
    <div>
        <Child :title='title' />
    </div>
</template>
<script>
export default {
    data () {
        return {
            title: '父标题'
        }
    }
}
</script>
// child.vue
<template>
    <div>{{title}}</div>
</template>
<script>
export default {
    props: ['title']
}
</script>

2、子组件调用父组件的方法

// father.vue
<template>
    <div>
        <Child @fatherFun="fatherFun" />
    </div>
</template>
<script>
export default {
    data () {
        return {
            title: '父标题'
        }
    },
    methods: {
        fatherFun () {}
    }
}
</script>
// child.vue
<template>
    <div>
        <button @click="useFatherFun">调用父组件方法</button>
    </div>
</template>
<script>
export default {
    methods: {
        useFatherFun () {
            this.$emit('fatherFun');
        }
    }
}
</script>

3、使用ref给子组件注册引用信息

<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script>
import Child from '@/views/Child';
export default {
  name: 'test',
  components: {
    Child
  },
  mounted () {
    console.log(this.$refs.child);
  }
}
</script>
<style lang="scss" scoped>

</style>

4、EventBus

// EvenBus.js
import Vue from 'vue';
export default new Vue();

// 注册事件
import eventbus from './EventBus';
<script>
export default {
    created () {
        eventbus.$on('target', () => {
            
        });
    }
}
</script>
// 触发事件
import eventbus from './EventBus';
<script>
export default {
    created () {
        eventbus.$emit('target');
    }
}
</script>

5、vuex 数据状态管理

六、vue-router 路由

1、使用this.$router.push() 编程式导航：push、go

// params 传值
this.$router.push({
    name: 'home',
    params: {
        id: 'params'
    }
})
// query传值
this.$router.push({
    path: '/',
    query: {
        id: 'query'
    }
})
// 路由地址传值
// 配置路由
{
    path: 'aaa/:id'
}
// 跳转
this.$router.push({
    path: '/aaa/${id}'
})

2、使用router-link :to 声明式导航

// params 传值
<router-link :to="{name: 'home', params: {id:'params'}}">router-link传值</router-link>
<router-link :to="{path: '/', query:{id: 'query'}}">router-link传值</router-link>
<router-link :to="{path: '/about/123'}">路由地址传值</router-link>

3、导航守卫

// 全局前置守卫
router.beforeEach((to, from, next) => {
    // ...
});

// 全局后置钩子
router.afterEach((to, from) => {
    // ...
});

// 路由独享守卫
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
});

// 组件内的守卫
cost Foo = {
    template: `...`,
    beforeRouteEnter (to, from, next) {
        // ...
    },
    beforeRouteUpdate (to, from, next) {
        // ...
    },
    beforeRouteLeave (to, from, next) {
        // ...
    }
}