Vue 超快速学习

基础知识:

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

2.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...

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

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

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

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

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

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

9.自定义组件上的 class会被渲染拼接到 template的根节点的 class属性上(自定义组件上可使用 v-bind:class来做class的判断显示逻辑)

10.v-bind:style可以用来绑定内联样式,这个内联样式的值可以由一个对象来定义(类似css in js的模式),且可以被定义为数组(多个样式对象)

11.v-bind:style可以使用多重值的形式: <div:style=“display:[‘-webkit-box’,’-ms-flexbox’,‘flex']"></div>

12.v-if/v-else/v-else-if的时候,可以用key来管理可复用的元素

13.v-if是’真正’的渲染,它会确保在切换条件过程中条件块内的元素的事件监听器和子组件适时的销毁和重建

14.v-if是惰性的,初始为假,什么也不做,直到为真的时候才渲染元素

15.v-show总是渲染元素,只是简单的进行切换

16.v-if的切换开销大, v-show则是初始渲染开销大,频繁切换使用 v-show,运行时经常改变则使用 v-if

17.v-if和 v-for一起使用时, v-for的优先级更高

18.v-for可遍历数组,第二个参数是索引

19.v-for可遍历对象,第二个参数是 key,第三个参数是索引

20.v-for和 <template>搭配可减少渲染次数

21.v-for和自定义组件使用时,需要使用 props来传递值

22.尽可能的为遍历子元素加上 key,获得渲染优化

23.数组变异方法: push/pop/unshift/shift/splice/sort/reverse改变原始数组

24.数组非变异方法: filter/concat/slice 不改变原始数组,总是返回新数组

25.Vue不能检测到数组索引赋值(使用 vm.$set解决)和修改 length长度赋值(使用 splice解决)的情况

26.Vue不能检测对象属性的添加和删除(使用 vm.$set或 Object.assign)

27.is=“todo-item”这种属性的写法比较适合DOM模板

28.事件修饰符,它们可串联使用: .stop、 .prevent、 .capture、 .self、 .once、 .passive(尤其适合移动端)

29. .passive不用同时和 .prevent使用,后者会被忽略

30.按键修饰符: .enter、 .tab、 .delete、 .esc、 .space、 .up、 .down、 .left、 .right

31.系统按键修饰符: .ctrl、 .alt、 .shift、 .meta(⌘|⊞|◆)、 .exact(允许精确控制系统修饰符组合键触发)

32.鼠标修饰符: .left、 .right、 .middle

33.v-model会忽略表单元素的 value、 checked、 selected,仅仅使用实例中的数据作为数据源

34.表单事件修饰符: .lazy、 .number、 .trim

35.组件是可复用的vue实例,具有vue实例大多数属性和方法

36.组件可复用,每个组件有独立的空间

37.组件上的data必须是一个函数,这样做避免影响了其他组件

38.通过 Vue.component()全局注册的组件可在其被注册后的任何通过 newVue()创建的实例所使用,包含其组件树中的所有组件

39.通过插槽 <slot>分发内容(其实就是类似于react的children)

40.动态组件 <component>配合属性 is来实现

41.解析DOM模板时需要注意下可能会有不生效的情况,需要使用is来传递组件

Vue组件

1.全局注册/局部注册

2.局部注册组件在子组件中不可用

3.全局注册的行为必须在根Vue实例创建之前发生

4.camelCase的属性可以在组件中使用 kebab-case

5.可以以对象的模式指定每一个 props属性的类型

6.父级 props的更新会向下流动,反之则不行

7.由于JavaScript对象和数组是引用传入的,所以当子组件对props的改变将会影响到父组件

8.props类型校验可以是原生构造对象的中的任意一个,也可以自定义检验类型,通过 instanceof检查

9.对于绝大多数特性来说,外部传入的值会替换掉组件内部设置好的值,如input的type属性,但有的属性则是会进行合并,如class

10.inhertAttrs:false设置不希望根元素继承特性,可以使用 $attrs属性来设置继承的目标元素

11.v-on在设置事件监听器时,会把事件名全部转换成小写,推荐始终使用 kebab-case的事件名

12.v-model可以使用自定义组件中的 model属性自定义

13.父组件模板的所有东西都会在父级作用域内编译,子组件的所有内容都会在子组件作用域内编译

14.插槽( <slot></slot>)/具名插槽( <slotname=“header"></slot>)/作用域插槽( slot/slot-scope)

15.<keep-alive>组件可用来缓存被切换后隐藏的组件的状态

16.$root访问根实例, $parent访问父组件实例(不推荐)

17.父组件访问子组件,使用 $refs属性来获取设置了 ref属性的子组件

18.provide属性允许我们指定要分享给后代组件使用的方法,然后后代组件使用 inject属性来获得祖先组件分享的方法(依赖注入)

19.事件侦听器( $emit派发的事件)

  1)v-on 指令侦听

  2)$on 侦听一个事件

  3)$once 一次性侦听一个事件

  4)$off 停止侦听一个事件

20.慎用递归组件

21.尽量避免组件的循环引用

22.优先使用 template来定义模板,而不是 inline-template

23.$forceUpdate来强制更新view

24.组件包含大量静态内容时,可使用 v-once来标记,缓存静态内容

过渡 & 动画

1.transition组件控制过渡动画,可以给任何元素和组件添加进入/离开过渡

2.当插入或删除 transition中的元素时,vue会做如下处理

  1)自动嗅探元素是否使用了css过渡和动画,适当时机添加/删除类名

  2)元素的钩子函数会在适当时机被调用

  3)元素既没有钩子函数也没有css动画,插入和删除操作在下一帧立即执行(浏览器逐帧动画机制)

3.过渡的类名

  1)v-enter/v-enter-active/v-enter-to

  2)v-leave/v-leave-active/v-leave-to

4.css动画用法同css过渡,区别是类名 v-enter不会在DOM插入后立即删除,而是在 animationend事件触发时删除

5.自定义过渡类名,使用以下属性指定:

  1)enter-class/enter-active-class/enter-to-class

  2)leave-class/leave-active-class/leave-to-class

  3)自定义类名优先级高于普通的类名

6.使用 type属性设置 transition或 animation来申明vue使用的动画类型

7.transition组件上使用 duration来设置动画执行的时间

8.可以使用钩子函数

  1)beforeEnter/enter/afterEnter/enterCancelled

  2)beforeLeave/leave/afterLeave/leaveCancelled

  3)钩子函数使用 v-on指令绑定

  4)钩子和结合过渡和动画使用,也可以单独使用

  5)在 enter/leave中,必须使用 done()来进行回调,否则会同步调用,过渡或动画会立即完成

  6)对于纯使用JavaScript来进行的动画,推荐使用 v-bind:css=“false”来取消css的检测,减少css的影响

9.可使用 apear设置初始渲染的过渡

  1)apear/apear-active/apear-to

  2)beforeApear/apear/afterApear/apearCancelled

10.多元素过渡,设置唯一 key

11.过渡模式:

  1)In-out 新元素先过渡,完成后当前元素过渡离开

  2)out-in 当前元素先过渡,完成后新元素过渡进入

  3)默认行为:进入和离开同时发生

12.多个组件过渡使用动态组件实现

13.列表过渡 <transition-group>

  1)以真实元素呈现,默认为 <span>,可使用tag更改呈现标签

  2)过渡模式不可用

  3)内部需要唯一 key

  4)列表排序过渡,使用的是 FLIP动画,使用类名 v-move来定义class

可复用性 & 组合

1.mixins混入属性发生冲突时,以组件数据优先(一层属性深度浅合并)

2.mixins混入方法发生冲突时,会将函数合并为一个数组,优先执行混入方法,其次执行组件方法

3.Vue.extend策略和 mixins相同

4.慎用全局混入

5.合并策略可以自定义(参考 vuex的具体实现: Vue.config.optionMergeStrategies

6.全局自定义指令: Vue.directive()

7.局部自定义指令:属性 directives,类型为 Object

8.钩子函数

  1)bind 指令第一次绑定到元素时调用,只执行一次,可用于一次性初始化设置

  2)inserted 元素插入父节点时调用

  3)update 所有VNode更新时调用,可能发生在子VNode之前

  4)componentUpdated 指令所在组件在VNode和其子VNode更新后调用

  5)unbind 指令与元素解绑时调用

9.钩子函数都会被传入以下参数:

  1)el 指令绑定元素,可操作DOM

  2)binding 指令描述对象

  3)vnode Vue生成的虚拟节点

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

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

渲染函数 & JSX

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

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

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

4.组件树中的 VNodes必须唯一

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

6.插槽使用 this.$slot.default访问,作用域插槽使用 this.$scopeSlots.default访问和设置

7.可以使用插件 babel-plugin-transform-vue-jsx支持JSX语法

8.将h作为 createElement的别名是Vue生态的一个惯例,也是JSX要求的

9.函数式组件 关键词:functional

10.函数式组件渲染开销低,但相应的,它不会出现在Vue devtools的组件树里边

11.函数式组件要求你自己实现同名特性的替换与智能合并

12.Vue的模板实际编译成了 render方法实现的 VNode,可以使用 Vue.compile()方法来输出编译结果

插件

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

  1)添加全局的属性或方法,如vue-custom-element

  2)添加全局的资源(指令、过滤器、过渡等),如:vue-touch

  3)通过全局 mixins添加一些组件选项,如:vue-router

  4)添加Vue实例方法,通过添加到 Vue.prototype上实现

  5)一个独立的库,同时有自己的API,又实现以上部分功能,如:vue-router

2.Vue插件有一个公开的方法 install,第一个参数是Vue构造器,第二个参数是一个可选对象

3.插件的使用通过全局方法 Vue.use(MyPlugin)使用,只会注册一次插件

4.在CommonJS中,应该始终显式的调用 Vue.use方法

5.社区插件列表awesome-vue

过滤器

1.{{msg|filter}}

2.<divv-bind=“msg|filter"></div>

3.全局过滤器使用Vue.filter()创建

4.局部过滤器使用对象属性filters创建

5.过滤器函数总是接收表达式的值作为第一个参数,过滤器可以有多个,值依次向后传递

6.过滤器可以接收额外的参数

构建 & 部署

1.<script>标签引入 [vue.min.js](https://vuejs.org/js/vue.min.js)

2.使用 vue-cli

  1)webpack + vue-loader

  2)browserify + vueify

  3)rollup + rollup-plugin-vue

3.利用钩子函数 Vue.config.errorHandler定义配置来跟踪运行时错误,可以搭配 [Sentry](https://sentry.io/)使用(集成配置)

4.单文件组件( .vue文件)

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

  1. Vue知识点超快速学习

    基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...

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

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

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

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

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

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

  5. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  6. Vue 全家桶学习资源(转)

    companion: React 全家桶学习资源(持续更新) 下面整理了一些关于Vue以及Vue衍生的学习资源: 官网文档 官网API ECMAScript 6 入门 30分钟掌握ES6/ES2015 ...

  7. 简明易懂,将细节隐藏,面向新手树立web开发概念——学完Java基础语法,超快速上手springboot+mybatiJavaWeb开发

    简明易懂,将细节隐藏,面向新手树立web开发概念 --学完Java基础语法,超快速上手JavaWeb开发 Web本质(先忽视各种协议) Web应用可以理解为浏览器和服务器之间的交互. 我们可以看一个简 ...

  8. 【Vue源码学习】依赖收集

    前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些 ...

  9. 60分钟Python快速学习(给发哥一个交代)

    60分钟Python快速学习 之前和同事谈到Python,每次下班后跑步都是在听他说,例如Python属于“胶水语言啦”,属于“解释型语言啦!”,是“面向对象的语言啦!”,另外没有数据类型,逻辑全靠空 ...

随机推荐

  1. <script> 的defer和async

    <script src="../file.js" async="async"></script> file.js---- 仅仅只有ale ...

  2. 初始cfx开发webservice, 简单实例应用

    项目结构图: 步骤一: 添加maven 依赖包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  3. asp.net C# int 类型在32/64位环境下取值范围无变化

    最近在学习中突然想到,我在64位环境下,int取值范围是否有变化?为了检测这个结果,我做了以下这个测试:1.环境:win7旗舰版64位+vs2010 sp1(版本号:10.0.40219.1SP1Re ...

  4. Java线上问题排查思路及Linux常用问题分析命令学习

    前言 之前线上有过一两次OOM的问题,但是每次定位问题都有点手足无措的感觉,刚好利用星期天,以测试环境为模版来学习一下Linux常用的几个排查问题的命令. 也可以帮助自己在以后的工作中快速的排查线上问 ...

  5. 省市区三级联动——思路、demo、示例

    说明(2017-12-13 11:03:58): 1. 这个功能应该是注册的时候非常.常用的了,不过现在都是微信登录,手机端自动获取位置什么的,可能就网站还用用吧! 2. 这个东西的难点在于统计各地省 ...

  6. Oracle数据导入指定表空间

    1. 打开工具Oracle SQL Plus 以dba身份登录sys用户 sqlplus /nologconn sys@url as sysdba 2. 创建用户并指定表空间 使用客户端工具或者Web ...

  7. Android Launcher分析和修改7——AllApp全部应用列表(AppsCustomizeTabHost)

    今天主要是分析一下Launcher里面的所有应用列表.Android4.0 Launcher的所有应用列表跟2.X比较大的区别就是多了Widget的显示.下面会详细分析Launcher里面有关所有应用 ...

  8. Pytest运行测试用例的多种方式和调试

    测试用例上方使用多个fixtures叠加时,是从下往上进行fixtures调用的.如果是 @pytest.mark.usefixtures('action','a','action2')这种形式,是从 ...

  9. 音视频处理ffmpeg使用

    参考资料: [url]http://blog.163.com/prosen@yeah/blog/static/12251328720099101378975/ http://ffmpeg.org/ff ...

  10. react获取当前页面的url参数

    react获取当前页面的url参数,必须在url路由对应的组件上获取,在子组件上获取不到,为undefined,获取形如  /news/:id  的后面的参数 id this.props.match. ...