vue项目分析学习

一、框架对比

  1. Vue:
    • 核心思想:数据驱动、组件化
    • 如何实现双向数据绑定:Object.defineProperty
    • 模板和渲染函数的弹性选择
    • 简单的语法以及项目构建
    • 更快的渲染速度和更小的体积
  1. React:
    • 更适用于大型应用和更好的可测试性
    • 同时适用于Web端和原生App
    • 更大的生态圈带来更多的支持和工具
  2. Vue和Recat相同点:
    • 利用虚拟DOM实现快速渲染
    • 轻量级
    • 响应式组件
    • 服务器渲染
    • 易于集成路由工具,打包工具以及状态管理工具。
    • 优秀的支持和社区

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

Alt text

三、项目架构分析

  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

    Alt text

    • 完整项目: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. 1
    <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模块的客户端演示:
      • Alt
      • 安装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平台上安装

  3. MongoDB的基本语法:

    • alt
    • 在用户底下创建数据库
      • 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