当前位置: 首页 > Web前端 > vue.js

vue2.0+ElementUI+Echarts

时间:2023-04-01 13:05:04 vue.js

vue2.0+老版本vue构建项目npmi-gvue@2.9.6npmi-gvue-clinpmi-gwebpack@3.6.0vue-cli版本项目4.5以上属于vue3,版本在4.5以下属于vue2建设项目vueinitwebpacktoimportElementUI在main.js文件中,需要添加如下语句importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)//安装插件并使用axios在main.js文件中添加importaxiosfrom'axios'Vue.poptotype.axios=axios//挂载到原型上,全局使用this.axios。get('url',{header:{},params:{}}).then(resp=>{}).catch(err=>{})props属性props属性表示当前组件接收传递过来的数据从父组件接收变量有3种方式:数组形式,严格校验类型检查的对象exportdefault{name:"当前组件名",component:{Header,Footer//当前组件使用的其他子组件}data(){return{obj1:{//数据源1},obj2:{//数据源2}}}props:['data1','data2']//方法1data1data2为对象props:{//方法二类型校验data1:Number,data2:String}props:{//方法三严格验证data1:{type:Number,required:true,default:'',validator(value){return(value.length>5)}}}}脚本中的数据为主要是Source两个方面,数据和props前端表单组件校验exportdefault{data(){return{rules:{SubscriptionID:[{},//如果每个el-form-item有多个验证规则,用数组来包含。如果只有一组,则不需要数组{}],resourceGroupID:{},InstanceName:[{required:true,message:"实例名不能为空",trigger:'blur'},{min:4,max:8,message:"实例名在4-8个字符之间",trigger:'blur'},{//你也可以写一个正则表达式来验证模式:/^(?!mysql$)(?!test$)(?!sys$)(?!sysdb$)(?!performance_schema$)(?!actionmonitor$)(?!information_schema$)(?!zabbix_schema$)/,message:'cannotbesystemlibraryname',trigger:'blur',},]}}}}有几种操作DOM的方法NativeJSletinput=document.getElementByClassName('input')console.log(input)JQueryletinput=$('input')console.log(input)Vueexportdefault{mounted(){console.log(this.$refs.input)}}Vue是一个数据驱动的DOM,所以一般不需要直接修改DOM,但是如果需要的话可以使用。先给一个元素绑定ref属性,页面渲染完成后就可以拿到DOM了。this.$refs.input也可以使用ref

    {{item}}//遍历标签的方法有点难懂
exportdefault{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['attheendofvalidationlist'].validate((valid)=>{if(valid){console.log("validationpassed")}else{console.err("validationfailed")}})elementui中的prop和rulesform表单提供组件校验,prop属性设置需要校验的字段名;rules属性传入验证规则//一条规则多次验证是在DOM中可见
我看不到我
vue中的模板,当模板放在绑定vue实例的元素内部时,是可见的,但在vue中是不可见的的DOM。vue项目中一般都是这样
v-for中的key属性是在v-forloops:keyistoproviderenderingperformance如果能尽量复用原件,可以复用原件,:key='id'设置唯一值,只能更新新加入的元素提高性能router-view这个组件是一个内置组件,用来展示写好的内容。一般来说,代替了font-awesome的使用,你写的组件图标库//addimport'font-awesome/css/font-awesome.min.css'inmain.js/////i标签在国内常用作图标。关闭config文件夹下的ESlint语法检测index.js。设置useEslint=falseCookie,LocalStorage,Storage比较后端请求的数据可以存放在以上三个地方。LocalStorage可以不定义直接使用。localStorage.setItem("用户名",用户名);localStorage.getItem("用户名");axios的封装//newservice.jsimportaxiosfrom'axios'constservice=axios.create({baseURL:"https://rap2api.taobao.org/app/mock/303779",timeout:3000//指定请求timeoutinmillisecondsheader:{'Content-type':'application/json';charset=utf-8}})//添加请求和响应拦截器service.interceptors.request(function(succ){returnsucc},function(err){returnerr})service.interceptors.response(function(succ){returnsucc},function(err){returnerr})exportdefaultservice//mountedinmain.jsimportservicefrom'./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组件直接分页