（三）Vue2.0-选项
选项就是在Vue构造器里的配置功能的前缀
propsData
只用于 new 创建的实例中。
var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } })
propsData在实际开发中我们使用的并不多，我们在后边会学到Vuex的应用，他的作用就是在单页应用中保持状态和数据的。
computed
computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号等。
注意：不应该使用箭头函数来定义计算属性函数 。
var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } } }) vm.aPlus // => 2 vm.aPlus = 3 vm.a // => 2 vm.aDouble // => 4
methods
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
var vm = new Vue({ data: { a: 1 }, methods: { plus: function () { this.a++ } } }) vm.plus() vm.a // 2
methods中的$event参数：
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：
<button @click=”add(2,$event)”>add</button>
native 给组件绑定构造器里的原生事件
在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。
<p><btn @click.native="add(3)"></btn></p>
watch
数据变化监控。是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4 }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 深度 watcher c: { handler: function (val, oldVal) { /* ... */ }, deep: true }, // 该回调将会在侦听开始之后被立即调用 d: { handler: function (val, oldVal) { /* ... */ }, immediate: true } } }) vm.a = 2 // => new: 2, old: 1
有些时候我们会用实例属性的形式来写watch监控。也就是把我们watch卸载构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。
app.$watch('temperature',function(newVal,oldVal){
if(newVal>=26){
this.suggestion=suggestion[0];
}else if(newVal<26 && newVal >=0)
{
this.suggestion=suggestion[1];
}else{
this.suggestion=suggestion[2];
}
})
mixins
mixins选项接受一个混合对象的数组。这些混合实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。
mixins一般有两种用途：
1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
<script type="text/javascript">
//全局混入
Vue.mixin({
created:function(){
console.log('我是全局被混入的');
}
})
var aaa={
created:function(){
console.log('我是外部被混入的');
}
}
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
created:function(){
console.log('我是原生的');
},
mixins:[aaa]
})
// 我是全局被混入的
// 我是被外部引入的
// 我是原生的
</script>
mixins的调用顺序：
Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用
从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。
PS：当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用
extend 扩展选项
通过外部增加对象的形式，对构造器进行扩展 。
与mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。
delimiters
改变纯文本插入分隔符。
new Vue({ delimiters: ['${', '}'] }) // 分隔符变成了 ES6 模板字符串的风格
现在我们的插值形式就变成了${}
（四 ）实例和内置组件
第一节：实例属性
一、vue和jQuery一起使用
在DOM被挂载后修改里边的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
<title>Early Examples Demo</title>
</head>
<body>
<h1>Early Examples Demo</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
//在Vue中使用jQuery
mounted:function(){
$('#app').html('我是jQuery!');
}
})
</script>
</body>
</html>
二、实例调用自定义方法
methods:{ add:function(){ console.log("调用了Add方法"); } }
调用：
app.add();
第二节：实例方法
一、vm.$mount()
创建并挂载到 #app (会替换 #app)
第三节：实例事件
一、vm.$on( event, callback )
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
二、vm.$once( event, callback )
听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。
三、vm.$off( [event, callback] )
移除自定义事件监听器。
-
-
如果没有提供参数，则移除所有的事件监听器；
-
如果只提供了事件，则移除该事件所有的监听器；
-
如果同时提供了事件与回调，则只移除这个回调的监听器。
-
四、vm.$emit( event, […args] )
触发当前实例上的事件。附加参数都会传给监听器回调
第四节：内置组件slot
slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。
slot的使用需要两步：
1、在HTML的组件中用slot属性传递值
<comp> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </comp>
2、在组件模板中用<slot></slot>标签接收值
<template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>网名：<slot name="netName"></slot></p> <p>技术类型：<slot name="skill"></slot></p> </div> </template>