Vue.js框架
- Vue.js介绍
- Vue-cli脚手架搭建基本代码框架
- vue-router官方插件管理路由
- vue-resource AJAX通信
- webpack 构建工具
- es6 + eslint –>代码风格检查工具
公司漂亮夜景
Vue
- 轻量级Mvvm框架
- 数据驱动 + 组件化 开发
Vue-cli
- 目录结构
- 本地调试
- 代码部署
- 热加载
- 单元测试
安装1
2
3
4
5
6
7
8
9npm install -g vue-cli //安装脚手架
vue init webpack sell ///注意 vue init 初始化
cd sell
npm install
npm run dev
better-scroll
1.布局

2.在需要滚动的div上面添加
1 | ref="menuwrapper" |
.jpg)
3.添加方法
1 | _initScroll () { |
4.使用方法1
2
3
4
5
6// dom结构加载结束
this.$nextTick(() => {
setTimeout(() => {
this._initScroll()
}, 100)
})
定时器存在的意义:等待dom完全执行完毕以后初始化滚动插件
5.vue computed属性
table-cell布局1
2
3display:table
display:table-cell
vertical-align: middle
6.父子 兄弟组件之间通信
安装 npm install stylus stylus-loader
npm install vue-resource
打包失败
cd dist
npm install -g http-server // 该命令只需执行一次, 安装过之后, 以后就不需要重复安装了.
hs
路由定向
routes: [
{
path: ‘/‘,
redirect: ‘/goods’
},
子组件派发事件到父组件1
this.$emit('select', num); /
父组件1
2
3
4
5
6
7@select="selectRating"
selectRating(type) { // 触发接收到子组件的派发事件
this.selectType = type;
this.$nextTick(() => {
this.scroll.refresh();
});
}
(饿了么部署到GitHub)[https://createwj.github.io/VUE2.0-/sell/dist/]