Vue.js前端开发快速入门与专业应用

一、Vue.js简介

二、基础特性

A.实例及选项

1.一个Vue实例相当于一个MVVM模式中的ViewModel,在实例化的时候,我们可以传入一个选项对象,包含数据、模板、挂载元素、方法、生命周期勾子等选项

2.只有初始化时传入的对象才是响应式的

3.如果需要在实例化之后加入响应式变量,需要调用实例方法$set,我们应尽量在初始化的时候,把所有的变量都设定好,如果没有值,也可以用undefined或null占位

4.组件类型的实例可以通过props获取数据,同data一样,也需要在初始化时预设好

5.可以通过选项属性methods对象来定义方法,并且使用v-on指令来监听DOM事件

6.Vue.js实例生命周期:

beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed、beforeUpdate、updated、activated、deactivated

B.数据绑定

1.Vue2.0已经去除内置过滤器

2.指令(Directives),当表达式的值发生改变时,会有些特殊行为作用到绑定的DOM上。Vue中是前缀带有v-的属性,指令的值限定为绑定表达式;修饰符(Modifiers)是以半角句号.开始的特殊后缀,用于表示指令应该以特殊方式绑定

3.表单参数特性:修饰符lazy、修饰符number、修饰符trim

C.模板渲染

1.v-show会渲染并显示在DOM中,只是切换元素的css属性display,而v-if不会显示DOM,v-show消耗的性能要小

D.事件绑定与监听

1.提供了v-on指令用于监听DOM事件,通常在模板内直接使用,v-on:后参数接受所有的原生事件名称

2.提供了修饰符:.stop、.prevent、.capture、.self

3.提供了按键修饰符:enter、tab、delete、esc、space、up、down、left、right

三、指令

A.内置指令

1.v-bind主要用于动态绑定DOM元素属性(attribute),即元素属性实际的值是由vm实例中的data属性提供的;三种修饰符:.camel,将绑定的我名字团圆驼峰命名

2.v-model用于input、select、textarea标签中,具有lazy、number、trim修饰符

3.v-if/v-else/v-show,用于根据条件展示对应的模板内容,v-if在条件为false的情况下并不进行模板的编译,而v-show则会隐藏,v-if的切换消耗要比v-show高,但初始条件为false的情况下,v-if的初始渲染要稍快

4.v-for循环

5.v-on,事件绑定

6.v-text,参数类型为String,作用是更新元素的textContent,与{{}}不同的是,v-text需要绑定到某个元素上,能避免未编译前的闪现问题

7.v-HTML,接受的字符串不会进行编译等操作,按普通HTML处理,同v-text类似

8.v-el,为DOM元素注册了一个索引,使得我们可以直接访问DOM元素,可以通过扩展性实例的$els属性调用,或者在vm内部通过this进行调用

9.v-ref,与v-el类似,只不过作用于子组件上,实例可以通过$refs访问子组件

10.v-pre,就是路过编译这个元素和子元素,显示原始的{{}}标签,用来减少编译时间

11.v-cloak,相当于在元素上添加了一个[v-cloak]属性,直到关联的实例结束编译

12.v-once,用于标明元素或组件只渲染一次,即使随后发生绑定数据的变化或更新,该元素或组件及包含的子元素都不会再次被编译和渲染,可以提升页面性能,忽略一些明确 不需要变化的步骤

B.自定义指令基础

1.可以通过Vue.directive(id, definition)方法注册一个全局自定义指令,id是指令的唯一标识,定义对象则是指令的相关属性及钩子函数;也可以通过在组件 的directives选项注册一个局部的自定义指令

2.定义对象主要包含三个钩子函数:

  • bind:只被调用一次,在指令第一次绑定到元素上时使用
  • update:指令在bind之后以初始值为参数进行第一次调用,之后每次当绑定值发生变化时调用,接收到的参数为newValue和oldValue
  • ubind:指令从元素上解绑时调用,只调用一次

3.指令属性this.xxx:(2.0取消了this,没有指令实例这一概念,通过参数的形式传给勾子函数,如update:function(el, binding,vnode,oldVNode){….})

  • el:指令绑定的元素
  • vm:该指令的上下文ViewModel,可以为new Vue0的实例,也可以为组件实例
  • expression:指令的表达式,不包括参数和过滤器
  • arg:指令的参数
  • name:指令的名字,不包括v-前缀
  • modifiers:一个对象,包含指令的修饰符
  • descriptor:一个对象,包含指令的解析结果

C.指令的高级选项

1.定义对象中可以接受一个params数组,将自动提取自定义指令绑定元素上的这些属性

2.在自定议指令中,如果需要向Vue实例写回数据,就需要在定义对象中使用twoWay:ture,这样可以在指令中使用this.set(value)来写回数据

*2.0大大削弱了指令相关功能

四、过滤器

1.Vue.js提供了全局方法Vue.filter()注册一个自定义过滤器,接受过滤器的ID和过滤器函数两个参数

2.在2.0中取消了内置过滤器,即capitalize、uppercase、json等,建议尽量使用单独的插件来按需加入你所需要的过滤器;取消了对v-model和v-on的支持,只能使用在{{}}标签中;修改了过滤器参数的使用方式,采用函数的形式而不是空格来标记参数

五、过渡

A.CSS过渡

1.使用transition绑定一个DOM元素,过滤系统自动给元素添加*-transition的class类名,在插入和移除时添加了另外两个糊锅:*-enter和*-leave

2.Vue.js提供了在插入或DOM元素时类名变化的钩子函数,通过Vue.transition(’name’,{})的方式来执行具体的函数操作,包括beforeEnter、enter、afterEnter、enterCancelled、beforeLeave、leave、afterLeave、leaveCancelled;enter和leave函数都有第二个可选的回调参数,用于控制过渡何时结束,而不是监听transitionend和animationend事件

3.自定义过渡类名,enterClass属性和leaveClass属性

4.Vue.js官方推荐CSS动画库,animate.css,需要先给元素附上animated类名,然后再添加预设的动效类名

B.JavaScript过渡

1.Velocity.js

C.过渡系统在Vue.js 2.0中的变化

1.取消了v-transition指令,新增transition的内置标签,包含name、appear、css、type、mode属性,如<transition name=‘xxx’>zzzz</transition>

2.新增了两个类名enter-active和leave-active,用于你也说了元素本身样式和过渡样式,可以把过渡样式放到*-enter-active、*-leave-active中,*-enter、*-leave中则定义元素过渡前的样式

3.添加了三个新的钩子函数,before-appear、appear、after-appear,before-appear:用于元素的首次渲染,再次渲染时会调用enter,另两个类似

4.取消了v-if时的leave-cancelled,但使用v-show时仍然有效

5.提供了transition-group标签,方便作用到多个DOM元素上,主要作用是给其子元素设定一个统一的过渡样式,而不需要给每单个元素都用transition包裹起来,不是一个虚拟DOM,会真实渲染在DOM树中,默认会是span标签,可以通过属性tag来设定

六、组件

A.组件注册

1.var MyComponent = Vue.extend({...});

2.全局注册:Vue.component(‘my-component’, MyComponent);

3.局部注册:限定了组件只能在被注册的组件中使用,而无法在其他组件中使用,Vue.extend({…,components:{‘my-child’:Child}})

4.可以直接在注册组件的时候定义组件构造器

B.组件选项

1.组件可能会有多个实例,如果将对象data直接传递给了Vue.extend(),那所有组件的实例会共享一个data对象,所以需要通过函数来返回一个新对象

2.选项props起到了父子组件间桥梁的作用

  • 组件实例的作用域是孤立的,子组件的模板和模块中是无法直接调用父组件的数据,所以通过props将父组件的数据传递给子组件,子组件在接受数据时需要显式声明props
  • 组件名使用-分隔
  • 可以使用v-bind动态传递数据给子组件,数字类型需要通过变量传递
  • props默认是单向xepg,父组件的数据发生变化时,子组件的数据变化,但在子组件中修改数据不影响父组件,修饰符.sync和.once显示的声明绑定为双向或单次绑定,props是引用传递,如果传递的是一个对象或数组,则会影响父组件的状态,不管是不是单向绑定

C.组件间通信

1.直接访问,Vue.js中提供了三个属性对其父子组件及根实例进行直接访问,建议还是使用props传递

  • $parent:父组件实例
  • $children:所有子组件实例
  • $root:组件所在的根实例

2.在初始化实例或注册子组件的时候,可以直接传给选项events一个对象;也在可以在特定情况下或方法内采用$on方法来监听事件;

3.事件触发

  • $emit,在实例本身上触发事件
  • $dispatch,事件沿父链冒泡,并且在第一次触发回调之后自动停止冒泡,除非触发函数明确返回true
  • $broadcast,广播事件,事件会向下传递给所有的后代

D.内容分发

1.Vue.js使用<slot>元素为原始内容的插槽

2.父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译;

3.<slot>标签允许有一个匿名slot,不需要name值,作为找不到匹配的内容片段的回退插槽,如果没有默认的slot,这些找不到匹配的内容片段将被忽略

4.在父组件中,也可以定义多个相同slot属性的DOM标签,这样会依次插入到对应的子组件的slot标签中,以兄弟节点的方式呈现

E.动态组件

1.动态组件,即多个组件可以使用同一挂载点,根据条件来切换不同的组件 ,使用保留标签<component>,通过绑定到is属性的值来判断挂载哪个组件

2.使用keep-alive属性可以将切换出去的组件保留在内存中,避免重新渲染

3.Vue.js提供了activate勾子函数,作用于动态组件切换或静态组件初始化的过程中,接受一个回调函数为参数,使用函数后组件才进行之后的渲染过程

F.Vue.js2.0中的变化

1.废弃了event选项,自定义事件都通过$emit、$on、$off函数来进行触发、监听和取消监听;废弃了$dispatch和$broadcast方法;官方推荐使用集中式的事件管理机制来处理组件中的通信,而不是依赖于组件本身的结构

2.keep-alive不再是component标签的属性,而是成为了单独的标签

3.slot不再支持多个相同plot属性的DOM插入到对应的slot标签中,一个slot只被使用一次,不再保存自身的属性及样式,均由父元素或被插入的元素提供样式和属性

4.子组件索引v-ref不再是指令,而替换成一个子组件的特殊属性

七、Vue.js常用插件

A.Vue-router

1.路由对象:

  • $route.path,当前路径
  • $route.params,包含路由中动态片段和全匹配片段的键值对
  • $route.query,包含路由中查询参数的键值对
  • $route.router,路由实例,可以调用go、replace方法进行跳转
  • $route.matched,包含当前匹配的路径中所有片段对应的配置参数对象
  • $route.name,为当前路由设置的name属性

2.v-link指令是vue-router应用中用于路径间跳转的指令,本质是调用路由实例router本身的go函数进行跳转,指令接受一个js表达式,也可以直接使用组件内绑定的数据,包含其他的参数:activeClass、exact、replace、append

3.路由器配置

  • hashbang,默认true,只在hash模式下可用
  • history,默认false,设为true时会启动HTML5 history模式,利用history.pushState()和history.replaceState()来管理浏览历史记录
  • abstract,默认false,提供了一个不依赖于浏览器的历史管理工具
  • root,默认为null,可设置一个应用的根路径,仅在H5 history模式下可用
  • linkActiveClass,默认为v-link-active,符合匹配规则的链接会加上linkActiveClass设定的类名
  • saveScrollPosition,默认为false,仅在H5 history下可用,当点击后退按扭时重置页面滚动位置
  • transitionOnLoad,默认为false,在router-view中组件初次加载时是否使用过渡效果
  • supppressTransitionError,默认false,设定为true后,将忽略场景切换钩子函数中发生的异常

4.route钩子函数

  • canActivate(),在组件创建之前被调用
  • activate(),在组件创建且将要加载时调用
  • data(),在activate之后,用于加载和设置当前组件的数据
  • canDeactivate(),在组件被移出前被调用
  • deactivate(),在组件移出时调用
  • canReuse(),决定组件是否可被重用

5.路由实例属性及方法

  • router.app,路由管理的Vue根实例
  • router.mode,值可为H5、hash和abstract
  • router.stop(),停止监听popstate和hashchange事件
  • router.map(),定义路由规则的方法
  • router.on(),添加一条顶级 的路由配置
  • router.go(path),跳转到一个新路由

6.vue-router2.0变化:初始化方式、路由规则配置和启动方式、取消了v-link使用<router-link>等

B.Vue-resource

C.Vue-devtools

八、Vue.js工程实例

A.准备工作

1.webpack是一款模块加载及处理工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来作用和处理,可以把ES6语法的js文件,sass样式等无法直接在浏览器中使用的语言编译成浏览器支持的形式,也可以把需要的文件进行合并、压缩混淆

2.vue-loader是webpack的一个loader加载器,用于处理我们编写的.vue文件,可以将一个组件的html、css、js放在一个文件中,用不同的标签包裹住即可

B.目录结构

1.vue-cli工具,npm全局安装后,可以vue init webpack,包含五种脚手架:webpack、webpack-simple、browerify、browerify-simple、simple

九、状态管理:Vuex

1.Vuex是状态管理模式的一种实现库,主要以插件的形式和Vue.js进行配合使用,能够使我们在Vue.js中管理复杂的组件事件流,核心概念包括Store(仓库)、State(状态)、Mutations(变更)、Actions(动作)

十、跨平台开发Weex

1.阿里集团开源的Vue.js为核心源码的hybrid框架

2.https://github.com/apache/incubator-weex/

十一、Vue.js 2.0新特性

A.Render函数

1.提供了自由度更高的模板编程能力,而不仅仅限于之前的v-if/v-else指令

B.服务端渲染

https://github.com/zhangyue0503/html5js/tree/master/vuejsqdkfqsrmyzyyy

原文发布于微信公众号 - 硬核项目经理(fullstackpm)

原文发表时间:2017-08-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券