我之前一直使用的React,最近到了新公司,需要使用Vue,虽然之前自己写过一些小demo,但是缺乏系统的学习,且之前自己看的vue1.x的内容,好多都过时了,现在补充一下vue2.x的相关知识。
beforeCreate/created
、 beforeMount/mounted
、 beforeUpdate/updated
、 beforeDestory/destoryed
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.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘<li>{{ p1 }}</li>'})
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
不改变原始数组,总是返回新数组vm.$set
解决)和修改 length
长度赋值(使用 splice
解决)的情况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.component()
全局注册的组件可在其被注册后的任何通过 newVue()
创建的实例所使用,包含其组件树中的所有组件<slot>
分发内容(其实就是类似于react的children)<component>
配合属性 is
来实现camelCase
的属性可以在组件中使用 kebab-case
props
属性的类型props
的更新会向下流动,反之则不行instanceof
检查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
来强制更新viewv-once
来标记,缓存静态内容transition
组件控制过渡动画,可以给任何元素和组件添加进入/离开过渡transition
中的元素时,vue会做如下处理v-enter/v-enter-active/v-enter-to
v-leave/v-leave-active/v-leave-to
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()
来进行回调,否则会同步调用,过渡或动画会立即完成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
来定义classmixins
混入属性发生冲突时,以组件数据优先(一层属性深度浅合并)mixins
混入方法发生冲突时,会将函数合并为一个数组,优先执行混入方法,其次执行组件方法Vue.extend
策略和 mixins
相同vuex
的具体实现: Vue.config.optionMergeStrategies
)Vue.directive()
directives
,类型为 Object
Vnode
,仅在 update
和 componentUpdated
中使用render
函数接受 createElement
方法作为参数createElement
方法的作用是创建一个虚拟节点(VNode)createElement
参数比较复杂,参照官网:参数VNodes
必须唯一v-if/v-for
可以使用 if/else
和 map
重写this.$slot.default
访问,作用域插槽使用 this.$scopeSlots.default
访问和设置babel-plugin-transform-vue-jsx
支持JSX语法createElement
的别名是Vue生态的一个惯例,也是JSX要求的render
方法实现的 VNode
,可以使用 Vue.compile()
方法来输出编译结果mixins
添加一些组件选项,如:vue-routerVue.prototype
上实现install
,第一个参数是Vue构造器,第二个参数是一个可选对象Vue.use(MyPlugin)
使用,只会注册一次插件Vue.use
方法{{msg|filter}}
<divv-bind=“msg|filter"></div>
<script>
标签引入 [vue.min.js](https://vuejs.org/js/vue.min.js)
vue-cli
Vue.config.errorHandler
定义配置来跟踪运行时错误,可以搭配 [Sentry](https://sentry.io/)
使用(集成配置).vue
文件)