Vue购物车地址选配笔记

项目代码地址Vue购物车地址选配

• for循环中嵌套for

  <li v-for="(item,index) in productList">
  <div class="item-include">
      <dl>
         <dt>赠送:</dt>
         <dd v-for="part in item.parts" v-text="part.partsName"></dd>
      </dl>
  </div>
  </li>

• mounted

  mounted: function() {
  //钩子函数
  //cartView函数要执行，须先执行钩子函数
  //完成对cratView函数的调用
  //使用mounted 并不能保证钩子函数中的 this.$el 在 document 中。为此还应该引入            
     this.$nextTick(function () {
        this.cartView() 
    })
  })
  },
  methods: {
  //这个是要执行的函数
    cartView: function() {
        // do something
      });
    }
    }
  }

• computed与methods的区别

  定义：我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

我的理解：computed依赖缓存，如果不需要经常变动的用computed，需要经常变动的用methods。
另外一种情况，如果你需要传参数，就用methods。

• filter过滤器

  Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

filter分全局注册和局部注册

// 局部注册
filters: {
    formatMoney: function(value) {
        return '¥ ' + value.toFixed(2);
    }
},
// 全局注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})

过滤器可以串联

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中，然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

接受参数

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 取值后的值作为第三个参数。

• $.ajax cache:ie8下的缓存问题
• javascript的数字都是双精度浮点数，当心浮点运算中的精度缺陷
• 判断对象的属性是否存在

  this.productList.forEach(function(item,index) {
  if (typeof item.checked == 'undefined') {
     // 添加属性，全局：vm.set()
       _this.$set(item, 'checked', _this.checkAllFlag);
  } else {
       item.checked = _this.checkAllFlag;
  }     
  });

组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例之前注册了组件：

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

csdn发布地址