computed

计算属性：对元数据进行改造输出。
应用： 格式化数据（价格，日期），大小写转换，排序，添加符号

  1. computed: {
  2.     newPrice () {
  3.         return '￥' + this.price + '元';
  4.     }
  5. }

filters

过滤器：通常格式化字符，使用传值

  1. filters: {
  2.     filterA(value) {
  3.         return value.toUpperCase();
  4.     }
  5. }

methods

方法属性： 绑定 html 事件对应的方法
如果方法中有参数，没有写括号，那么默认传进去原生 event 对象

  1. <!-html->
  2. 最终结果：  {{count}}
  3. <button @click='add(1)'>点我每次加 1 </button>
  4. <button @click='add(10)'>点我每次加 10 </button>  
  5. 加几是自己传进去的
  6. <-Vue实例->
  7. <script>
  8. data:{
  9.     count: 0
  10. },
  11. methods:{
  12.     add (num) {
  13.         this.count += num;
  14.     }
  15. }

watch

监听属性： 就是数据变化的监听器
用于检测 data 中的数据变化，通知 v-model 生效

  1. watch: {
  2.     question(val, oldVal) {
  3.         console.log('new: %s, old: %s', val, oldVal);
  4.     }
  5. }

mixins

混入：用于减少代码污染、减少代码量、实现代码重用

  1. // 额外临时加入时，用于显示日志
  2. var addLog={
  3.     updated:function(){
  4.         console.log("数据放生变化,变化成"+this.count+".");
  5.     }
  6. }
  8. // 实例化vue
  9. var app = new Vue({
  10.     // 挂载实例
  11.     el:'#app',
  12.     // 页面数据初始化，字符，对象、数组
  13.     data:{
  14.         count: 100
  15.     },
  16.     // 混入
  17.     mixins: [addLog]
  18. })

extends

继承： 对构造器进行扩展

  1. // 扩展
  2. var extendObj ={
  3.     created: function(){
  4.         console.log("我是被扩展出来的");
  5.     }
  6. }
  8. // 实例化vue
  9. var app = new Vue({
  10.     // 挂载实例
  11.     el:'#app',
  12.     // 页面数据初始化，字符，对象、数组
  13.     data:{
  14.     },
  15.     // 扩展
  16.     extends: extendObj
  17. })