(vue)vue知识点小结(1)

基础知识:

vue的生命周期:beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、beforeDestory/destoryed

vue常用指令:v-for、v-bind(缩写形式:prop)、v-on(缩写形式@click=’sss')、v-if/v-else/v-else-if、v-model、v-once、v-html、v-show...

vue自定义组件:Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘<li>{{ p1 }}</li>' })

vue常用实例方法和属性:data/$data、methods/$methods、$el、computed(计算属性)、$watch、$set、$event、$emit...

如果需要更新的属性需要缓存,则使用计算属性的方式,否则可以使用methods里的方法来更新属性(methods里的方法每次重新渲染都会执行)

计算属性默认提供了getter,你还可以给它设置setter

当你数据变化是异步或者开销较大时,可以使用watch侦听器来响应数据的变化

v-bind:class的值可以是一个对象,可实现类似react中classnames模块的功能

自定义组件上的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-if和v-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.$set或Object.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会忽略表单元素的value、checked、selected,仅仅使用实例中的数据作为数据源

表单事件修饰符:.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属性设置transition或animation来申明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指令描述对象

vnodeVue生成的虚拟节点

oldVnode上一个Vnode,仅在update和componentUpdated中使用

指令接受所有合法的JavaScript表达式

渲染函数 & JSX

render函数接受createElement方法作为参数

createElement方法的作用是创建一个虚拟节点(VNode)

createElement参数比较复杂,参照官网:参数

组件树中的VNodes必须唯一

render中的v-if/v-for可以使用if/else和map重写

插槽使用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文件)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容

  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,480评论 0 6
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,724评论 4 45
  • 《复活》是2005年的时候打算看的书,那个时候还在上初中,当时看了几页之后就没有在看了。那个时候完全没有看书的心思...
    wokenshin阅读 912评论 1 0
  • 对于自己负面的情绪,想法,或观念,不要再用道德绑架自己,不用去反省是不是不该这样想,在精神世界里完全接纳它们,它们...
    我的第一辈子阅读 245评论 0 0
  • edenmandom 隨譯 ⊕ 做你喜歡的,叫“自由”。 喜歡在做的,叫“快樂”。 ⊕ 我寧願喜歡冒險的“自由...
    黑貓子阅读 261评论 0 0