05

时间 2019-11-16

原文原文链接

VUE基础-第五天css

01-反馈html

姓名意见或建议
*** 钢哥啥事渐进式框架
*** 刚哥~~你写的函数里面的形参通常都是有语义化的,有些分不清楚哪些是形参,哪些是固定写法必需要这样写.前端

vue能够看成一个库使用，可使用vue全家桶（vue-router,axios,element-ui,vuex）进行开发。
申明函数的时候使用的形参 function per(age){}
调用函数的时候使用的实参 per(10) var age = 10; per(age)
new Vue({router}) 若是是配置选项固定。

02-回顾vue

单页面应用
- 俗语：在一个页面上开发一套完整的网站功能
- 流畅组件化，首屏慢难度大不利于SEO
- 实现路由功能：url标识符对应不一样的组件
- 实现路由原理：经过hashchange监听url标识符改变，显示不一样的内容。
- 代码分离：工做目录，页面没有后台代码
- 项目分离：前端项目一个服务器后端接口服务一个服务器
vue-router
- 基于vue的路由插件
- 步骤：
  - 使用 router-link 连接
  - 使用 router-view 指定组件渲染的位置
  - 准备组件选项对象｛template:''｝
  - 定义路由规则 routes = [//定义规则]
  - 实例 const router = VueRouter({routes }) 对象
  - 挂载路由 new Vue({router})
- to
- 动态路由
- 重定向
- 编程式导航 router 调api $route.params|query
- 激活样式&tag
git基本操做
- 工做区暂存区本地仓库
- git init
- git status
- git add .
- git checkout index.html
- git commit -m 'xxx'
- git reset --hard 版本号
- git log
- 远程仓库 github
- git push 仓库地址 master
- git pull 仓库地址 master
- git clone 仓库地址 [项目名字]

03-vue-cli-介绍webpack

vue-cli vue项目的脚手架（辅助开发项目，提早建立好项目须要的一些配置文件，项目的目录）
文档：cli.vuejs.org/zh/
vue-cli 是一个命令行工具安装在全局

04-vue-cli-安装ios

安装命令 npm i -g @vue/cligit
默认安装最新版本，你安装的将是 3.0 版本，使用的是3.0版本的命令github
可是企业中还有使用2.0版本的项目，2.0版本的命令和3.0版本是不同web
当你使用3.0时你有可能须要使用2.0的命令，须要安装过渡工具 npm install -g @vue/cli-initvue-router

安装慢的问题

建议使用 cnpm 安装

npm i -g cnpm

安装 vue-cli

cnpm i -g @vue/cli cnpm i -g @vue/cli-init

安装一直失败

卸载

npm un -g @vue/cli

清除缓存

npm-cache 文件目录 C:/users/本身使用的用户/appData/roaming/npm-cache

05-vue-cli-建立项目

建立项目：执行命令 vue init webpack-simple 项目的名字

06-vue-cli-目录解释

07-vue-cli-生成代码-render

render 渲染的意思
也是vue的选项
el 指定视图
template 指定视图内容
render 函数渲染组件

new Vue({ el: '#app', render: h => h(App) }) // render: function (createElements) { // // createElements 建立元素构建页面结构 // // 参数组件选项 // return createElements(App) // },
使用render渲染函数渲染App组件
即便在el中书写了内容最终render替换使用的App的组件（根组件）

08-vue-cli-生成代码-ES6模块化

commonJS规范
- 导入 require()
- 导出 module.exports
ES6模块化
- 导入 import 名称 from '包名|js文件路径'
- 导入 import './index.css'
- 导出 export default {}

09-vue-cli-后缀.vue文件使用

在vue-cli构建的项目中 .vue 文件（html,js,css）就是组件配置对象
{ template:'',js代码... }这种写法全部的资源在对象中耦合在一块儿，很差维护
template 写html
script 写js 导出组件配置对象
style 写样式

使用步骤：

定义一个helloword.vue的文件

<template>
  <div class="red">hello world {{msg}}</div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg:'!!!!'
      }
    }
  }
</script>
<style>
  .red{
    color: red;
  }
</style>
复制代码

注意：导出的时候导出的是一个组件的配置对象

导入 import hw from './helloworld.vue'
若是想看成使用组件使用根据这个配置对象注册一个组件
components:{hw}
视图中看成自定义元素使用

10-案例heroes-布局分析

页面都是组件化的
- 导航组件
- 侧边栏组件
- 英雄列表组件
- 英雄添加组件
- 英雄编辑组件
- 技能列表组件
- 装备列表组件

11-案例heroes-导入依赖资源

安装 bootstrap cnpm i bootstrap@3.3.7
导入 main.js import '路径'
运行的时候发现错误：字体文件没法编译
修改配置文件：webpack.config.js

rules选项再加一个配置

{
  test: /\.(ttf|woff2|woff|eot)$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]?[hash]'
  }
}
复制代码

12-案例heroes-提取导航组件

AppNav.vue 在 components
导入 App.vue 到 import appNav from './components/AppNav.vue'
App.vue的选中注册组件 components:{appNav}
使用

13-案例heroes-提取侧边栏组件

同上

14-案例heroes-实现路由功能

<!--AppSlider.vue-->
<div class="list-group">
    <router-link to="/heroes" class="list-group-item">英雄列表</router-link>
    <router-link to="/equip" class="list-group-item">装备列表</router-link>
    <router-link to="/skill" class="list-group-item">技能列表</router-link>
  </div>

<!--App.vue-->
<div class="col-md-10">
      <!--显示组件的位置-->
      <router-view></router-view>
    </div>
复制代码

定义了三个vue文件三个配置对象

// main.js
import Heroes from './components/Heroes'
import Equip from './components/Equip'
import Skill from './components/Skill'
复制代码

路由规则

//定义路由规则
const routes = [
  {path:'/heroes',component:Heroes},
  {path:'/equip',component:Equip},
  {path:'/skill',component:Skill}
]
复制代码

实例化路由对象

//实例化路由对象  依赖vue-router
// npm i vue-router
// 导入
import VueRouter from 'vue-router'
// npm 安装的 路由须要注册在 Vue对象中
Vue.use(VueRouter)
// 使用
const router = new VueRouter({routes})
复制代码

挂载

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
复制代码

15-案例heroes-提取路由模块

新建router.js

// 封装路由导出给main.js使用
import Vue from 'vue'
import Heroes from './components/Heroes'
import Equip from './components/Equip'
import Skill from './components/Skill'
//定义路由规则
const routes = [
  {path:'/heroes',component:Heroes},
  {path:'/equip',component:Equip},
  {path:'/skill',component:Skill}
]
//实例化路由对象  依赖vue-router
// npm i vue-router
// 导入
import VueRouter from 'vue-router'
// npm 安装的 路由须要注册在 Vue对象中
Vue.use(VueRouter)
// 实例化
const router = new VueRouter({routes})

export default router
复制代码

在main.js使用

import router from './router'
复制代码

16-案例heroes-激活路由样式

<style scoped>
  /* scoped 让样式在只该组件下生效 */
  /* AppSlider文件 加强优先级 */
  a.list-group-item.router-link-exact-active,
  a.list-group-item.router-link-active{
  /*选中样式  在active类里面*/
  z-index: 2;
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
</style>
复制代码

17-案例heroes-启动接口服务

使用json-server来快速启动接口服务
在某个目录下 db.json文件
内容：

{ "heroes":[ {"id":100,"name":"亚索","gender":"男","ctime":"2019-04-17 15:00:00"} ] }
启动服务 json-server --watch db.json

18-案例heroes-构建列表组件

<div class="wrapper">
    <a href="heroes-form.html" class="btn btn-primary">添加英雄</a>
    <hr>
    <table class="table table-hover">
      <thead>
      <tr>
        <th>ID</th>
        <th>英雄名称</th>
        <th>英雄性别</th>
        <th>建立时间</th>
        <th>操做</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>101</td>
        <td>亚索</td>
        <td>男</td>
        <td>2019-02-10 10:50:12</td>
        <td>
          <button class="btn btn-success">编辑</button>
          <button class="btn btn-danger">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
复制代码

19-案例heroes-渲染列表

// 使用axios
  // 安装 npm i axios
  // 导入
  import axios from 'axios'

  export default {
    name: 'Heroes',
    data () {
      return {
        list:[]
      }
    },
    methods: {
      getData () {
        // 获取英雄列表的数据
        axios.get('http://localhost:3000/heroes')
          .then(res => {
            this.list = res.data
          }).catch(err => alert('获取英雄数据失败'))
      }
    },
    // 视图渲染完毕
    mounted () {
      this.getData()
    }
  }
复制代码

20-案例heroes-删除功能

del (id) {
    // 思路： 须要确认框
    // 1. 获取id
    // 2. 发删除请求
    // 3. 若是成功  获取后台最新的列表数据 更新list 更新视图
    // 4. 若是失败 提示
    if(confirm('老铁，确认删除吗')){
        axios.delete('http://localhost:3000/heroes/' + id)
            .then(res => {
            this.getData()
        }).catch(err => alert('删除失败'))
    }
}
复制代码

21-案例heroes-构建添加组件

添加按钮改为了 router-link
新建了一个HeroesAdd.vue
在router.js导入了这个组件
在路由规则配置映射 {path:'/heroes/add',component:HeroesAdd}

22-案例heroes-绑定表单

申明 data -> form:{name:'',gender:''}
在表单中： <form @submit.prevent="add()"> 添加英雄
英雄名称

英雄性别

23-案例heroes-添加功能

须要在 this.form添加一个建立时间的属性
正常的去发送 post 请求
成功的时候切换到列表组件
编程式导航 this.$router.push('/heroes')

// 3. 发送请求 axsio.post('url',数据对象) this.form.ctime = new Date() axios.post('http://localhost:3000/heroes',this.form) .then(res=>{ // 4. 添加成功的时候展现最新的列表 // 改变 url 标识符列表路由的url地址渲染对应的列表组件获取最新的属性新的列表 this.$router.push('/heroes') }).catch(err=>alert('添加失败'))

24-案例heroes-构建编辑组件

新建文件 HeroesEdit.vue 使用的内容和添加的表单是一致
在列表组件中的编辑按钮绑定了点击事件指定函数 toEdit()
在 toEdit 使用编程式导航进行了url的跳转

25-案例heroes-编辑的动态路由配置

在点击跳转的事件：

toEdit (id) {
  // 加参数  路径参数   /heroes/edit/100
  this.$router.push({name: 'heroesEdit', params: {id}})
}
复制代码

在路由规则中加名字,修改为动态路由规则

{path:'/heroes/edit/:id',name:'heroesEdit',component:HeroesEdit},
复制代码

26-案例heroes-默认展现英雄数据

在组件渲染后 mounted函数中获取当前id对应的英雄数据

methods:{
      getData(){
        // 根据ID获取英雄数据
        const id = this.$route.params.id
        // 发请求
        axios.get('http://localhost:3000/heroes/'+id)
          .then(res=>{
            // 获取数据成功 res.data 就是单个英雄数据
            // 对象中包含 name gender  id ctime
            this.form = res.data
          }).catch(err=>alert('获取英雄数据失败'))
      }
    },
    mounted(){
      this.getData()
    }
复制代码

视图中修改

<form action="" method="post" role="form">
  <legend>编辑英雄</legend>
  <div class="form-group">
    <label>英雄名称</label>
    <input type="text" class="form-control" v-model="form.name">
  </div>
  <div class="form-group">
    <label>英雄性别</label>
    <input type="text" class="form-control" v-model="form.gender">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
复制代码

27-案例heroes-编辑功能

edit () {
     // 修改英雄须要哪些数据
     this.form.ctime = new Date()
     axios.put('http://localhost:3000/heroes/' + this.form.id, this.form)
         .then(res => {
         //修改为功 跳到列表组件
         this.$router.push('/heroes')
     }).catch(err => alert('修改失败'))
 }
复制代码

05

安装慢的问题

建议使用 cnpm 安装

安装 vue-cli

安装一直失败

卸载

清除缓存

npm-cache 文件目录 C:/users/本身使用的用户/appData/roaming/npm-cache