vue知识点总结（二）

组件基础

// 定义一个名为 button-counter 的新组件Vue.component('button-counter', {  data: function () {    return {      count: 0
    }
  },  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">  <button-counter></button-counter></div>

一个组件也拥有data、methods、computed、watch这些属性，但一个组件里，data必须是一个函数，data里的数据必须通过return返回。

一个组件必须只能有一个根元素，所以需要将组件包裹在一个父级的div容器里。

组件的注册

组件的全局注册

Vue.component('my-component-name', {  // ... 选项 ...})

组件的局部注册

import ComponentA from './ComponentA.vue'export default {  components: {
    ComponentA
  },  // ...}new Vue({  el: '#app',  components: {    'component-a': ComponentA,    'component-b': ComponentB
  }
})

组件模板

//以VUE为后缀名的文件，有如下模板<template>
  <div></div></template><script></script><style></style>

父子组件传值

父组件向子组件传值，是通过属性来传递的。prop是你可以在组件上注册的一些自定义特性，当一个值传递给一个prop特性的时候，它就变成了那个组件实例上的一个属性。当prop注册之后，就可以把数据作为一个自定义特性传递进来。

//父组件发送数据<blog-post title="My journey with Vue"></blog-post><blog-post title="Blogging with Vue"></blog-post><blog-post title="Why Vue is so fun"></blog-post>//子组件接受数据
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

子组件向父组件传值，是通过事件触发的方式来传递的：

1.绑定   methods:{    handleEvent:function(msg){}
   }
   <son @customEvent="handleEvent"></son>2.触发
子组件内部：
this.$emit(‘customEvent’,100);

ref是可以让父组件得到子组件中的数据和方法：

 1.指定ref属性
    <son ref="mySon"></son>

 2.根据ref得到子组件实例    this.$refs.mySon

parent可以得到父组件的实例：

this.$parent得到父组件的实例

非父子组件间通信

兄弟组件通信:    1.var bus = new Vue();    2.接收方
    bus.$on('eventName',function(msg){})    3.发送方
    bus.$emit('eventName',123);

自定义指令

创建和使用
 Vue.directive('change',{    bind:function(el,bindings){    //首次调用
    },    update:function(el,bindings){    //只要是有数据变化，都会调用
    },    unbind:function(){    //解绑
    }
 })
 <any v-change="count"></any>

钩子函数：

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

componentUpdated：被绑定元素所在模板完成一次更新周期时调用。

unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

自定义指令中传递的三个参数：

el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。

过滤器

1.创建
   Vue.filter(    'myFilter',    function(myInput){       //myInput是在调用过滤器时，管道前表达式执行的结果
       //针对myInput，按照业务需求做处理
       //返回
       return '处理后的结果'
    })2.使用
    <any>{{expression | myFilter}}</any>

在调用过滤器的时候，完成参数的发送和接受

1.发送
<any>{{expression | myFilter(参数1，参数2)}}</any>2.接受
Vue.filter('myFilter',function(myInput，参数1，参数2){    return '处理后的结果'})

Vue生命周期

什么是vue的生命周期

指的是实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom渲染、更新渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

生命周期的作用

生命周期中有多个钩子函数，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

总共有八个阶段也就是八个钩子函数

创建前/后, 载入前/后,更新前/后,销毁前/销毁后

页面第一次加载的时候会触发beforeCreate, created, beforeMount, mounted 这几个钩子，DOM 渲染在 mounted 中就完成

每个周期的具体场景

1. beforeCreate

   在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2. created

   实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：
   数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3. beforeMount

   在挂载开始之前被调用：相关的 render 函数首次被调用。

4. mounted

   el 被新创建的 vm.el 也在文档内。

5. beforeUpdate

   数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

6. updated

由于数据更改导致的虚拟 DOM，重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

1. beforeDestroy

   实例销毁之前调用。在这一步，实例仍然完全可用。

2. destroyed

   Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

作者：闰土在流浪
链接：https://www.jianshu.com/p/1f0ed94253bd