vue概述

Posted on | 浏览 次

1/25/2019 4:34:55 PM

此文章只是对VUE常用的知识进行了一个简述，详情请访问官方文档

什么是vue？

vue是一个框架(渐进式开发框架),其实就是一个框架的名称，其特点是(数据双向绑定，组件开发，单页面路由，指令，插件)

什么叫渐进式框架

通过开发组件的形式，进行组件的组件的组合，来组合出来的一个页面而已

最重要的特性就是组件

组件类似于模块，设计组建的目的是为了更好的解耦业务，和模块化的区别就在于(组件的组成包含了(结构，逻辑，样式))而模块只是逻辑

组件的特性

  • 组建的状态(data,props)
  • 组件和组件的通讯
  • 自己的生命周期
  • 组件的渲染和组件的创建方式

设计组件

组件一般分为，展示组件和受控组件

展示组件：纯粹的展示功能

业务组件：单个的业务功能独立出来的组件

控件：内置表单元素不能满足网页开发，有一些特殊需要自定义的表单组件，称为控制，一般需要结合v-model去做数据双向绑定的控制

容器组件：作为页面的容器，用来管理当前页面的数据，通过数据去控制展示组件的显示

api组件：通过api形式调用的组件（提示，loading，验证等之类的需要通过js调用方法控制的组件。vue.extend创建）

组合式组件：组件和组件之间有特定关系的组件（slot元素作为插槽）

如何拆分组件

按照设计ui提供的ui图，提取公共展示功能，作为展示组件的提取，在页面开发过程中提取页面中独立业务单独出来业务组件，在表单页面提取公共的非内置表单元素作为控件处理（地区选择，选择日期，选择…..）

组件的创建方式

  • vue.component(componnetName,option) (自动渲染)
  • 在每一个组件中都有component选项，用来注册局部组件 (自动渲染)
  • 通过Vue.extends()扩展子类的形式创建 (手动渲染)

组建的实例选项

  • @[function] data
  • @[object] method
  • @[object] compoted
  • @[object] watch
  • @[object] conponents

  • @[function] 生命周期

      beforeCreated () {}        // 初始化数据之前
  created () {}             // 数据初始化之后
  beforeMout () {}         // 开始渲染
  mounted () {}             // 渲染完成
  beforeUpdate () {}         // 开始更新 当一个数据的改变引起了视图的重新的渲染才会执行，单独的一个数据改变是不会执行的
  uppdated () {}             // 更新完成

  //当使用keep-alive组件时才会 执行
  activated () {}         // 组件启用时
  deactivated () {}         // 组件停用时

  //组件销毁 v-if销毁组件，或者切换路由(在没有启用缓存的前提)，或者手动执行this.$destroy () {}            // 清理组件中绑定的data，通过v-on绑定事件，如果有手动绑定的内容需要，在这个生命周期中手动销毁
  beforeDestroy () {}
  destroyed () {}

    errorCaptured () {}        // 当组件中发生错误时

组件的通讯方式

通讯创建：父子，子父，同级，跨级

通讯其实就是谁用谁的数据

  • 父子：子组件使用父组件数据，props(常用)，子组件内部通过$parent
  • 子父：父组件使用子组件数据，通过自定事件，子组件通过$emit(事件名称，发送数据)给父组件传递数据(常用)$children $refs
  • 同级：代理(一个子组件将数据发送到父级，父在发送到另一个子级)，eventBus vuex
  • 跨级：逐层传递，vuex eventsBus

组件的嵌套

组件内部通过slot内置组件，可以用来承载嵌套组件(单个slot，和命名slot)

内置组件

  • template 单文件组件中代替了template选项，可以用作一个包裹元素，不会被渲染
  • component 动态组件，通过is属性动态渲染某一个组件
  • slot 插槽，用来承载组件潜逃的子组件
  • transition vue用来实现动画的组件(提供了，进入和离开两个状态)
  • transitions-group 用来实现多动画(列表动画，排序，添加，删除)
  • keep-alive 用来启动vue缓存功能，缓存组件的状态

vue的实例属性

实例属性
vm.$data                 // 访问定义的data
vm.$props                 // 访问props对象
vm.$el                     // 访问组件的根节点
vm.$options             // 访问所有配置项
vm.$parent                 // 访问父组件实例
vm.$root
vm.$children
vm.$slots
vm.$scopedSlots
vm.$refs
vm.$isServer
vm.$attrs
vm.$listeners
实例方法 / 数据
vm.$watch
vm.$set
vm.$delete
实例方法 / 事件
vm.$on
vm.$once
vm.$off
vm.$emit
实例方法 / 生命周期
vm.$mount
vm.$forceUpdate
vm.$nextTick    //数据改变后回调
vm.$destroy //手动渲染