vue有许多配置选项，这节之类出常用的一些选项
1、computed
计算属性：主要是对原数据进行改造输出。改造输出：包括格式化数据（价格，日期），大小写转换，排序，添加符号
computed: {
newPrice () {
return '￥' + this.price + '元';
}
}
2、methods
方法属性：用于绑定html中的事件对应的方法
methods:{
add (num) {
this.count += num;
}
}
3、watch
数据变化监听器：主要用于监测data中的数据变化，迪v-model生效
watch: {
question(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal);
}
}
4、filters
过滤器：通常格式化字符，使用传值
filters: {
filterA(value) {
return value.toUpperCase();
}
}
5、mixins
混入：用于减少代码污染、减少代码量、实现代码重用
// 额外临时加入时，用于显示日志
var addLog={
updated:function(){
console.log("数据放生变化,变化成"+this.count+".");
}
}
// 实例化vue
var app = new Vue({
// 挂载实例
el:'#app',
// 页面数据初始化，字符，对象、数组
data:{
count: 100
},
// 混入
mixins: [addLog]
})
6、extends
扩展：对构造器进行扩展
// 扩展
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入门之Helloworld</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<div>价格： {{newPrice}}</div>
<div>数字： {{count}}</div>
<div><button @click="add(2)">add</button></div>
<div><input v-model="question"></div>
<div>过滤： {{filtera | filterA}}</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: '',
filtera: 'abc'
},
// 计算属性：主要是对原数据进行改造输出。
// 改造输出：包括格式化数据（价格，日期），大小写转换，排序，添加符号
computed: {
newPrice () {
return '￥' + 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>
