八，food组件实现
1. 商品详情页
一个命名规范：methods命名的函数如果实在组件内部私有的，命名前加一个下划线，如果是外部能调用的不用。
由于food图片（image-header）大小不一致，为了给food框定一个大小限制的宽高（图片加载前也要留好空间），这里用一个黑科技：padding-top: 100% 相对于宽度来计算padding。其实可以用width：100vw；height：100vw来实现啊，很优雅，但是为了考虑到兼容性问题。
.image-header
position: relative
width: 100%
height: 0
padding-top: 100%
img
position: absolute
top: 0
left: 0
width: 100%
height: 100%
在做“加入购物车”和cartcontrol动画的时候，注意第一次点击加入购物车后这个div就消失了，所以getBoundingClientRect拿不到所在位置。解决方法如下：给“加入购物车”加一个消失fade的动画。
记得给cartcontrol组件里面点击事件加阻止冒泡哦。
现在在goods页面点击一个商品的+号按钮，再进入第一个商品的商品详情页，不管怎么点击+号按钮或者是点击-号按钮，数字一直是1，并且有小球动画。bug修复。。，
2. split组件
教程中做了一个组件。
split组件很小，而且没有内容，只有样式，其实也可以直接写成一个公共样式放在base文件里，然后通过类名直接调用，可以省去引用组件、注册组件的环节。
3. ratingselect组件
ratingselect组件是用在food组件里面以及评价路由中的。两者的desc不太一样，结构一样。
food中要在show函数里面初始化设定值，因为从good里面进去的不同的食物应该都要初始化。
ratingselect组件中的点击事件要传给父组件，由于都是基础类型（Number，Boolean），所以只能dispatch事件。对应到父组件food里面定义events。
events: {
'ratingtype.select'(type) {
this.selectType = type;
this.$nextTick(() => {
this.scroll.refresh();
});
},
'content.toggle'(onlyContent) {
this.onlyContent = onlyContent;
this.$nextTick(() => {
this.scroll.refresh();
});
}
}
注意要更新scrollDOM和刷新，不然有回弹效果。
4. 评价列表
v-show也可以绑定一个表达式，表达式是一个函数计算的结构。
...
needShow(type, text) {
if (this.onlyContent && !text) {
return false;
}
if (this.selectType === ALL) {
return true;
} else {
return type === this.selectType;
}
}
评价item中的时间要从时间戳格式化。方法为用vue的filter方法。
filter在template中的写法：
filters: {
formatDate(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm');
}
}
filters函数中引用一个我们自定义的公用方法common/js/date.js。模块化编程的思想：
//common/js/date.js
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, date.getFullYear() + '').substr(4 - RegExp.$1.length);
}
let obj = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let key in obj) {
if (new RegExp(`(${key})`).test(fmt)) {
let str = obj[key] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
};
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
这里的写法很巧妙，注意学习。不带花扩号的一般用于export default; 带花括号的用于export function XX，花括号内可以引多个不同的函数名字。
这一章最后老师发现了了一个报错信息提示better-scroll传进来的是null。分析是因为执行router.go('/goods')的时候ratings页面已经没有dom了，但是betterscroll异步执行拿不到数据。解决方法就是注释掉router.go。
九，seller组件实现
大部分内容都和之前做过的知识点重复。
这里的betterscroll用一个hack的方式实现。
首先尝试在ready()的钩子中初始化，因为created不能保证DOM已经渲染好，ready的时候渲染好了。然而这样并不能滚动，原因是ready的时候seller这个异步数据还没有传过来，并不能把高度撑开。接着我们尝试把初始化代码放在watch中，watch观测seller的变化从而执行初始化滚动。然而又有一个问题出现了，在seller／goods／ratings导航栏切换的时候dom会重新渲染走一遍，此时watch观测的seller后端数据不会改变函数不起作用。解决方法是在ready和watch中都写上初始化代码，切换导航栏的时候通过ready的refresh实现滚动。
在实现商家实景图的横向滚动时，方法和前面的一样，watch和ready中都要写上初始化函数。better-srcoll横向滚动的参数设置：scroll:true, eventPassthrough:'vertical'注意这里ul的宽度没有撑开，所以要手动在代码里赋值真实高度。课程有人在提问里说只要触发BFC就可以无需计算ul宽度。
这里唯一的和用户交互的地方是“收藏商家”。绝对定位收藏div，注意给定一个width，这样位置可以固定不会由于文字长度改变而改变。给这个favorite值做localstorage缓存。
在common／js中写两个文件。
// store.js
export function saveToLocal(id, key, value) {
let seller = window.localStorage.__seller__;
if (!seller) {
seller = {};
seller[id] = {};
} else {
seller = JSON.parse(seller);
if (!seller[id]) {
seller[id] = {};
}
}
seller[id][key] = value;
window.localStorage.__seller__ = JSON.stringify(seller);
};
export function loadFromLocal(id, key, def) {
let seller = window.localStorage.__seller__;
if (!seller) {
return def;
}
seller = JSON.parse(seller)[id];
if (!seller) {
return def;
}
let ret = seller[key];
return ret || def;
};
// util.js
/**
* 解析url参数
* @example ?id=12345&a=b
* @return Object {id:12345,a:b}
*/
export function urlParse() {
let url = window.location.search;
let obj = {};
let reg = /[?&][^?&]+=[^?&]+/g;
let arr = url.match(reg);
// ['?id=12345', '&a=b']
if (arr) {
arr.forEach((item) => {
let tempArr = item.substring(1).split('=');
let key = decodeURIComponent(tempArr[0]);
let val = decodeURIComponent(tempArr[1]);
obj[key] = val;
});
}
return obj;
};
修改App.vue。 为了router切换的时候避免DOM重新渲染，记住购物车信息等，我们使用keep-alive。Vue中推荐我们用Object.assign({},this.seller,response.data)给对象扩展属性的方法，这样不会覆盖本身的属性。这里seller有id信息并显示在url中。data中用立即执行函数。
// App.vue
在seller.vue中观测改变favorite的localstorage存储。
data() {
return {
favorite: (() => {
return loadFromLocal(this.seller.id, 'favorite', false);
})()
};
},
methods: {
toggleFavorite(event) {
if (!event._constructed) {
return;
}
this.favorite = !this.favorite;
saveToLocal(this.seller.id, 'favorite', this.favorite);
},
...
十，项目编译打包
**webpack **
npm run build 生成的东西在 dist文件夹中。
extract-text-webpack-plugin可以把打包过程中的css提取出来生成独立的文件。
打包后dist静态资源交给后端或者cdn，后端需要实现ajax接口。就是说dist 目录可以发布到 cdn 源站，配置 webpack 的 publicpath 指定域名生成绝对路径访问，也可以发布到后端服务器，通过相对路径访问。
souremap启动是为了方便调试（配置config/index.js中可以更改），真实生产环境中不让调试的。
因为我们不能只做静态文件，这里教程中写一个文件prod.server.js做简单的express起HTTP server。从之前dev-server.js里面拷贝异步router。最后命令行中运行node prod.server.js。
记得在config/index.js中写上build环境下的端口号port。
代码中配置请求的 ajax 地址，可以有类似如下的代码：const debug = process.env.NODE_ENV !== 'production', const apiUrl = debug ? '线下ajax地址' : '线上ajax地址'。
app 可以通过 webview 渲染 h5 页面。
十二，vue1.0升级2.0
配置文件的修改
package.json, build目录, config目录。
vue以及vue-router等都要变成2.0的。
几个修改注意的地方
//webpack.base.conf.js
postcss: [
require('autoprefixer')({
browsers: ['last 2 versions', 'Android >= 4.0']
})
]
build目录下多了一个check-versions.js，未来检测当前npm和node版本。
vue-router API
- 初始化路由变化。(看官网) render等
- v-link指令替换为
组件。
vue2.0 语法变化
- v-for。 index、key
- v-el、v-ref。替换为ref属性
- 模版变化，组件只允许一个根元素。
- 组件通信变化，¥dispatch废除。dispatch为子组件向父组件不断冒泡，而替换为emit在当前组件监听，即现在子组件上监听，父组件上定义，一种变通做法。
- 实践监听变化，废除events属性。
- 不能在子组件直接修改父组件传入的prop。解决方法是用data或计算属性修改，或者像ratingselect组件那样emit事件然后在父组件修改。
- 过渡的变化，transition组件。视频讲解很详细
- 小球下落动画实现的变化。有@before-enter,@enter,@after-enter几个事件
- keep-alive属性变为
组件