vue2.0+

老版本vue构建我的项目

npm i -g vue@2.9.6npm i -g vue-clinpm i -g webpack@3.6.0

vue-cli的版本我的项目是4.5以上属于vue3，版本是4.5以下属于vue2

构建我的项目
vue init webpack <新建我的项目名>
引入ElementUI

在main.js文件中须要增加上面语句

import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI) // 装置插件
应用axios

在main.js文件中增加

import axios from 'axios'Vue.poptotype.axios = axios // 挂载到原型 能够全局应用
this.axios.get('url',{    header:{            },    params:{            }})  .then(resp =>{})  .catch(err =>{})
props属性

props属性示意以后组件接管父组件传过来的数据到变量中

接管模式有三种:

  1. 数组模式
  2. 对类型校验的对象
  3. 严格验证的对象
export default {    name:"以后组件名",    component:{        Header,        Footer // 以后组件应用到的别的子组件    }    data(){        return{            obj1:{                // 数据源1            }，            obj2:{                // 数据源2        }        }    }    props:['data1','data2'] // 形式1 data1 data2是对象    props:{                    // 形式2 类型校验        data1:Number,        data2:String    }    props:{                    // 形式3 严格校验        data1:{            type:Number,            required:true,            default:'',            validator(value){                return (value.length > 5)            }        }    }}

script外面的数据次要起源两个方面,data和props

前端表单组件验证
<el-form :rules="rules">    <el-form-item prop="SubscriptionID">    </el-form>    <el-form-item prop="resourceGroupID">    </el-form>    <el-form-item prop="InstanceName">    </el-form></el-form>    export default {    data(){        return {            rules:{                SubscriptionID:[{}, //每一个el-form-item有多个校验规定的话应用数组蕴含，只有一组的话不须要数组                                {}                               ],                resourceGroupID:{                                    },                InstanceName:[                    {                        required:true,                        message:"实例名不能为空",                        trigger:'blur'                    },                    {                        min:4,                        max:8,                        message:"实例名在4-8个字符",                        trigger:'blur'                    },                    {   // 也能够写正则表达式来验证                        pattern: /^(?!mysql$)(?!test$)(?!sys$)(?!sysdb$)(?!performance_schema$)(?!actionmonitor$)(?!information_schema$)(?!zabbix_schema$)/,                        message: '不能为零碎库名',                        trigger: 'blur',                      },                ]                            }        }    }}
操作DOM

操作DOM有这么几种办法

  • 原生JS
let input = document.getElementByClassName('input')console.log(input)
  • JQuery
let input = $('input')console.log(input)
  • Vue
<input type='text' value='123' ref='input'>export default {    mounted(){        console.log(this.$refs.input)    }}

Vue是数据驱动DOM，所以个别不间接批改DOM。然而必须用的话也能够。先在某个元素绑定ref属性,页面渲染后能够获取DOM,this.$refs.input

应用ref也能操作列表

<ul>    <li v-for="(item,index) in list" :key="index" ref="list">        {{item}}  // 遍历标签的办法 切实有点难以了解    </li></ul>export default {    data(){        return{            list:[1,2,3,4,5,6];        }    }    mounted(){        console.log();        this.$refs.list.forEach((v) => {            v.style.color = '#' + Math.floor(Math.random() * 1000);        }        )    }}
this.$refs['list'].validate()的表单验证

validate的参数是一个回调函数，此回调函数在验证完结时被调用

this.$refs['list'].validate((valid)=>{    if(valid){        console.log("校验通过")    }else{        console.err("校验未通过")    }})
elementui中的prop和rules

form表单提供组件验证,prop属性设置须要校验的字段名;rules属性传入验证规定

// 一次rules屡次验证<el-form :rules="rules">    <el-form-item prop="name"></el-form-item>    <el-form-item prop="id"></el-form-item></el-form>export default {    rules:{        name:{            required:true,            message:"名称不能为空",            trigger:'change'        },        id:{            requied:true,            message:'id不能为空',            trigger:'blur'        }    }}

代码案例

this.$router的应用
this.$router.push('/') // 跳转到指定url  最罕用this.$router.replace() // 跳转到指定urlthis.$router.go(n) // 向前或者向后跳转n哥页面，n能够是正数this.$router.options.routes // 拿到初始化的路由信息
template

template标签天生不可见，DOM中可见

<template>    <div>看不见我</div></template>

vue中的template，当template放在vue实例绑定的元素外部，则可见，然而DOM中又不可见.vue我的项目中个别都是这种状况

<div id = 'app'>    <template>        <div>能够看见我</div>    </template></div>
v-for中的key属性

v-for循环的时候增加:key是为了晋升渲染性能，能尽量复用原来的就复用原来的，:key='id' 设置惟一值，就能够达到只更新新增加的元素，以进步性能。

router-view

这个组件是内置的显示所写内容的组件。通常来说<router-view>替换了你所写的组件

图标库font-awesome的应用
// main.js 中增加import 'font-awesome/css/font-awesome.min.css'// <i class="fa fa-user"></i>  ///i标签国内常常用作图标
敞开ESlint语法检测

config文件夹中的index.js设置useEslint=false

Cookie、LocalStorage、Storage的比照

后端申请过去的数据能够存储在下面三个中央

LocalStorage不必定义能够间接应用

localStorage.setItem("username",username);localStorage.getItem("username");
对axios的封装
// 新建service.jsimport axios from 'axios'const service = axios.create({    baseURL:"https://rap2api.taobao.org/app/mock/303779",    timeout:3000 // 指定申请超时毫秒数    header:{        'Content-type':'application/json';charset=utf-8}})// 增加申请和响应拦截器service.interceptors.request(function(succ){return succ},function(err){return err})service.interceptors.response(function(succ){return succ},function(err){return err})export default service// 挂载在main.jsimport service from './service'Vue.prototype.service = service
跨域问题解决

协定、端口、域名不统一都属于跨域问题。跨域问题十分常见

前端跨域问题解决:设置代理。后端也能解决跨域问题

// 在config文件夹中的index.js 的proxyTable中改proxyTable:{    '/api':{        target:'https://demo.crudapi/cn/api/business',        changeOrigin:true,        pathRewrite:{            '^/api':''        }    }}// service中批改 service是axios的封装baseURL:"/api"auth:{    username:"jianan",    password:"jianan0815"}
前端分页

应用element-ui组件间接分页即可