vue学习中的问题，以及综合小项目

1、vue知识点的综合使用不能把所学的vue知识点串起来

2、vue项目的创建流程

1vue init webpack 项目名称 -- vue-cli + webpack

2webStorm创建vue项目

A、简洁方式创建基本的vue项目结构

B、带有语法检查、测试模块的项目自带有ESLint模块、vue.config.js文件(vue项目的配置文件--如配置vue2项目的默认端

口号)

3、组件的创建

1组件是一个html、css、js的封装体可以复用。是vue的核心之一。

面试问题组件的data为什么必须是函数

2组件的通信

A、组件之间的关系父子关系(props、$emit)、兄弟关系(mitt、vuex)、跨级关系(vuex、provider/inject)

3组件的插槽扩展组件的功能

4组件的注册通过components进行注册

4、vue-router路由模块

1路由当用户单击某个超链接时将对应组件渲染出来的过程称为路由

2路由配置文件

A、 创建全局的VueRouter对象(路由器)定义路由表跳转路径和组件之间的映射关系、路由模式hash、history

B、路由表是一个数组包含了若干条路由信息

路由信息path路由路径、component路由路径对应的组件、name路由路径的别名、

children配置子路由

特殊的路由路径/项目的根路径

/*表示匹配所有路径通常放在路由路径的末尾如404页面

C、三大组成部分

A、< router-link to="url">超链接组件作用类似a标签

B、< router-view> 路由视图组件渲染的出口

C、VueRouter

3在全局的Vue实例中注册路由器

5、axios模块异步请求模块封装了ajax

1什么是ajax异步的javascript和xml

2同步和异步

3回调函数

4数据封装将服务器端响应的数据统一封装在响应对象的data属性中

5请求对象request--- 简写为req客户端向服务器发起的请求请求头信息、请求数据等都封装在该对象中

在服务器端通过request对象来获取客户端数据时都要使用该对象

6响应对象response--- 简写res通过该对象将服务器端处理后的数据响应给客户端

7axios拦截器

A、请求拦截器对客户端的请求进行过滤

B、响应拦截器对服务器端的响应信息进行拦截简化前端页面对服务器端响应数据的处理

二、示例

1、技术点vue2.6 、 element-ui 、 axios 、 vue-router 、 vuex 、mockjs 、数据可视化Echarts、antv

2、突出vue2技术不写node后台使用mockjs模拟后台数据、后台接口

3、安装相关的技术模块

1安装mockjsnpm i mockjs

2安装element-uinpm i element-ui

3安装axiosnpm i axios

4安装vue-routernpm i vue-router@3

5安装vuexnpm i vuex@3

4、定义mockjs的配置文件生成后台的模拟数据、接口

1 src / mock / mock.js

import Mock from "mockjs"

const Random=Mock.Random

const data=[]

//调用Mock.mock方法生成随机数据
Mock.mock(()=>{
    for (let i =0;i<10;i++ ){
        //利用mockjs的Random随机生成数字并转化为十六进制拼接
        const a="#"+Random.integer(180,255).toString(16)+
            Random.integer(180,255).toString(16)+
            Random.integer(120,220).toString(16)

        let t =null //用来存放Random随机生成的用户名
        let male=["男","女"] // 用来存放性别信息的数组
        data.push({
            "userId":1001+i,
            userName:t=Random.cname(), //随机生成中文名字
            userMale:male[Random.integer(0,1)], //在下标,随机生成0或1就可以随机获取性别
            headImage:Random.image("140x140",a,t),//第一个参数图片的大小第二个参数颜色第三个参数是图片上显示的文本
            userBirthday:Random.datetime('yyyy-MM-dd HH:mm:ss'),//生成随机日期,yyyy格式
            userAddress:Random.county(true) //省市县区随机地址
        })
    }
})
//查询所有-接口 模拟后台接口
Mock.mock("/api/find","get",data)//第一个参数接口地址 。第二个参数请求方式第三个参数响应数据

//在main.js中去导入将mockjs文件在项目中共享项目中的所有组件都可以访问接口

2在项目的main.js中导入mockjs的配置文件将mockjs文件在项目中共享项目中的所有组件都可以访问mockjs提供的数据和接口

import './mock' //默认导入的是mock目录下的index.js文件

如果不是则要写全部地址 import "./mock/mock" //导入mock

1. • 使用axios模块不做全局配置即哪个组件使用axios就在组件中引用即可

6、使用vuex进行全局的数据处理

1创建vuex的配置文件/src/store/index.js

2在项目的main.js文件中注册store对象

import store from "./stroe/index";
new Vue({
  store,
  router,
  render: function (h) { return h(App) },
}).$mount('#app')

7、在组件中使用vuex

8、使用element-ui组件库

1在项目的main.js导入element-ui、导入element-ui的样式文件

import ElementUI from "element-ui" //导入element-ui库
import "element-ui/lib/theme-chalk/index.css" //导入element-ui的样式文件
Vue.use(ElementUI)

2el-table的基本用法

A、给el-table的data属性绑定变量该变量是一个数组或集合即在表格中展示的数据

B、el-table的事件

a、select当用户手动勾选数据行的 Checkbox 时触发的事件默认参数是selection, row

参数selection是用户选择的数据是数组类型即用户选择了几行selection数组就有几个单元

参数row用户选择的当前行

b、select-all当用户手动勾选全选的 Checkbox 时触发的事件默认参数是selection

参数selection是一个数组存放的全选的所有数据

c、selection-change当选择项发生变化时会触发该事件默认参数是selection