vue2.0+
老版本vue构建项目
npm i -g [email protected]
npm i -g vue-cli
npm i -g [email protected]
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属性表示当前组件接收父组件传过来的数据到变量中
接收形式有三种:
- 数组形式
- 对类型校验的对象
- 严格验证的对象
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
前端表单组件验证
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
export default {
mounted(){
console.log(this.$refs.input)
}
}
Vue
是数据驱动DOM,所以一般不直接修改DOM。但是必须用的话也可以。先在某个元素绑定ref
属性,页面渲染后可以获取DOM,this.$refs.input
使用ref
也能操作列表
-
{{item}} // 遍历标签的方法 实在有点难以理解
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多次验证
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中可见
看不见我
vue
中的template
,当template
放在vue实例绑定的元素内部,则可见,但是DOM中又不可见.vue
项目中一般都是这种情况
可以看见我
v-for
中的key
属性
v-for
循环的时候添加:key
是为了提升渲染性能,能尽量复用原来的就复用原来的,:key='id'
设置唯一值,就可以达到只更新新添加的元素,以提高性能。
router-view
这个组件是内置的显示所写内容的组件。通常来说
替换了你所写的组件
图标库font-awesome
的使用
// main.js 中添加
import 'font-awesome/css/font-awesome.min.css'
//
///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
组件直接分页即可