vue.js开发外卖App项目总结(一)_vue.js制作缴费app-CSDN博客

本文链接：https://blog.csdn.net/shuidinaozhongyan/article/details/76887179

1.IE8以下不支持ES5的特性，IE9+，firefoxs,chrome,safari,opera均支持ES5特性
2.MV*包括MVC、MVP、MVVM框架
这里写图片描述
应用场景：

针对具有复杂交互逻辑的前端应用
提供基础的架构抽象
通过Ajax数据持久化，保证前端用户的体验

其中vue,angular,react都是MVVM框架

什么是vue.js?

vue于2014年初开源，vue-router,vue-resource等第三方插件库的推出。

它是一个轻量级的MVVM框架(1体积较小，gzip后大小只有20K+。2.数据和视图的交互)
数据驱动+组件化的前端开发
github超过25k+的star数，社区完善

vue.js官网

https://cn.vuejs.org/
经常逛vue.js社区(包括vue仓库(可以看issues);论坛，聊天室;twitter放了一些与vue相关的新闻)

vue.js对比React和Angular(面试经常问，问什么选择vue)

(1)vue.js更轻量，gzip后大小只有20K+,React gzip后大小为44k，Angular gzip后大小有56k，所以对于移动端来说，vue.js更适合；
(2)vue.js**更易上手，学习曲线平稳，而Angular入门较难，概念较多(比如依赖注入)，它使用java写的**，很多思想沿用了后台的技术，react需学习较多东西，附带react全家桶，
(3)吸收两家之长，借用了angular的指令(比如v-show,v-hide对应angular的ng-show,ng-hide)和react的组件化(将一个页面抽成一个组件，组件具有完整的生命周期)
(4)vue还有自己的特点，比如计算属性

vue.js的核心思想

1.数据驱动
手动改变数据，vue.js通过指令对DOM封装，当数据发生改变，通过指令修改对应的DOM，数据驱动DOM的变化，DOM是数据的一种自然映射。

当修改视图时，vue.js**监听到**DOM变化，进而修改数据。
2.组件化
目的：扩展HTML元素，封装可重用的代码

这里写图片描述
其中，页面被拆分成一个个小的区块，每个区块对应一个组件，组件可以嵌套，最终组合形成一个完整的页面。
在vue.js中，每个组件都对应一个vue model，最终生成vue model树，它与DOM树是一一对应的关系。

vue.js的MVVM框架模型

这里写图片描述

其中model对应js对象，view对应dom对象

数据响应原理

数据改变驱动视图自动更新

这里写图片描述
有一个数据a.b,在vue对象实例化过程中，会给a,b通过ES5的defineProperty()方法，添加getter和setter方法，同时vue.js会对模板做编译，解析生成一个指令对象，比如v-text指令，每个指令对象都会关联一个watcher，当对指令对象求值时，就会触发getter，并将依赖收集到watcher中；当再次改变a.b值时，就会触发setter方法，会通知到对应关联的watcher,watcher则再次对a.b求值，计算对比新旧值，当值改变时，watcher会通知到指令，调用指令的update方法，由于指令是对dom的封装，所以会调用原生dom的方法，去更新视图。

组件的设计原则

(1)页面上每个独立的可视/可交互区域视为一个组件(比如页面的头部，尾部，可复用的区块)
(2)每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护(组件的就近维护思想体现了前端的工程化思想，为前端开发提供了很好的分治策略，在vue.js中，通过.vue文件将组件依赖的模板，js，样式写在一个文件中)
(每个开发者清楚开发维护的功能单元，它的代码必然存在在对应的组件目录中，在该目录下，可以找到功能单元所有的内部逻辑)
(3)页面不过是组件的容器，组件可以嵌套自由组合成完整的页面

实现功能

主要包括商品，评论，商家三个主要页面

webpack的package.json必须配置哪些文件

webpack为前端构建工具，它是将各种各样的前端资源编译打包，最终生成.js,css和图片等资源
如下图所示：
这里写图片描述

“scripts”: {
“dev”: “node build/dev-server.js”,
“build”: “node build/build.js”,
“test”: “”,
“lint”: “eslint –ext .js,.vue src”
},
其中，package.json文件有devDependencies和dependencies两个配置，devDependencies是开发时的依赖，dependencies是运行时的依赖。其中node_modules文件夹是我们依赖的一些代码库。
devDependencies：{
“express”: “^4.13.3”,
“webpack”: “^1.12.2”,
“webpack-dev-middleware”: “^1.4.0”,
“webpack-hot-middleware”: “^2.6.0”,//热更新的配置
“webpack-merge”: “^0.8.3”
}
“dependencies“: {
“vue”: “^1.0.21”,
“vue-resource”:”^1.0.1”,
“vue-router”:”^0.7.13”,
“babel-runtime”: “^6.0.0”,
“better-scroll”: “^0.1.7”
},

开发时webpack的配置

入口package.json文件，该文件内容如下所示：
这里写图片描述

运行npm run dev命令时，webpack是如何做编译的，其实是执行node build/dev-server.js
其实是运行bulid目录下的dev-server.js文件

dev-server.js文件定义了各种依赖，
其中express是node.js的运行框架，用它启动一个webServer

注意：运行时webpack的配置在编译打包环节

配置环境

全局安装webpack，通过执行全局命令，使用webpack编译

安装webpaack

a.在全局中安装webpack：npm install webpack -g
b.将webpack安装到项目并将webpack写入package.json的devDependencies中：进入项目根目录，然后在命令行中输入npm install webpack –save-dev。

一个vue文件的包含项

<template>

</template>

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

  }
</script>

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

</style>

注意：.vue文件这三块必不可少，通过 export default 将组件导出，导出一个对象，方便其他组件引用。
其中script是它的一些执行逻辑，style是它的一些样式
(1) type=”text/ecmascript-6”的作用支持es6的语法，lang="stylus" rel="stylesheet/stylus"支持stylus的语法。

vue指令

v-bind

下面将介绍Vue中常用的几个内置指令。当然，Vue除了内置指令，也可以根据需求自定义指令。

v-if指令

条件判断指令，根据表达式值的真假来插入或删除元素，表达式返回一个布尔值，语法如下：

v-if = "expression"

v-show指令

条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值。语法如下：

v-show = "expression"

v-else指令

可配合v-if或v-show使用，v-else指令必须紧邻v-if或v-show，否则该命令无法正常工作。v-else绑定的元素能否渲染在HTML中，取决于前面使用的是v-if还是v-show。若前面使用的是v-if，且v-if值为true，则v-else元素不会渲染；若前面使用的是v-show，且v-show值为true，则v-else元素仍会渲染到HTML。
v-for指令

循环指令，基于一个数组渲染一个列表，与JavaScript遍历类似，语法如下：

v-for = "item in items"

v-bind指令

给DOM绑定元素属性，语法如下：

v-bind:argument="expression"

v-on指令

用于监听DOM事件，语法与v-bind类似，如监听点击事件v-on:click=”doSth”。

注：v-on指令可以缩写为@符号。如：@click=”doSth”。

vue生命周期小结

生命周期钩子的一些使用方法：

beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom