Vue.js基础特性是什么
这篇文章主要讲解了"Vue.js基础特性是什么"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"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属性，如
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使用
2.父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译；
3.
4.在父组件中，也可以定义多个相同slot属性的DOM标签，这样会依次插入到对应的子组件的slot标签中，以兄弟节点的方式呈现
E.动态组件
1.动态组件，即多个组件可以使用同一挂载点，根据条件来切换不同的组件 ，使用保留标签
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使用
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（动作）
十、Vue.js 2.0新特性
A.Render函数
1.提供了自由度更高的模板编程能力，而不仅仅限于之前的v-if/v-else指令
B.服务端渲染
感谢各位的阅读，以上就是"Vue.js基础特性是什么"的内容了，经过本文的学习后，相信大家对Vue.js基础特性是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！
