自己的一些Vue摘抄,因为能力有限,有些地方还不是特别完善,跪拜..

Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.组件
  模板,
  生命周期,
  组件通讯(props,inject,event),
  watch,
  computed,
  methods,
  插槽slot,
  内置组件
2.指令
3.路由
4.插件
5.过滤器
6.minxin

vue 中创建组件的方式

1.全局组件

  使用Vue.compoent
  语法:Vue.component(name,选项);

2. 局部创建

  语法 :component:{ name:选项 }

3.  扩展子类Vue.extend()
  extend 是构造一个组件的语法器

const ComponentClass = Vue.extend(选项)

new Vue()做了什么?

1.执行init方法

2.选项资源合并

3.执行beforeCreate

4.数据初始化工作

5.执行created

6.判断是否有el属性,如果有自动执行$mount如果没有就不执行了

组件通讯


    组件通讯就是两个或者两个以上的组件数据的传递,称为组件通讯,组件通讯有这么几个场景(父子,子夫,同级,跨级),不同的场景有不同的组件通讯方法;

    父子 : props , this.$children
    子父 : 自定义事件($on $emit) , this.$parent
    同级 : 状态提升到同级组件的共同的父组件上 , 使用自定义事件
    跨级 : vuex , provide和inject , 自定义事件

    ## 组件通讯的方法有很多,重要的是根据自身环境而选择符合自己的一种通讯方式 ##

组件中的数据选项

   ## data ##

    Vue实例的数据对象,Vue将会递归将 data 的属性转换为 getter/setter, 从而让 data 能够相应数据的变化.

    以 _ 或 $ 开头的属性不会被Vue实例代理

    实例创建之后,可以通过vm.$data 访问原始数据对象.Vue实例也代理了 data 对象上的所有属性,因此访问 vm.a 等价于访问 vm.$data.a.
    在组件中data的值是一个function返回一个对象,因为组件异能被用来创建多个实例.如果data仍然是一个纯粹的对象,则所有的实例将共享一个数据对象,通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新的副本数据对象

props

分为数据和对象格式

      // 基本语法
      Vue.component('props-demo-simple', {
      props: ['size', 'myMessage']
      })

      // 对象语法，提供验证
      Vue.component('props-demo-advanced', {
        props: {
          // 检测类型
          height: Number,
          // 检测类型 + 其他验证
          age: {
            type: Number,   类型
            default: 0,   默认值
            required: true,   是否为必填项
            validator: function (value) {   验证方法
              return value >= 0
            }
          }
        }
      })

propsData

只能用于 new 创建的实例中

message 插件的实现

index.js

    //引入源
    import message from './message.vue';
    export default {
    install(vue, options) {
        const ComponentClass = vue.extend(message);
        const messageCom = (type, msg, callback) => {
            let newCom = new ComponentClass({
                //在实例中通过props接收
                propsData: {
                    type,
                    msg,
                    callback,
                },
            });
            //手动挂载实例
            newCom.$mount();
            //添加在body标签
            document.body.appendChild(newCom.$el);
        };
        //在Vue的原型添加一个对象，里边包含的是要添加的方法
        vue.prototype.$message = {
            succeed: (msg, callback) => {
                new messageCom('succeed', msg, callback);
            },
            error: (msg, callback) => {
                new messageCom('error', msg, callback);
            },
        };
    },
};

生命周期

就是一个组件从创建到销毁的整个过程

beforeCreate 刚在内存中创建出 Vue 实例,data,methods,watch 等等还未初始化
created data,methods,watch 等初始化完毕
beforeMount 此时的数据是最新的,但是还没有渲染到页面实例挂载之前
mounted 实例挂载完毕,数据渲染到指定容器
beforeUpdate 更新前调用,数据是最新的此时还没有从新渲染页面
updated 更新完毕,数据化页面同步成功,此时页面和数据都是最新的
activated keep-alive 缓存的组件激活时调用
deactivated keep-aliva 缓存的组件停用时调用
beforeDestroy 销毁实例之前调用,此时还可以使用 Vue 实例
destroyed 销毁实例完毕,对应实例的指令会解绑,所有事件监听会移除,子实例也会被销毁
errorCaptured 当捕获一个来自子孙组件的错误时调用,此钩子有三个参数,错误对象,发生错误的所在组件,包含错误信息来源的字符串,此钩子返回一个 false 可以阻止错误的继续上传

插件

  插件是中来扩展 Vue 全局的一种实现方式,vue 生态中很多都是以插件的形式存在

  vue-router:

  < router-link>< router-view>
  $route,$router
  组件的导航守卫

  - vuex

    $store
  插件需要注册才能使用
  Vue.use(插件对象,传递给插件的参数)用来注册插件
  而Vue.use会自动执行,插件对象中的install方法,并且传递Vue类,和已定义参数

自定义插件

1.对象中有 install 方法

    let pluginObj = {
      install(vue,options){

      }
    }

2.直接导出一个方法

    export default (vue,options){

    }

Vue的一些摘抄

Vue