vue2.0+老版本vue构建项目npm i -g vue@2.9.6npm i -g vue-clinpm i -g webpack@3.6.0vue-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属性表示当前组件接收父组件传过来的数据到变量中接收形式有三种:数组形式对类型校验的对象严格验证的对象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有这么几种方法原生JSlet input = document.getElementByClassName('input')console.log(input)JQuerylet 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和rulesform表单提供组件验证,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 // 拿到初始化的路由信息templatetemplate标签天生不可见，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=falseCookie、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组件直接分页即可
