Vue 重点 必须要记住的
基础知识:
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()
全局注册的组件可在其被注册后的任何通过newVue()
创建的实例所使用,包含其组件树中的所有组件通过插槽
<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>
)/具名插槽(<slotname=“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
自定义类名优先级高于普通的类名
使用
typ
e属性设置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 指令描述对象
vnode Vue生成的虚拟节点
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}}
<divv-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 重点 必须要记住的的更多相关文章
- vue中使用cookie记住用户上次选择(本次例子中为下拉框)
最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了, ...
- vue 路由跳转记住滚动位置,返回时回到上次滚动位置
参考:https://blog.csdn.net/qq_40204835/article/details/79853685 方法一: 利用Keep-Alive和监听器 1.首先在路由中引入需要的模块 ...
- vue 路由跳转记住当前页面位置
从列表页面跳去详情页面, 在列表页面的生命周期:deactivated 中把当前的scrollTop位置存下来,可以存在localstorage中,也可以存在vuex中, 从详情页面返回列表页面:a ...
- 【初恋】vue单页应用开发总结
vue新人,没有高级技巧 本文主要总结了使用vue-cli脚手架安装开发环境,使用vue.js等进行单页应用开发所遇问题的总结. 技术栈: Vue v1.0.21, vue-resource v0.9 ...
- Vue.js应用基础
声明 这篇博文是我的Vue学习记录,其中参杂了不少我个人的理解,由于我并没有继续学习Vue的源码,所以不能保证这些理解都是正确的.如果这篇博文有幸被你读到,请带着批判的心情去审视它. 如果你发现了其中 ...
- 5种处理Vue异常的方法
原文: Handling Errors in Vue.js 译者: Fundebug 本文采用意译,版权归原作者所有 去年一整年,我都在使用最爱的-Vue.js- 来做项目.最近突然意识到,我竟然从来 ...
- Vue --- 前后台总结
请求生命周期: 1.先请求路由,在去替换APP.vue中的router-views 2.@表示src 3.加载全局css: require('@/assets/....') 4.获取当前路由 this ...
- Vue --- 基础指令
目录 表单指令 条件指令 循环指令 分隔符(了解) 过滤器 计算属性 监听属性 冒泡排序 表单指令 使用方法: v-model 数据双向绑定 v-model绑定的变量可以影响表单标签的值,反过来表单标 ...
- (19)打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
随机推荐
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.2 Static Map with Two Layers
MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.2 Static Map with Two Layers 一.前言 上一篇博客< ...
- 合并分支,从dev到master
我在本地创建了dev分支,项目也push到远程的dev分支,今天在远程分支进行合并时,将dev合并到master,结果公司的gitlab始终不响应,我不知道是公司的网络不行还是我操作错误,就只能另想办 ...
- eclipse中maven本地库和远程阿里库的配置
很久没有写博客了,最近比较闲将最近学的和遇到的问题做一个备忘 1.eclipse中maven本地库的配置 如果只是下载和安装了maven没有指定maven本地库的位置,maven的默认的本地库在c:/ ...
- Unable to load DLL 'api-ms-win-core-localization-l1-2-0.dll': 找不到指定的模块
asp.net mvc 4.6 发布到WinServer2008R2 SP1 提示 错误 Unable to load DLL 'api-ms-win-core-localization-l1-2-0 ...
- void的几点用法
1.可以通过void 0 获取undefined.等同于void(0). void 任意数 === undefined // true void(0) === undefined // true ...
- react native 环境报错
按照react native中文网的文档安装 1.brew 管理软件 2.node 在终端启动工程后就报下面这个错误 这个错误是在RN在第一次配置环境启动一个工程的时候 ,在这过程中下载的缓存文件不完 ...
- oracle累积求和分析函数sum over的使用
oracle sum()over函数的使用 over不能单独使用,要和分析函数:rank(),dense_rank(),row_number()等一起使用. over函数的参数:over(partit ...
- 网络编程 生产者消费者模型 GiL
守护进程: 注意事项: 1.必须在p.start()前 2.守护进程不能开子进程 3.如果主进程的运行时间快于子进程,那么就只有主进程的结果,没有守护进程的结果,因为守护进程没有进行完.反之会得到两个 ...
- Python 实现累加计数的几种方法
#要实现累加,关键在于数据存在哪儿,怎么使每次累加的都是同一个变量 行为像静态变量 #前两种都是数据存到类的成员变量, # 类利用__call__ class foo: def __init__(se ...
- Linux_x86下NX与ASLR绕过技术(续)
四.Stack Canaries 首先看一下Stack Canaries演进历史: Stack Guard 是第一个使用 Canaries 探测的堆栈保护实现,它于 1997 年作为 GCC 的一个扩 ...