基础知识:

  • vue的生命周期: beforeCreate/createdbeforeMount/mountedbeforeUpdate/updatedbeforeDestory/destoryed
  • vue常用指令: v-forv-bind(缩写形式:prop)、v-on(缩写形式@click=’sss')、v-if/v-else/v-else-ifv-modelv-oncev-htmlv-show...
  • vue自定义组件:Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘<li>{{ p1 }}</li>' })
  • vue常用实例方法和属性: data/$datamethods/$methods$elcomputed(计算属性)、$watch$set$event$emit...
  • 如果需要更新的属性需要缓存,则使用计算属性的方式,否则可以使用methods里的方法来更新属性(methods里的方法每次重新渲染都会执行)
  • 计算属性默认提供了getter,你还可以给它设置setter
  • 当你数据变化是异步或者开销较大时,可以使用watch侦听器来响应数据的变化
  • v-bind:class的值可以是一个对象,可实现类似reactclassnames模块的功能
  • 自定义组件上的class会被渲染拼接到template的根节点的class属性上(自定义组件上可使用v-bind:class来做class的判断显示逻辑)
  • v-bind:style可以用来绑定内联样式,这个内联样式的值可以由一个对象来定义(类似css in js的模式),且可以被定义为数组(多个样式对象)
  • v-bind:style可以使用多重值的形式:<div :style=“display:[‘-webkit-box’,’-ms-flexbox’, ‘flex']"></div>
  • v-if/v-else/v-else-if的时候,可以用key来管理可复用的元素
  • v-if是’真正’的渲染,它会确保在切换条件过程中条件块内的元素的事件监听器和子组件适时的销毁和重建
  • v-if是惰性的,初始为假,什么也不做,直到为真的时候才渲染元素
  • v-show总是渲染元素,只是简单的进行切换
  • v-if的切换开销大,v-show则是初始渲染开销大,频繁切换使用v-show,运行时经常改变则使用v-if
  • v-ifv-for一起使用时,v-for的优先级更高
  • v-for可遍历数组,第二个参数是索引
  • v-for可遍历对象,第二个参数是key,第三个参数是索引
  • v-for<template>搭配可减少渲染次数
  • v-for和自定义组件使用时,需要使用props来传递值
  • 尽可能的为遍历子元素加上key,获得渲染优化
  • 数组变异方法:push/pop/unshift/shift/splice/sort/reverse改变原始数组
  • 数组非变异方法:filter/concat/slice 不改变原始数组,总是返回新数组
  • Vue不能检测到数组索引赋值(使用vm.$set解决)和修改length长度赋值(使用splice解决)的情况
  • Vue不能检测对象属性的添加和删除(使用vm.$setObject.assign)
  • is=“todo-item”这种属性的写法比较适合DOM模板
  • 事件修饰符,它们可串联使用:.stop.prevent.capture.self.once.passive(尤其适合移动端)
  • .passive不用同时和.prevent使用,后者会被忽略
  • 按键修饰符: .enter.tab.delete.esc.space.up.down.left.right
  • 系统按键修饰符:.ctrl.alt.shift.meta(⌘|⊞|◆).exact(允许精确控制系统修饰符组合键触发)
  • 鼠标修饰符: .left.right.middle
  • v-model会忽略表单元素的valuecheckedselected,仅仅使用实例中的数据作为数据源
  • 表单事件修饰符:.lazy.number.trim
  • 组件是可复用的vue实例,具有vue实例大多数属性和方法
  • 组件可复用,每个组件有独立的空间
  • 组件上的data必须是一个函数,这样做避免影响了其他组件
  • 通过Vue.component()全局注册的组件可在其被注册后的任何通过new Vue()创建的实例所使用,包含其组件树中的所有组件
  • 通过插槽<slot>分发内容(其实就是类似于react的children)
  • 动态组件<component>配合属性is来实现
  • 解析DOM模板时需要注意下可能会有不生效的情况,需要使用is来传递组件

Vue组件

  • 全局注册/局部注册
  • 局部注册组件在子组件中不可用
  • 全局注册的行为必须在根Vue实例创建之前发生
  • camelCase的属性可以在组件中使用kebab-case
  • 可以以对象的模式指定每一个props属性的类型
  • 父级props的更新会向下流动,反之则不行
  • 由于JavaScript对象和数组是引用传入的,所以当子组件对props的改变将会影响到父组件
  • props类型校验可以是原生构造对象的中的任意一个,也可以自定义检验类型,通过instanceof检查
  • 对于绝大多数特性来说,外部传入的值会替换掉组件内部设置好的值,如input的type属性,但有的属性则是会进行合并,如class
  • inhertAttrs:false设置不希望根元素继承特性,可以使用$attrs属性来设置继承的目标元素
  • v-on在设置事件监听器时,会把事件名全部转换成小写,推荐始终使用kebab-case的事件名
  • v-model可以使用自定义组件中的model属性自定义
  • 父组件模板的所有东西都会在父级作用域内编译,子组件的所有内容都会在子组件作用域内编译
  • 插槽(<slot></slot>)/具名插槽(<slot name=“header"></slot>)/作用域插槽(slot/slot-scope)
  • <keep-alive>组件可用来缓存被切换后隐藏的组件的状态
  • $root访问根实例,$parent访问父组件实例(不推荐)
  • 父组件访问子组件,使用$refs属性来获取设置了ref属性的子组件
  • provide属性允许我们指定要分享给后代组件使用的方法,然后后代组件使用inject属性来获得祖先组件分享的方法(依赖注入)
  • 事件侦听器($emit派发的事件)

    • v-on 指令侦听
    • $on 侦听一个事件
    • $once 一次性侦听一个事件
    • $off 停止侦听一个事件
  • 慎用递归组件
  • 尽量避免组件的循环引用
  • 优先使用template来定义模板,而不是inline-template
  • $forceUpdate来强制更新view
  • 组件包含大量静态内容时,可使用v-once来标记,缓存静态内容

过渡 & 动画

  • transition组件控制过渡动画,可以给任何元素和组件添加进入/离开过渡
  • 当插入或删除transition中的元素时,vue会做如下处理

    • 自动嗅探元素是否使用了css过渡和动画,适当时机添加/删除类名
    • 元素的钩子函数会在适当时机被调用
    • 元素既没有钩子函数也没有css动画,插入和删除操作在下一帧立即执行(浏览器逐帧动画机制)
  • 过渡的类名

    • v-enter/v-enter-active/v-enter-to
    • v-leave/v-leave-active/v-leave-to
  • css动画用法同css过渡,区别是类名v-enter不会在DOM插入后立即删除,而是在animationend事件触发时删除
  • 自定义过渡类名,使用以下属性指定:

    • enter-class/enter-active-class/enter-to-class
    • leave-class/leave-active-class/leave-to-class
    • 自定义类名优先级高于普通的类名
  • 使用type属性设置transitionanimation来申明vue使用的动画类型
  • transition组件上使用duration来设置动画执行的时间
  • 可以使用钩子函数

    • beforeEnter/enter/afterEnter/enterCancelled
    • beforeLeave/leave/afterLeave/leaveCancelled
    • 钩子函数使用v-on指令绑定
    • 钩子和结合过渡和动画使用,也可以单独使用
    • enter/leave中,必须使用done()来进行回调,否则会同步调用,过渡或动画会立即完成
    • 对于纯使用JavaScript来进行的动画,推荐使用v-bind:css=“false”来取消css的检测,减少css的影响
  • 可使用apear设置初始渲染的过渡

    • apear/apear-active/apear-to
    • beforeApear/apear/afterApear/apearCancelled
  • 多元素过渡,设置唯一key
  • 过渡模式:

    • In-out 新元素先过渡,完成后当前元素过渡离开
    • out-in 当前元素先过渡,完成后新元素过渡进入
    • 默认行为:进入和离开同时发生
  • 多个组件过渡使用动态组件实现
  • 列表过渡 <transition-group>

    • 以真实元素呈现,默认为<span>,可使用tag更改呈现标签
    • 过渡模式不可用
    • 内部需要唯一key
  • 列表排序过渡,使用的是FLIP动画,使用类名v-move来定义class

可复用性 & 组合

  • mixins混入属性发生冲突时,以组件数据优先(一层属性深度浅合并)
  • mixins混入方法发生冲突时,会将函数合并为一个数组,优先执行混入方法,其次执行组件方法
  • Vue.extend策略和mixins相同
  • 慎用全局混入
  • 合并策略可以自定义(参考vuex的具体实现:Vue.config.optionMergeStrategies
  • 全局自定义指令:Vue.directive()
  • 局部自定义指令:属性directives,类型为Object
  • 钩子函数

    • bind 指令第一次绑定到元素时调用,只执行一次,可用于一次性初始化设置
    • inserted 元素插入父节点时调用
    • update 所有VNode更新时调用,可能发生在子VNode之前
    • componentUpdated 指令所在组件在VNode和其子VNode更新后调用
    • unbind 指令与元素解绑时调用
  • 钩子函数都会被传入以下参数:

    • el 指令绑定元素,可操作DOM
    • binding 指令描述对象
    • vnode Vue生成的虚拟节点
    • oldVnode 上一个Vnode,仅在updatecomponentUpdated中使用
  • 指令接受所有合法的JavaScript表达式

渲染函数 & JSX

  • render函数接受createElement方法作为参数
  • createElement方法的作用是创建一个虚拟节点(VNode)
  • createElement参数比较复杂,参照官网:参数
  • 组件树中的VNodes必须唯一
  • render中的v-if/v-for可以使用if/elsemap重写
  • 插槽使用this.$slot.default访问,作用域插槽使用this.$scopeSlots.default访问和设置
  • 可以使用插件babel-plugin-transform-vue-jsx支持JSX语法
  • 将h作为createElement的别名是Vue生态的一个惯例,也是JSX要求的
  • 函数式组件 关键词:functional
  • 函数式组件渲染开销低,但相应的,它不会出现在Vue devtools的组件树里边
  • 函数式组件要求你自己实现同名特性的替换与智能合并
  • Vue的模板实际编译成了render方法实现的VNode,可以使用Vue.compile()方法来输出编译结果

插件

  • 插件会为vue提供全局的功能,包括但不限于以下几种:

    • 添加全局的属性或方法,如vue-custom-element
    • 添加全局的资源(指令、过滤器、过渡等),如:vue-touch
    • 通过全局mixins添加一些组件选项,如:vue-router
    • 添加Vue实例方法,通过添加到Vue.prototype上实现
    • 一个独立的库,同时有自己的API,又实现以上部分功能,如:vue-router
  • Vue插件有一个公开的方法install,第一个参数是Vue构造器,第二个参数是一个可选对象。
  • 插件的使用通过全局方法Vue.use(MyPlugin)使用,只会注册一次插件
  • 在CommonJS中,应该始终显式的调用Vue.use方法
  • 社区插件列表awesome-vue

过滤器

  • {{ msg | filter }}
  • <div v-bind=“msg | filter"></div>
  • 全局过滤器使用Vue.filter()创建
  • 局部过滤器使用对象属性filters创建
  • 过滤器函数总是接收表达式的值作为第一个参数,过滤器可以有多个,值依次向后传递
  • 过滤器可以接收额外的参数

构建 & 部署

  • <script>标签引入[vue.min.js](https://vuejs.org/js/vue.min.js)
  • 使用vue-cli

    • webpack + vue-loader
    • browserify + vueify
    • rollup + rollup-plugin-vue
  • 利用钩子函数Vue.config.errorHandler定义配置来跟踪运行时错误,可以搭配[Sentry](https://sentry.io/)使用(集成配置
  • 单文件组件(.vue文件)

Vue知识点超快速学习的更多相关文章

  1. Vue 超快速学习

    Vue 超快速学习 基础知识: 1.vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeD ...

  2. vue使用--vuex快速学习与使用

    什么是vuex? Vuex核心概念 Vuex安装与使用 1.安装 2.目录结构与vuex引入 3.store中变量的定义.管理.派生(getter) 4.vuex辅助函数的使用说明 Vuex刷新数据丢 ...

  3. spring boot 学习番外篇:超快速项目初始化

    超快速完成 Spring Boot 项目初始化 最近,在浏览 SPRING 官网时,发现一个超级方便的小工具,可以帮助我们快速创建一个 Spring Boot 项目,前提就是你能连接互联网. 依赖 支 ...

  4. 超快速使用docker在本地搭建hadoop分布式集群

    超快速使用docker在本地搭建hadoop分布式集群 超快速使用docker在本地搭建hadoop分布式集群 学习hadoop集群环境搭建是hadoop入门的必经之路.搭建分布式集群通常有两个办法: ...

  5. 阿里巴巴Java开发手册快速学习

    Java作为一门名副其实的工业级语言,语法友好,学习简单,大规模的应用给代码质量的管控带来了困难,特别是团队开发中,开发过程中的规范会直接影响最终项目的稳定性. 善医者“未有形而除之”,提高工程健壮性 ...

  6. Vue (一) --- vue.js的快速入门使用

    =-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...

  7. (*)(转)要快速学习SSM框架,你需要一套学习曲线平滑的教程

    作者:meepo链接:https://www.zhihu.com/question/57719761/answer/156952139来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  8. .NET多线程知识快速学习

    多线程是一个不会过时的话题,因为每个开发的成长必然要掌握这个知识点,否则半懂不懂怎么保证系统的可靠性和性能,其实在网上随便一搜都会有海量的文章说这个话题,大多数写得很细写得非常好,但发现很少有概览性的 ...

  9. 【技术博客】基于vue的前端快速开发(工具篇)

    一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...

随机推荐

  1. Mongodb对数据库(DB)的常用操作

    1.查看所有库 show dbs 2.切换数据库/新建数据库 use mydb 3.查看当前库 db 需要注意的是:<use 新库>这个命令并不会马上建立真正的实体库,只有往里面插入数据的 ...

  2. Android短信管家视频播放器代码备份

    自己保留备份,增强记忆   这是video的类 public class VideoActivity extends Activity { /** * 解析网络页面 */ private WebVie ...

  3. [转载]Ubuntu下Git服务器安装与配置

    原文地址:Ubuntu下Git服务器安装与配置作者:F民抄 1. 安装 1.1 安装Git-Core: sudo apt-get install git-core 1.2 安装 Gitosis sud ...

  4. ng-file-upload结合springMVC使用

    引入angular和ng-file-upload. 前端代码 Upload.upload({ url: 'upload', fields: {'username': 'zouroto'}, // ad ...

  5. Cobbler的Web管理和维护

    Cobbler的Web管理模块和命令行模块是可以分开工作的,没有依赖关系. 1 WebUI的功能 查看所有的对象和配置文件 添加或者删除system,distro, profile 执行“cobble ...

  6. C语言学习笔记 (010) - 编写strcpy函数

    很多公司的面试官在面试程序员的时候,要求应聘者写出库函数strcpy()的工作方式或者叫实现,很多人以为这个题目很简单,实则不然,别看这么一个小小的函数,它可以从三个方面来考查: (1)编程风格 (2 ...

  7. Java8 lambda表达式10个示例

    Java 8 刚于几周前发布,日期是2014年3月18日,这次开创性的发布在Java社区引发了不少讨论,并让大家感到激动.特性之一便是随同发布的lambda表达式,它将允许我们将行为传到函数里.在Ja ...

  8. 六款值得推荐的Android开源框架简介

    技术不再多,知道一些常用的.不错的就够了.下面就是最近整理的“性价比”比较高的Android开源框架,应该是相对实用的. 1.volley 项目地址 https://github.com/smanik ...

  9. MySQL慢查询mysqlsla

    转:http://www.osyunwei.com/archives/7659.html 必须在MySQL服务器上安装mysqlsla 1.mysqlsla是perl编写的脚本,运行mysqlsla需 ...

  10. Oracle 12C -- purge dba_recyclebin

    SQL> create user abce identified by abce; User created. SQL> grant resource,connect to abce; G ...