Vue基础小案例分享

综合案例：商品信息管理

1 添加商品

需求：使用商品对象newGoods接收用户输入的商品信息，在用户单击“添加”按钮时，将商品对象存入数组中。

let addGoods={…this.newGoods}是ES6提供的新运算符：扩展运算符，能够完成两个对象属性的合并

2 删除商品

注意：delete是JavaScript关键字，在定义函数名时不要使用！

3 细节处理：添加按钮的禁用与可用

4 查询商品

5 统计商品总价

6 使用过滤器处理商品价格

1 过滤器

作用：解决数据显示的“格式”问题！！！！

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号{{}}插值语法和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

定义过滤器

过滤器名(原始数据oldVal,自定义形参列表可有可无){

//格式化数据的处理代码，return格式化结果

}

细节：过滤器定义时固定第一个形参是原始数据

调用过滤器

{{数据 | 过滤器名(只需要传入自定参数的实参值，oldvalue默认就是原始数据)}}

v-bind:属性=“数据 | 过滤器名(只需要传入自定参数的实参值，oldvalue默认就是原始数据)”

示例代码如下：

{{ message | 过滤器名称 }}

​

过滤器分类

你可以在一个组件的选项中定义本地的过滤器，即局部过滤器，也可以在创建 Vue 实例之前全局定义过滤器，即全局过滤器

全局过滤器

作用范围：所有的vue实例都可以调用

Vue.filter(‘过滤器名称’, function (value) {

//过滤器处理代码

})

​

new Vue({

// …

})

局部过滤器

作用范围：当前添加过滤器的vue对象可以使用

new Vue({

//…

filters: {

过滤器名称(value) {

  //过滤器处理代码

}

}

});

过滤器优先级

就近原则：当全局过滤器和局部过滤器重名时，会采用局部过滤器。

案例：使用过滤器处理日期显示格式

需求：商品列表的日期格式处理

定义商品信息时，商品的出厂日期理应是Date对象


依靠过滤器处理日期格式

2 v-for补充key属性的作用【理解】

品牌管理的列表存在的一个小’bug’，现象如下图所示：

细节：v-for中的key属性[理解]

2.2.0+ 的版本里，当在组件中使 v-for 时，key 现在是必须的

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

​

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性

解决方案：