本文实例讲述了
Vue
+Node实现商品列表的分页、
排序
、筛选，添加购物车功能。分享给大家供大家参考，具体如下：
商品列表的分页实现是后台根据前端请求的页面大小、页码位置，去数据库
中
查询指定位置的数据然后返回给前端。比如页面大小为8，要查第3页的数据，则跳过2*8条数据，然后返回接下来的8条数据。
实现滚动加载：页面刚一加载完成并不需要请求所有数据，只显示一部分。当用户下拉到页面底部时，再去请求数据并拼接到商品数据列表
中
。通过
vue
-infinite-scroll插件实现滚动加载，在框架末尾插入加载div，并且可以在其
中
放入加载动画
<div v-infinite-scroll="l
<input type="text" placeholder="请输入名字" v-model="keyword"/>
<li v-for="(p, index) in persons" :key="index">
{{p.name}} - {{p.age}}
是一个
Vue
.js的拖放和
排序
列表组件。它基于库，可以用于实现拖放、
排序
、带有动画效果的过渡以及其他特性。支持
Vue
.js 2.x和3.x，可以在任何现代浏览器和移动设备上使用。还支持自定义拖放元素，可以用于实现更复杂的拖放和
排序
功能。下面是一个例子：return {return {} .clone {} .drag {} .text {flex : 1;
<meta charset="UTF-8">
<title>
Vue
测试</title>
<script type="text/javascript" src='https://cdn.jsdelivr.net/npm/
vue
@0.11/dist/
vue
.min.js'></script>
<input type="text" v-model="searchName" minlength="1" maxlength="10">
<li v-for="(item,index) in filterList" :key="index">
{{item.name}}--{{item.age}}
初始化界面前 : 在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。
2. created
初始化界面后 : 在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数,也就是不会更新视图，SSR可以放这里。
3. beforeMount
挂载前 ：完成模板编译，虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。
var newDate = currentDate.getDate();
var data2 = {name:'zk00',age:'26',date_time:newDate};
this.students.push(data2);
this.students.map(mapItem => {
console.log('aaa====...
