共计 4037 个字符，预计需要花费 11 分钟才能阅读完成。
vue2.0+
老版本 vue 构建我的项目
npm i -g vue@2.9.6
npm i -g vue-cli
npm 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 有这么几种办法
- 原生
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 组件间接分页即可
正文完