vue项目分析学习

一、框架对比

1. Vue：
   • 核心思想：数据驱动、组件化
   • 如何实现双向数据绑定：Object.defineProperty
   • 模板和渲染函数的弹性选择
   • 简单的语法以及项目构建
   • 更快的渲染速度和更小的体积

1. React:
   • 更适用于大型应用和更好的可测试性
   • 同时适用于Web端和原生App
   • 更大的生态圈带来更多的支持和工具
2. Vue和Recat相同点：
   • 利用虚拟DOM实现快速渲染
   • 轻量级
   • 响应式组件
   • 服务器渲染
   • 易于集成路由工具，打包工具以及状态管理工具。
   • 优秀的支持和社区

二、Vue实现双向绑定的代码实例

三、项目架构分析

1. 前端（Vue.js-MVVM）：视图层（商品列表、购物车、地址列表、商品结算、订单成功）+公共组件（Vue-Router Axios Vuex Util 依赖）
2. 后端：（Node+Express）+ 数据库（MongoDB）

四、项目构建

1. 首先你要有node.js和git。

2. 安装淘宝镜像:npm install -g cnpm –registry=https://registry.npm.taobao.org

3. 全局安装webpack :cnpm install webpack -g

4. 全局安装vue的脚手架：npm install vue-cli -g

5. 初始化一个webpack项目：

6. 简单项目：vue init webpack-simple demoName

   

   • 完整项目：vue init webpack proName

7. 安装依赖：cnpm install

8. 启动：npm run dev

五、vue的基础语法

1. Mustache语法：

2. Html赋值：v-html = “”

3. 绑定属性：v-bind:id = “”

4. 使用表达式ok?’YES’:’NO’

5. 指令：v-if=””

6. 过滤器：和v-bind:id = “rawld | formatld”

7. Class和Style绑定

   • 对象语法：v-bind：class=”{ active:isActive,’text-danger’:hasError}”>

   • 数组语法： \

     ​ data:{ activeClass: ‘active’,errorClass:’text-danger’}

   • style绑定-对象语法：v-bind:style=”{color:activeColor,fontSize;fontSize+’px’}”

8. 条件渲染：

   • v-if
   • v-else（显示或隐藏整个dom）
   • v-else-if
   • v-show(div不改变dom结构，只是决定显示不显示)
   • v-cloak(页面刷新太快，可以实时地显示或隐藏dom)

9. 时间处理器：

   • v-on:click=”greet”或者@click=”greet”
   • v-on:click.stop（阻止冒泡）、v-on:click.stop.prevent（阻止默认事件）、v-on:click.self（绑定自身）、v-on:click.once（只绑定一次）
   • v-on:keyup.enter

10. Vue组件

    • 全局组件和局部组件
    • 父子组件通信-数据传递（一般来说，不允许子组件向上改变父组件，但是可以通过出发emit来触发）
    • Slot

六、前端路由基础知识

1. 根据不同的url地址展示不同的内容或者页面
2. 把不同的路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的。
3. 什么时候使用前端路由：在单页面应用，大部分页面结构不变，只改变部分内容的使用。
4. 前端的路由有什么优点和缺点？
   • 优点:用户体验好，不需要每次都从服务器全部获取，快速展现给用户。
   • 缺点：不利于SEO。使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。
5. 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置。
6. vue-router用来构建SPA
7. router-link或者this.$router.push({path:})路由的跳转标签
8. router-view组件的渲染
9. 动态路由的匹配
   • 应用商城的详情页面
10. 嵌套路由
    • 不需要用户刷新而是需要嵌套子路由
11. 编程式路由
    • 通过js来实现页面的跳转
    • $router.push(“name”)
    • $router.push({path:”name”})
    • $router.push({path:”name?a=123”})或者$router.push({path:”name”,query:{a:123}})
    • $router.go(1)
12. 命名路由和命名视图
    • 给路由定义不同的名字，根据名字进行匹配
    • 给不同的router-view定义名字，通过名字进行对应组件的渲染

七、Vue-Resource基础介绍

1. vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：
   • get(url,[options])
   • head(url,[options])
   • delete(url,[options])
   • jsonp(url,[options])
   • post(url,[body],[options])
   • put(url,[body],[options])
   • patch(url,[body],[options])
2. 补充的基础小知识：
   • url:请求的URL
   • method:请求的http方法，如‘GET’,’POST’或其他HTTP方法
   • body:发post请求的时候会有request body
   • params:发get请求的时候指定的参数
   • headers:发请求的时候往request header里面注入的参数。
   • timeout:请求超时时间（0表示无超时）
   • before:请求发送前的处理函数，类似于jQuery的beforeSend函数
   • progress:ProgressEvent回调处理函数
   • credientials: 表示跨域请求时是否需要使用凭证。
   • emulateHTTP:发送PUT，PATCH,DEKKETE请求时以HTTP POST的方式发送，并设置请求头X-HTTP-Method-Override将request body以application/x-www-form-urlencoded content的方式让服务器端识别
   • 全局拦截器interceptors:可以在同一个里面处理多个请求
3. 安装vue-resource的命令：npm install vue-resource
4. vue-resource –save。
5. 安装ejs：npm install ejs –save 可以使用html代替jade

八、ES6讲解

1. 函数的Rest参数和扩展
2. promise使用
3. module.exports和ES6 import/export的使用
   • AMD、CMD、CommeonJs和ES6的区别
     • AMD：依赖前置，在需要的时候需要在最前面给它定义好。
     • CMD依赖就近：在什么地方使用就在哪requere。同步概念。
     • CommonJs:
     • ES6: export/import

九、进入实战

1. 组件分析：

   • Header组件
   • Footer组件
   • 面包屑组件

2. main.js分析

   • new Vue实例是整个页面的接口：
     • el: ‘app’可以在函数后面跟.mount(“#app”)代替
     • template:’<’app’>’可以用rander: funvtion (h) { return h(app)}底层实现。

• assets: 放组件的静态资源，assets里面的图片会在我们打包过程中打包到一起。当图片足够小的时候会生成base64的形式。
• static里面放的图片通过src进行加载，页面中比较大的图片会放在static里面

1. 在组件中，应该把不用的style删去，否则会生成很多空的style.

2. 取名字的时候不应该与H5标签名冲突。@直接定位到src目录中去。

3. <slot></slot>插槽

4. 插件介绍：axios

   • npm install axios
   • 可以通过axios来完成ajax请求

5. 插件介绍：vue-lazyload –save

   • 使用v-lazy可以实现图片的懒加载动画

6. Node.js在linux下安装和环境搭建

   • wget : https://npm.taobao.org/mirrors/node/v8.4.0/node-v8.4.0-linux-x64.tar.gz
   • 解压：tar -xzvf node-v8.4.0-linux-x86.tar.gz
   • tar -xvf node-v8.4.0-linux-x64.tar.gz
   • in -s /node-v6.10.3-linux-x64/bin/node /usr/local/bin/node
   • in -s /node-x6.10.3-linux-x64/bin/npm /usr/loacl/bin/npm
   • 我的配置过程：
     1. 登录你的云主机
     2. wget https://npm.taobao.org/mirrors/node/v8.4.0/node-v8.4.0-linux-x64.tar.gz
     3. 解压：tar -xzvf node-v8.4.0-linux-x64.tar.gz
     4. 可以使用ls -la查看是否有这个安装模块(移除命令：unzip xxx.zip移除模块指令：rm-rf 模块)
     5. 进到目录：node-v8.4.0-linux-x64/bin/
     6. 通过ls -l查看node模块
     7. 通过./node -v查看node.js版本
     8. 建立node的软链接ln -s /node-v8.4.0-linux-x64/bin/node /usr/local/bin/node
     9. 建立npm的软链接ln -s /node-v8.4.0-linux-x64/bin/npm /usr/local/bin/npm

九、Node编程基础

1. 基于Chrome V8引擎
2. 单线程
3. 使用Javascript开发后端代码
4. 非阻塞IO
5. 实例演示：
   • Common规范
   • 创建一个Http Server
   • 创建一个Web容器，可以访问到HTML内容
   • Http模块的客户端演示：
     • 
     • 安装express模块: cnpm i -g express-generator
     • 通过express –version查看版本
     • 生成express框架文件：express server
     • ​

十、MongoDB

1. windows平台上安装：

   • 下载安装包：https://www.mongodb.com/download-center#community
   • 安装软件
   • 创建文件夹/data/db
   • 在bin目录下启动: mongod.exe –dbpath e:/data/db(git的时候用/window上用\)
   • 开始使用：mongo
   • MongoDB操作：
     • 查看所有：show dbs
     • 创建:
       • use runoob
       • db.runoob.insert({“name”:”啦啦啦”})
     • 删除：
       • use runoob
       • db.dropDatabase()

2. linux平台上安装

   • 云主机上的安装请参见博客：http://blog.csdn.net/leshami/article/details/53171375
   • MongoDB安全设置：
     • https://www.howtoing.com/how-to-install-and-configure-mongodb-on-centos-7/
     • 登录：mongo
     • use admin
     • 验证：db.auth(‘admin’,’admin123’);返回1

3. MongoDB的基本语法：

   • 
   • 在用户底下创建数据库
     • db.createUser({user:’test’,pwd:’test’,roles:[{role:’readWrite’,db:’testDB’}]})
     • use admin
     • db.system.users.find({user:’test’})\
     • use testDB
     • db.auth(‘test’,’test’)
     • db.hello.insert({name:’World’})
     • db.hello.find()
   • 删除用户：
     • use testDB
     • db.dropUser(‘test’)
   • 插入数据
     • db.hello.insert({id:123,name:’hello’})
     • show collections
     • 删除集合：db.hello.drop()
     • 查看并格式化集合数据db.data.find().pretty()
     • 查看第一条数据：db.data.findOne()
     • db.goods.insert({“productId”:”201710015”,”productName”:”摄像头”,”salePrice”:”222”,”productImage”:”photo.jpg”})
   • 更新数据：
     • db.data.update({userName:’jack’},{$set:{userAge:30}})
     • db.data.update({userId:100},{$set:{‘class.name’:’imooc-test’}})
   • 查询数据：
     • db.data.find({“userName”:”jack”}).pretty()
     • 搜寻大于31的数据：db.data.find({userAge:{$gt:31}}).pretty()
     • 寻找小于31的数据：db.data.find({userAge:{$lt:31}}).pretty()
     • 寻找等于30的数据：db.data.find({userAge:{$eq:30}}).pretty()
     • 寻找大于等于31的数据：db.data.find({userAge:{$gte:31}}).pretty()
     • 寻找小于等于31的数据：db.data.find({userAge:{$lte:31}}).pretty()
     • 寻找不等于31的数据：db.data.find({userAge:{$ne:31}}).pretty()
   • 移除数据：
     • db.data.remove({userId:101});

   十二、开发商品列表接口

   1. pm2:
      • 优点是不影响其他工作
      • 安装pm2：npm install pm2 -g
      • 启动：pm2 satrt +文件路径
      • 停止进程：pm2 stop all/某个文件的路径
      • 查看有多少个进程在运行：pm2 list
      • 查看日志：pm2 log
   2. 安装Mongoose
      • npm install mongoose –save
   3. 创建model
   4. 创建路由
   5. 基于mongoose,实现商品列表的查询功能
   6. proxyTable代理
   7. db.goods.insert({“productId”:”2017100912”,”productName”:”自拍杆”,”salePrice”:88,”productImage”:”2.jpg”})

十三、商品列表接口

1. 分页插件：
   • cnpm install vue-infinite-scroll –save
   • ​