基础知识:

  • 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. SpringCloud(1) 架构演进和基础知识简介

    一.传统架构演进到分布式架构 简介:讲解单机应用和分布式应用架构演进基础知识 (画图) 高可用 LVS+keepalive 1.单体应用:开发速度慢.启动时间长.依赖庞大.等等 2.微服务:易开发.理 ...

  2. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  3. Vue基础知识之vue-resource和axios

    Vue基础知识之vue-resource和axios  原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...

  4. PON系统基础知识简介

    一  PON基础知识 1.1 PON技术概念 PON(Passive Optical Network)即无源光网络,一种基于点到多点(P2MP)拓朴的技术.“无源”指ODN(光分配网络)不含有任何电子 ...

  5. GIS 基础知识简介

    前言 前一段时间,在公司进行了分析 GIS 基础信息的介绍.之所以会有这个介绍以及为什么是我?这个个中缘由说下. 公司不是一个GIS方面的公司,但是由于业务的需要,经常需要用到地图(要和地图打交道), ...

  6. Vue基础知识梳理

    1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...

  7. 二、MongoDB的基础知识简介

    1.文档.集合和数据库 a).文档:因为MongoDB是面向文档的数据库,那么可想而知文档是它的基本单元,相当于关系型数据库中的行! Ⅰ.它是由键值对组成的一个有序集:注:键不能为空且是字符串类型的. ...

  8. Vue基础知识

    Vue特性: 双向数据绑定 通过 指令 扩展了 HTML,通过 表达式 绑定数据到 HTML 解耦视图与数据 可复用组件 虚拟DOM -> 对象 M-V-VM 数据驱动视图 Vue声明周期: b ...

  9. Vue基础知识之组件及组件之间的数据传递(五)

    vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...

随机推荐

  1. poj3636

    题意:每个物品有两个属性:长和宽(长宽不可互换).如果一个物品的长和宽均大于另一个物品,则这个物品可以罩住另一个物品,用这种罩住物品的方法将物品分组,一组之内的物品可以一个罩住一个的全部罩起来.问最少 ...

  2. mysql取以当前时间为中心的任意时间段的时间戳

    例如:取当前时间后一年的时间戳 SELECT UNIX_TIMESTAMP(date_sub(curdate(),interval -1 YEAR)) SELECT UNIX_TIMESTAMP(da ...

  3. java基础28 单例集合Collection下的List和Set集合

    单例集合体系: ---------| collection  单例集合的根接口--------------| List  如果实现了list接口的集合类,具备的特点:有序,可重复       注:集合 ...

  4. lucene-利用内存中索引和多线程提高索引效率

    转载地址: http://hi.baidu.com/idoneing/item/bc1cb914521c40603e87ce4d 1.RAMDirectory和FSDirectory对比 RAMDir ...

  5. Ubuntu 登陆循环启动 无法进入桌面 libGL error: failed to load driver: swrast

    导致无法进入Ubuntu图形界面的原因很多,关键是要找到问题原因所在. 最佳的方法是查看.xsession-errors这个日志文件,依据问题解决~ 这里先汇总一下问题: 1 环境变量导致的,进入tt ...

  6. Extjs 代码拾穗

    1.tree grid 添加一行 var rootNode = store.getRootNode(); var newRecord = Ext.create('MatrixDlv',{"s ...

  7. Linux学习笔记:nohup & 后台任务

    在linux中,使用nohup xxx.sh &可以将前台任务变成后台任务执行,如果只使用&的话,在突然断网或者关闭启动终端时,内核会向后台任务发送sighup信号,从而导致后台任务停 ...

  8. SqlServr性能优化性能之层次结构(十五)

    1.添加根节点: hierarchyid  GetRoot()方法 --创建数据库 create table Employeeh(EmployeeID int,Name varchar(500),Ma ...

  9. C# TabControl 隐藏标签头(TabControl Hide Head)

    TabControl控件,有时候需要动态显示一个或者多个标签页,如果只是显示一个标签页的时候不想显示标签头,所以有可能隐藏头部的需求. 如下代码可以实现 public Form1() { Initia ...

  10. 【洛谷】P4643 【模板】动态dp

    题解 在冬令营上听到冬眠的东西,现在都是板子了猫锟真的是好毒瘤啊(雾) (立个flag,我去thusc之前要把WC2018T1乱搞过去= =) 好的,我们可以参考猫锟的动态动态dp的课件,然后你发现你 ...