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
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这个组件是一个内置组件,用来展示写好的内容。一般来说,