Vue常用选项——配置对象
vue有许多配置选项，这里我们久关注一下列出vue的常用的一些选项
1、data
Vue实例的数据对象data已经用了很多了，数据绑定离不开data里面的数据。也是Vue的核心属性。
它是Vue绑定数据到HTML标签的数据源，另外Vue框架会自动监视data里面的数据变化，自动更新数据到HTML标签上去。
本质原理是： Vue会自动将data里面的数据进行递归抓换成getter和setter，然后就可以自动更新HTML标签了，当然用getter和setter所以老的浏览器Vue支持的不够好。(因此，vue直接抛弃了ie8的怀抱)
data对象的类型：类型是Object或者Function。如果是组件对象中，data必须是Function类型。(后面学了组件后就明白了，暂时对组件先放放。)
用法：
- 创建普通的Vue实例
var vm = new Vue({
data: data
})
-
组件定义
// Vue.extend() 中 data 必须是函数 var Component = Vue.extend({ data: function () { //这里必须是函数！！！ return { a: 1 } } })
2、computed
计算属性： 主要是对原数据进行改造输出。改造输出：包括格式化数据（价格，日期），大小写转换，排序，添加符号
Vue的计算属性（computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue实例。
这就很强大了，再计算属性中定义的函数里面可以直接使用指向了vue实例的this，异常方便的啊。
类型 { 键：函数} { [key: string]: Function | { get: Function, set: Function } } 当然，可以省略setter,如果省略了setter，那么值就可以是普通函数，但是必须有返回值。
用法
...
computed: {
// 仅读取，值只须为函数
double: function () {
return this.a * 2
},
// 读取和设置
plus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
...
vm.plus // -> 2
vm.plus = 3
vm.a // -> 2
vm.double // -> 4
3、methods
方法属性： 用于绑定html中的事件对应的方法
**类型: ** { [key: string]: Function }
详细: methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
注意， 不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
用法:
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
4、watch
数据变化监听器： 主要用于监测data中的数据变化，迪v-model生效
| { [key: string]: string | Function | Object } |
一个对象，键是需要观察的表达式，值是对应回调函数。 值也可以是方法名，或者包含选项的对象。
Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
注意， 不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。
用法:
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
// 监控a变量变化的时候，自动执行此函数
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1
5、filters
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：
- 双花括号插值
- v-bind 表达式 (后者从 2.1.0+ 开始支持)
| 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号 | 指示： |
**用法： **
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
6、mixins
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
用于减少代码污染、减少代码量、实现代码重用
用法：
// 额外临时加入时，用于显示日志
var addLog={
updated:function(){
console.log("数据放生变化,变化成"+this.count+".");
}
}
// 实例化vue
var app = new Vue({
// 挂载实例
el:'#app',
// 页面数据初始化，字符，对象、数组
data:{
count: 100
},
// 混入
mixins: [addLog]
})
7、extends
参数： {Object} options
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
扩展：对构造器进行扩展
用法：
// 扩展
var extendObj ={
created: function(){
console.log("我是被扩展出来的");
}
}
// 实例化vue
var app = new Vue({
// 挂载实例
el:'#app',
// 页面数据初始化，字符，对象、数组
data:{
},
// 扩展
extends: extendObj
})
总的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门-常用选项集合</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>价格： </div>
<div>数量： 8</div>
<div><button @click="add(2)">add</button></div>
<div>总价: </div>
<div><input v-model="question"></div>
<div>过滤： </div>
</div>
<script type="text/javascript">
// 额外临时加入时，用于显示日志
var addLog={
updated:function(){
console.log("数据放生变化,变化成"+this.count+".");
}
}
// 扩展
var extendObj ={
created: function(){
console.log("我是被扩展出来的");
}
}
// 实例化vue
var app = new Vue({
// 挂载实例
el:'#app',
// 页面数据初始化，字符，对象、数组
data:{
message: 'hello Vue!',
price: 100,
count: 100,
question: '',
total:'',
filtera: 'abc'
},
// 计算属性：主要是对原数据进行改造输出。
// 改造输出：包括格式化数据（价格，日期），大小写转换，排序，添加符号
computed: {
newPrice () {
return '￥' + this.price + '元';
},
getTotal(){
return this.count*this.price;
}
},
// 方法声明：用于绑定html中的方法
methods:{
add (num) {
this.count += num;
}
},
// data属性监听器, 作用v-model
watch: {
question(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal);
}
},
// 过滤器，通常格式化字符，使用传值
filters: {
filterA(value) {
return value.toUpperCase();
}
},
// 混入，作用：减少代码污染、减少代码量、实现代码重用
mixins: [addLog],
// 扩展
extends: extendObj
})
</script>
</body>
</html>
