06

前端TDK
268 阅读7分钟

VUE基础-第六天

01-反馈

姓名 意见或建议
*** 上课能跟着一步一步走就好了，讲一步练习一步
*** 没办法写出代码了，感觉全是乱的不行，vue已经废了。 老师写代码的时候能不能截图圈一下，现在根本不知道哪些对应哪些文件，这应该是我学的最懵的一次，项目完全看笔记都写不出来了！！！！！！ *** 唉``` 昨晚晚上和我妈视频说都把我学习学瘦了,我说不是,没说那还吃饭饿瘦的,17:30啊啊啊啊 *** 老师,json-server是自带接口吗?

02-回顾

  • vue-cli
    • vue项目的脚手架 命令行工具
    • 安装 npm i -g @vue/cli 默认安装的3版本
    • 过渡 npm i -g @vue/cli-init 过渡到2版本使用它的命令
    • 创建 vue init webpack-simple heroes69
    • 工作目录 src
  • render
    • main.js 入口文件
    • 创建vue实例 选项 render el template
    • 渲染 一个组件 到指定的el区域 替换显示
    • 这个组件 根组件 App.vue
  • ES6模块化
    • 到出 export default 内容（对象，字符串，...）
    • 导入 import xxx from '包名|js文件路径|vue文件'
    • 导入 import '静态资源css' link
  • .vue文件使用
    • 用来定义 组件 （组件的配置对象）
    • template script style 组件的组成 html js css
    • {template:''} 就是 template标签内容
    • import App from './App.vue' 返回的就是 组件配置对象
    • 在视图中想使用这个组件是要先注册 Vue.component() {components:{}}
    • 如果在路由中组件 只需要配置对象即可
  • 安装bootstrap
    • npm i bootstrap@3.3.7
    • 前端包 使用css js
    • 使用css import ‘css的路径’
    • 由于 包含 字体文件
    • 需要配置加载字体文件的配置 webpack.config.js
  • npm安装使用路由
    • npm i vue-router
    • 导入 import VueRouter from 'vue-router'
    • 注册 Vue.use(VueRouter )
    • 步骤 之前的6步
  • 具体功能
    • 列表
    • 删除
    • 添加
    • 编辑

03-案例优化-axios的全局使用

  • 案例中导入一次，在所有的vue实例中可以使用，注意vue组件其实是一个特殊的vue实例。
  • 在构造函数的原型中挂载导入后的axios对象 Vue.prototype.http = axios new Vue({ methods:{ getData(){ this.http.get() } } })

04-案例优化-axios的baseURL

05-案例优化-async和await使用

作用 让异步的操作使用同步的写法，让业务逻辑更清晰。

  • async 关键字使用在定义函数前，用于表示该函数是一个异步的函数。 await 关键字使用在任何表达式前，但是通常用来修饰一个返回promise对象的函数，使用后不需要.then()来调用成功的回调，而是返回值就是之前回调的结果
  • 要注意的是：await只能使用在有async修饰的函数中。
  • 配合axios使用，可以让有异步操作的业务，使用同步的写法，让业务逻辑更清晰。

注意：在vue-cli创建的简单项目中，对es6的转换不够完善，导致 async await 使用失败。

  async function getData () {
    // axios.get('http://localhost:3000/heroes')
    //   .then(res => console.log(res.data))
    //   .catch(err => console.log(err.message))
    const res = await axios.get('http://localhost:3000/heroes')
    console.log(res.data)
  }
  getData()

//const res = await axios.get('http://localhost:3000/heroes').catch(err=>({status:500,msg:err.message}))
// .catch(err=>({status:500,msg:err.message})) 如果 直接 return 的结果会当作成功的结果
//console.log(res.status === 500?'失败':'成功')

06-vue基础-动画实现分析

  • vue提供了过渡动画功能，目的是让页面更具互动性，体验更好。
  • 所以：实现的只是一些简单的过渡动画效果，炫酷的动画还是需要另外去实现。
  • 进入动画(v也可以由transition标签name属性决定)
    • v-enter 进入前的添加的类
    • v-enter-active 进入中添加的类
    • v-enter-to 进入后添加的类
  • 离开动画(v也可以由transition标签name属性决定)
    • v-leave 离开前添加的类
    • v-leave-active 离开中添加的类
    • v-leave-to 离开后添加的类

07-vue基础-元素动画

  • 给需要实现动画的元素包裹 transition 标签
  • 然后机会有六个类名来控制 进入 和 离开 的动画
  • 在style中使用这个六个类名来定义不同的样式 .v-enter,.v-leave-to{ transform: translateX(100px); opacity: 0; } .v-enter-active,.v-leave-active{ transition: all 2s }
  • 有可能多个元素需要动画 通过 name属性修改类名 /* */ .second-enter,.second-leave-to{ transform: translateY(100px); opacity: 0; } .second-enter-active,.second-leave-active{ transition: all 2s }

08-vue基础-列表动画

  • 使用 transition-group 标签包裹需要执行动画的列表

  • 执行动画的元素是每一项，进入 离开 实现动画

  • 如果实现动画 动画和元素动画实现是一样的。

    <script src="assets/vue.min.js"></script>
<style>
  li {
    list-style: none;
    background: #eee;
    width: 400px;
    border: 1px dashed #ccc;
    margin: 5px;
  }

  /*实现动画*/
  .v-enter, .v-leave-to {
    transform: translateY(100px);
    opacity: 0;
  }

  .v-enter-active, .v-leave-active {
    transition: all 1s;
    position: absolute;
  }

  /* 在移除元素的过程中  v-move 调用*/
  .v-move {
    transition: all 1s;
  }
</style>
    add
  • {{item.name}}

09-vue基础-生命周期

  • 下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

  • ajax获取数据 在那个钩子函数执行：

  • created （如果想尽快的获取数据） mounted(如果有dom操作时建议写这个位置)

10-git-分支-作用分析

  • 使用分支意味着你可以把你的工作从开发主线上分离开来，以免影响开发主线。
  • 在分支上做开发，调试好了后再合并到主分支。那么每个人开发模块式都不会影响到别人。
  • Master是默认就存在的一个分支，我们叫它主分支。
  • 需求：
    • 提交三次代码
    • 在主分支基础之上创建一个新分支。
    • 然后切换到新的分支，开发一些功能，做一次提交。
    • 再切换到master分支，合并新分支到master分支。
    • 查看现有分支。
    • 然后删除分支。

图解流程：

11-git-分支-命令操作

  • 新建分支 git branch product
  • 切换分支 git checkout product
  • 合并分支 git merge product
  • 查看分支 git branch
  • 删除分支 git branch -d product

12-项目准备-配置本地接口服务器

  • 当资源 pyg_manage_api 的文件
  • 在项目中找到 shop.sql 的脚本
  • 创建一个数据库 数据库的名字 shop
  • 右键数据库，运行sql文件，选中shop.sql文件 ，运行即可
  • 修改配置文件：项目/config/default.json 修改密码
  • 根据接口文档的登录接口 来验证是否启动成功

13-项目准备-vue-cli创建项目

  • 使用vue-cli创建的简单的项目，创建复杂项目 vue init webpack 项目的名称
  • 项目的名 跳过
  • 项目描述 跳过
  • 作者 跳过
  • 选中vue的版本 runtime-only
  • 是否安装路由 y
  • 是否使用eslint来约束代码风格 y
  • 选中代码风格 standard 风格
  • unit n
  • e2e n
  • 选择装包方式 npm
  • 等待....

14-项目准备-使用git管理项目

  • git init
  • git add .
  • git commit -m 'initial project'

15-项目准备-把项目托管到github

git remote add origin git@github.com:zhousg/pyg_admin_69.git
git push -u origin master

16-登录-在login分支开发

  • 在login分支去开登录功能
  • 新建分支 git branch login
  • 切换到登录分支去进行开发 git checkout login

17-登录-项目结构分析&删除无用代码&配置路由和组件

avatar
文章
阅读
粉丝