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+".");    }}// 实例化vuevar app = new Vue({    // 挂载实例    el:'#app',    // 页面数据初始化，字符，对象、数组    data:{        count: 100    },    // 混入    mixins: [addLog]})

6、extends

扩展：对构造器进行扩展

// 扩展var extendObj ={    created: function(){        console.log("我是被扩展出来的");    }}// 实例化vuevar app = new Vue({    // 挂载实例    el:'#app',    // 页面数据初始化，字符，对象、数组    data:{    },    // 扩展    extends: extendObj})

完整的代码示例

     
          
      
           
           
       
            
        
                 {
    {message}}        
         
          价格： {
    {newPrice}}
         
        
         
          数字： {
    {count}}
         
        
         
          
           add
          
         
        
         
          
         
        
         
          过滤： {
    {filtera | filterA}}
         
        
         
          // 额外临时加入时，用于显示日志    var addLog={    updated:function(){        console.log("数据放生变化,变化成"+this.count+".");    }}// 扩展var extendObj ={    created: function(){        console.log("我是被扩展出来的");    }}// 实例化vuevar 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})