您的位置:首页 > Web前端 > Vue.js

了解MVVM,vue.js搭建属于你的饿了吗项目

2019-02-22 22:06 323 查看

1.MVVM框架

view      <=>         viewModel   <=>        model

视图(DOM) 通讯(观察者) 数据(js对象)

  • 基本概念:当数据发生变化,viewModel观察到数据变化,通知对应视图自动更新

当用户操纵视图,viewModel也能监听到视图变化,通知数据改变

  • 应用场景:

针对具有复杂交互逻辑的前端应用

提供基础的架构抽象

通过ajax数据持久化,保证前端用户体验

2.什么是vue.js?

一个轻量级的MVVM框架 组件化+数据驱动的前端开发

  • 数据驱动:数据改变驱动dom自动更新,dom是数据的自然映射
  • 组件化:扩展HTML元素,封装可重用代码

组件设计原则:

页面每个独立的可视/可交互区域视为一个组件

每个组件对应一个工程目录,组件需要的资源在这个目录下就近维护

页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面

3.vue开发利器vue cli——Vue的脚手架

[code]$npm install -g vue-cli//全局安装

$vue init webpack sell//初始化一个项目vue init <模板> <项目名>

$cd sell

$npm install//安装依赖,生成node_modeles文件

$npm run dev//运行项目

进入文件夹,查看了解各个项目文件是干嘛的(后续补充)

4.资源准备

需求分析:头部-商品页-评价页-商家 -详情页-购物车

项目资源准备:图片素材

图标字体制作:https://icomoon.io/app/#/select将svg文件上传生成对应的icon下载下来

目录设计:在src下面新建一个common文件,将上一步下载的文件copy过来。

模拟(mock)数据:在build./dev-server.js文件里写路由获取数据

[code]...
const app = express()
const appData = require('../data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
// router
const apiRoutes = express.Router();
apiRoutes.get('/seller', function (req, res) {
res.json({
code: "SVCSTG.0000000",
data: seller
})
})
...
app.use('/api', apiRoutes)
...

5.页面骨架拆分

[code] <!--html5移动端Meta设置 强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />

一个vue文件模板:

[code]<template>
<div class="header">
我是header
</div>
</template>

<script  type="text/ecmascript-6">
export default {};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

</style>

。。。

6.css-stick-footer布局写详情页

flex布局

 

 

 

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: