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

Posted 2021-05-01 ZyBlog

一、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