关于javascript:Vue20ElementUIEcharts

vue2.0+

老版本vue构建我的项目

npm i -g vue@2.9.6
npm i -g vue-cli
npm 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() // 跳转到指定url
this.$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.js
import 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.js
import 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组件间接分页即可