Vue

vue实例

vue实例原型链

把Vue的实例命名为vm是作者的习惯，我们应该沿用
vm对象封装了对视图的所有操作，包括数据读写|事件绑定|DOM更新|没有AJAX
vm的构造函数是Vue,按照ES6的说法，VM所属的类是Vue
options是new Vue的参数，一般称之为选项或者构造选项

options参数

文档
options的五类属性:
数据:data、props、propsData、computed、methods、watch
DOM:el、template、render、renderError
生命周期钩子:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、dstroyed、errorCaptured
资源:directives、filters、components
组合:parent、mixins、extends、provide、inject

el挂载点

const vm = new Vue({
  el:'#app',
  render(h){
    return h(Demo)
  }
})//直接写el属性或.$mount都能挂载，可以二选一
vm.$mount('#app')//等价于append/replace

data-内部数据

支持对象和函数，优先使用函数

优先使用函数是避免多个组件共用data

methods - 方法

事件处理函数或者是普通函数
每次渲染都会执行写入的函数

components 组件

文件名用小写，组件名首字母大写 组件创建的2种方法:

1. 通过import vue文件
2. 通过vue.component

组件有三种引入方式:

1. 引入.vue的文件，放到components属性里面
2. 直接声明一个全局的 Vue.component('组件名',{options})
3. 结合1,2的方法将组件写成对象赋值传入componets属性中

生命周期(四个钩子)

一个实例的四个阶段:
created 实例出现在内存中
mounted 实例出现在页面中
updated 实例更新
destroyed 实例消亡了

props-外部数据

外部属性是由外部传值的
步骤1，2是一个vue组件文件，接收实例传入的参数 注意要点:

Directives

Directives(指令)：像v-for/v-if/v-html都是指令
我们现在来自定义一个指令

声明一个全局指令

声明一个局部指令

directiveOptions(五个函数属性)

bind(el,info,vnode,oldVnode) - 类似于created

inserted(el,info,vnode,oldVnode) - 类似于mounted

update(el,info,vnode,oldVnode) - 类似于update

componentUpdated(el,info,vnode,oldVnode) - 用的不多，详情可查看官方文档

unbind(el,info,vnode,oldVnode) - 类似于destroyed

指令主要用于DOM操作
Vue实例用于数据绑定，事件监听，DOM更新
Vue指令主要目的就是原生DOM的操作，减少重复操作，如果某个DOM你经常使用，就可以封装为指令，如果某个DOM操作比较复杂也可以封装为指令

Mixins混入

混入就是复制，directives的作用就是减少DOM操作的重复
mixins的作用就是减少data、methods、钩子的重复

场景描述

假设我们需要在每个组件上添加name和time数据
在created/beforedestroyed时打出提示，并且报出存活时间

一、每个组件添加data和钩子

二、使用Mixins减少重复

示例

新建mixins文件将同样的代码抽取出来写成一个JS文件导出 每个组件直接引用就好了

全局的mixins不建议使用，可以去官方文档搜索

provide(提供)inject(注入)

作用大范围的data和method等共用
简单代码示意

全部代码 个人总结：

directives指令用来新建一个指令，减少操作DOM

mixins混入，其实就是复制，减少选项里面的操作

props可以传递值给子组件，vue不允许直接修改props数据

.sycn可以$event创建一个事件,用来$emit来触发事件修改外部数据,但如果大范围使用方法和数据用这种方式就很麻烦

provide和inject就能大范围的去传入数据并且通过函数回调操作数据