VUE2学习总结

0. render 函数：用来渲染模板的

render (createElement, context) {
  // 渲染模板返回的值就是页面展示的效果
  return createElement('h1', '标签1')
}

1. 交给vue进行管理的函数，一般格式写this对象会指向vm，写成箭头函数this则会指向window；不是vue管理的函数，一般写成箭头函数则会指向vm，写成一般格式则会 指向window

2. Vue.set()

在对现有的对象进行添加属性或者修改，如果直接通过如下直接赋值的方式是不会生效的。

export default {
  data () {
    return {
      persons: [
        {id: 1, name: "张三", age: 18},
        {id: 2, name: "李四", age: 15}
      ]
    }
  },
  methods: {
    changeObj(){
      this.persons[0] = {id: 1, name: "赵六", age: 88}  // 直接赋值不会生效
    }
  }
}

是因为一般在data中的属性或对象都会有各自对应的getter和setter，直接添加是没有这两个对应方法，导致不会去重新渲染模板，但是数据已经被修改的情况。通过使用Vue.set()可以解决新增属性或者修改属性达到动态修改渲染视图。

changeObj(){
  // 为某个对象添加属性；但是有局限性，只能给data中某个对象去追加属性，并不能直接往data身上直接追加
  this.$set(student, "gender", "male")

  // 修改数组的第一个元素
  this.$set(this.persons, 0, {id: 1, name: "赵六", age: 88})
}

※：也可以通过调用一些被vue包裹的api进行操作也会进行动态的渲染，例如数组的api，也可以被vue侦听到重新渲染模板

push()、pop()、shift()、unshift()、splice()、sort()、reverse()

3. 过滤器

通过一个 | 代表过滤器，类似Linux的管道操作，可以嵌套多个过滤器。

{{ keywords | changeWord("yyyy") }}
   有参过滤器
{{ keywords | changeMsg }}
            无参过滤器
{{ keywords | changeMsg | changeWord("yyyy") }}
  嵌套过滤器

上面定义的是局部过滤器，组件和组件之间不能共用，下面定义全局过滤器。

Vue.filter("changeMsg",function (value){
  return value.subString(1)
})

4. 收集表单参数

通过 v-model 接收参数，只会接收到 input 类型的 value 值。当遇见CheckBox时会比较特殊。

乒乓球:
羽毛: 

还可以设置一些v-model接收的相关信息

v-model.lazy    // 代表懒加载，失去焦点时，才会将值同步过去
v-model.number  // 只接受数字类型
v-model.trim    // 自动去除空格

5. 一些指令

{{name}}
     // 在渲染前不会展示
{{age}}
       // 只会参与一次计算
XXX
            // 不会解析内容

6. vue的生命周期(启动大致流程)

启动流程：
1 首先初始化Vue相关的事件、以及生命周期相关。
2 执行BeforeCreate钩子函数，此时还无法访问vm中的data、methods。
3 初始化数据监测、数据代理。
4 执行created钩子函数可以访问vm中的data、methods。
5 判断是否有配置el配置项，如果没有在vm.$mount(el)时候再执行。
6 判断是否有配置template配置项，如果没有则编译el的外部HTML作为模板，生成虚拟dom；如果有通过render函数解析模板。
7 执行beforeMount钩子函数，此时页面还未经过编译，所有对dom的操作都不会生效。
8 将虚拟dom 替换 真实dom，创建vm.$set 并替换掉 el。
9 执行mounted钩子函数，页面呈现经过vue编译的dom， 对dom的操作均奏效， 一般再次进行开启定时器，订阅消息，绑定自定义事件  初始化过程结束。

更新流程：
首先会执行 beforeUpdate钩子函数，此时数据是新的，页面是旧的。
然后根据新数据生成新的虚拟dom。
最后执行 updated 钩子函数，此时数据是新的，页面也是新的; PS：尽量不要在这里更改组件的状态有可能会导致无限循环。

销毁流程
首先会执行 beforeDestroy 钩子函数， 一般在此关闭定时器，取消消息订阅等工作  dom还可以用。
然后移除所有的组件以及所有的监视。
最后执行 destroyed 钩子函数。

当vm调用$destroy的时候就会触发销毁流程，调用该方法会清除vm实例，并清除它与其他实例的链接，解绑所有命令，只是会将自定义事件解除。
在销毁hook函数中放更新数据的操作，不会触发updated和beforeUpdate钩子的。

7. 组件相关

通过 Vue.extend 创建子组件

// 传入的参数和 new Vue的时候相似，不需要传$el这个属性
const newA = Vue.extend({
  data () {
    return {
      name: "sonComponent"
    }
  }
})

使用组件时，如果是单文件组件需要先引入。

※：每个组件中的 this 都是指向当前组件对象。

注册全局组件：

Vue.component('hello', {})  // 名称，传递的对象和new Vue大致相同

组件的本质：

直接输出组件，会发现其本质就是一个构造函数 VueComponent，由 vue.extend 方法生成的。

ƒ VueComponent (options) {
    this._init(options);
}

※：vm 和 vc 有如下关系，这样是为了让 vc 也能使用 vm 的东西。让Vue原型对象作为兜底。

VueComponent.protoType.__proto__ === Vue.protoType  

8. ref 属性：可以通过ref 绑定一个dom对象，相当于 id 属性的替代品。

我是个标签

9. props 属性：用于向组件传递参数，并规范接收参数的格式等属性。可以在子组件的 $attrs 查看到父组件传递但是并未声明接收的属性；如果接收了就不会出现在 $attrs 中。

向组件传递参数

接收参数

export default {
  // 方式一: 只写变量名称
  props: ['peach', 'pear']

  // 方式二: 指定类型接收，类型不匹配也能显示出来，但是会报错
  props: {
    'peach': String,
    'pear': Number
  }

  // 方式三: 指定每个字段的类型
  props: {
    'pear': {
      required: false,  // 指定是否必填
      type: String,     // 指定类型
      default: 'sdsd'   // 指定默认值
    }
  }
}

tips：props是只读的不能修改，如果需要修改需要在data中进行备份；当和自身的data中变量名称冲突时，props的优先级更高。

10. 混入(mixIn)

所谓混入，就是将两个组件通用的逻辑抽离成一个单独的文件。

混入文件：

export default {
  mounted () {
    console.log("挂载")
  },
  methods: {
    makeNoise(){
      console.log("makeNoise")
    }
  }
}

局部混入：

import mix from '../public_minins'   // 引入混入文件

export default {
  // 如果方法或属性冲突了，会以当前实例的为主；如果生命周期钩子冲突会都执行。
  mixins: [mix]    // 可以混入多个js
}

全局混入：在 main.js 中进行配置

import mix from './public_minins'

Vue.mixin(mix)

11. 插件

插件的本质是个对象，但是必须要有一个install 方法，这个方法Vue会来调用。

定义插件：

export default {
  install(Vue, option){
    // 可以接收两个参数，第一个是Vue对象，第二个是注册时传入的参数
  }
}

注册插件：

import tip from './public_minins'

Vue.use(tip, '你的名字', '天气之子')

12. 事件总线

用于组件之间信息的传递，其实Vue中没有事件总线，只不过是向 Vue.prototype 身上定义了一个组件属性，这样可以让所有的 vm 和 vc 都可以使用，通过这个这个组件进行消息的绑定和触发，以此达到传递消息的目的。一般多用于兄弟组件之间。

定义事件总线：一般在beforeCreated中定义

new Vue({
  ...
  
  beforeCreate () {
    Vue.prototype.messageBus = this  // 创建一个事件总线 
  }
})

在A组件中注册事件

在B组件触发事件

13. 动画和过渡

动画和过渡都需要 标签对HTML元素进行包裹。通过v-show控制元素是否展示。

动画css的定义：需要定义好@keyframe，以及按照vue规则定义好的css。vue的类名规则是：name(transition标签中定义的name，如果没有定义默认是 v) - 动作(enter / leave) - active。

过渡效果css的定义：这里也是需要和name属性一起使用，不过有个技巧是，过渡开始起点就是过渡结束的终点，过渡开始终点就是过渡结束起点。

※：transition 标签只能对一个元素进行控制，多个需要用 transition-group 标签，并为每个元素配置 key属性。

14. nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。有点类似 setTImeOut。

this.$nextTick(function (){})

15. 插槽(slot)

为了展示在子组件标签中的HTML，需要在子组件中定义slot标签用于标识展示的位置；类似于给子组件传了一段HTML过去；好比在子组件中挖坑，父组件调用时传递。可以在子组件的 $slots 上查看到插槽信息。如果父组件传递但是子组件没有展示也不会丢失，还会在 $slots 中出现。

默认插槽：如果没有传slot对应的内容会展示默认文字。

父组件:
    卓哥哥

子组件：
    

具名插槽：在slot标签上添加name属性。父组件中通过slot属性进行指定，如果父组件中传递的是template标签还有第二种写法。

父组件：
    

子组件：
    slot标签中可以显示文字是默认内容

template标签传递：

父组件：
    

子组件：
    slot标签中可以显示文字是默认内容

作用域插槽：子组件可以将自身的数据传入slot中，父组件引用时 通过slot-scope进行获取，还可以在这里进行结构解析。

父组件：
   

     {{item}}
   

子组件:
    slot标签中可以显示文字是默认内容

16. axios 和 vue-resource

axios 和 vue-resource 都是类型Ajax的异步请求工具。一般推荐使用axios，vue-resourcce年久失修。 两者返回的都是promise的结构。

17. 路由

在vue中使用路由控制展示的组件，文件一般定义在 router/index.js。在创建vue实例的时候需要传递进去。

import Router from 'vue-router'   // 引入路由

Vue.use(Router)    // 使用路由

export default new Router({
  mode: 'history', // 默认是hash模式(url代#) history(不带#)
  routes: [        // route中定义多组路由信息
    {
      path: '/app',   // 路径, 一级路由需要加斜杠
      name: 'App',    // 路由名称
      component: App,   // 展示的组件
      children:[        // 定义二级路由
        {
          path: 'grandson',   // 子级都不需要斜杠
          name: 'grandson',
          component: grandson,
        },{...}
      ]
    },{...}
  ]
})

添加 vue-router 以后就会多了$router 和 $route 属性，每个组件都会有属于自己的 $route 属性，所有组件的 $router 都是相同的，也就是说全局只会有一个$router属性。

在vue中很少使用标签，转而更多的会用 标签，经过vue编译后的  也会转变成 标签。

group1

通过 router-link 标签给跳转组件传递参数：

(1) 通过 $route.query 参数

component


component


component

(2) 通过$route.param接收

首先需要在路由中定义好每个占位的变量。

{
  path: 'grandson/:msg/:title',   // 通过 冒号+变量名的格式
  component: grandson
}

在传递的时候直接传递

component


component

通过props进行参数传递

// 传递死数据
{
  path: 'grandson',
  component: grandson,
  props: {msg: "消息标题"}     // 将值以props属性形式传递给目标组件
}

// 如果值为真 将路由组件收到的 params 参数以 props 形式传递给组件
{
  path: 'grandson',
  component: grandson,
  props: true
}

// 函数的返回值作为 props 形式传递给组件
{
  path: 'grandson',
  component: grandson,
  props: function ($route){  //  这里更简单的写法是结构解析
    return {msg: $route.params.msg}
  }
}

缓存组件的内容：使用 标签进行缓存组件，通过include可以指定缓存哪些组件，值是组件名称；需要注意 需要给 使用。

component1
component2

  
     
  

使用 router 后会新增两个钩子函数，需要注意组件需要被 标签进行包裹。

activated () {        // 组件激活时触发的hook函数
  console.log("激活")
},

deactivated () {      // 组件失活时触发的hook函数
  console.log("失活")
}

前置路由守卫

/* to: 前往的路由
  from: 起始的路由
  next: 放行函数
*/
router.beforeEach((to, from, next) => {
  if(to.path.indexOf('grand') === -1){
    next()  // 放行，如果不执行next就代表 被阻塞了
  }
})

后置路由守卫

/* to: 前往的路由
   from: 起始的路由
*/
router.afterEach((to, from) => {})

路由自定义信息

{
  path: '/App',
  name: 'App',
  component: App
  meta: {}   // 这里可以自定义一些数据
}