常用API简介
通过上一节的内容，我们可以知道，在开发Vue应用的过程中，关键点在于如何组织Action与Model之间的关系，而Model和View之间的关系，则通过Vue框架本身的MVVM能力进行处理。以下各小节，也是按照该结构加以组织：
1、模版指令
Vue中的模板指令（Directives）是带有“v-”前缀的HTML属性。指令的职责，是根据属性值，将某些行为应用在DOM元素上，从而实现封装DOM层操作的目的，不同的指令对应不同的行为（Vue2.X版本及以后，对DOM的操作模式由DocumentFragment的方式，改为VNode的方式，则不同的指令会生成不同的render函数。总之，简单来说，指令的作用，在于封装了常见的DOM操作。）
指令的基本结构：*v-指令[：参数 ]｛.修饰符｝= " JavaScript表达式 " *。
（1）v-show：
用法：根据表达式的真假值，来切换DOM元素的 display 属性值。
说明：常用于一些筛选、过滤类的场景中，因为只是更改了css属性，可以避免操作DOM带来的性能开销。
（2）v-if（v-else、v-else-if）：
用法：根据表达式的真假值，来决定是否渲染某些DOM元素。
说明：该指令包裹的内容块更像一种能读取父实例数据的子实例，每一次条件的变化，都会经历一次DOM的销毁与重建。
（3）v-for：
用法：根据源数据，多次渲染某一个内容块。
说明：v-for后面的表达式可以是数组、对象以及数字。
（4）v-bind：
用法：绑定HTML属性值与表达式。
说明：Vue中的双向绑定都需要使用v-bind，换句话说，使用v-bind的话，会将" [expression] "中的内容作为JavaScript表达式进行解析赋，且对应的HTML属性会作为动态属性；而如果不使用，则会将其中的内容作为字符串，其对应的HTML属性则作为静态属性。
（5）v-on：
用法：绑定事件监听器。参数值为事件类型，表达式为监听函数。例如：v-on:click='handle_click'。
说明：相关的事件修饰符：.stop，.prevent，.capture等。
（6）v-model：
用法：监听<input>、<select>、<textarea>以及自定义组件的input事件的参数，并赋值给相应Vue实例变量。
说明：v-model='a' 实际上是 v-on：input = 'function(event){this.a = event.value}' ，v-bind:value='a'的语法糖。
2、初始数据类api
（1）data：
用法：实例初始化的数据对象。
说明：在实例初始化阶段完成对该对象的创建，其中每个属性都会被改造为一个可观察的Observer对象，Observer对象作为实现双向绑定的基础，所以建议将组件中需要进行观察的数据都在一开始就进行初始化，即使赋值为null或者空对象也可以。如果错过初始化阶段，而又需要定义可观察的对象的话，则需要调用实例的this.$set方法，来完成对于属性值的改造。
（2）props
用法：实例初始化时从外部传入的自定义属性对象。
说明：父组件向子组件传递数据的桥梁。
3、监听数据类api
（1）computed
用法：根据实例数据，进行计算后得到的返回值。
说明：类似get_value()这种函数的作用，不同点主要有二：1、computed里面定义的属性，本身是Observer的，当属性值变化时，会对依赖该值的部分均进行重新计算；2、computed里面定义的属性，会对本身的值进行缓存，只有当该值依赖的属性发生变化时，该值才会重新计算。
（2）watch
用法：观察实例属性，当属性发生变化时，调用该方法。
说明：若需要观察实例属性的部分变化，则需要添加deep：true选项。
4、方法类api
（1）监听函数
用法：在methods对象中声明。
说明：监听页面动作，修改实例数据，杜绝直接操作DOM。
（2）纯函数（管道函数）
用法：使用模块加载器（如：RequireJS、SeaJS、Webpack等）引入。
说明：如有必要，可以使用mixins混入。
5、组件类api
（1）components
同步（sync）：
用法：全局情况下使用Vue.component('id',{ [Vue.extend({})|{}] })声明；Vue实例内部可以在compoenents属性下加以声明 { id:{} }。
异步（async）
用法：实例中的components属性可以赋值为一个 function(resolve,reject){ resolve({}); }
（2）生命周期
Vue实例生命周期
网友评论