Vue基本用法
1、Vue结构
javascript
复制代码
<template>
</template>
<script>
import component from '@/xxx' // 引用组件，组件名称随意，跟原vue文件名不相关，随意命名
import method from './yyy' // 引用JS方法包，方法包名称随意，跟原JS方法名不相关，随意命名
export default {
name: 'xxx', // 组件名
components: { component }, // 引用的组件
mixins: [method()], // 引用的方法
props: { // 暴露给父组件的属性
prop1: { type: String, required: true }, // 属性1，约定了属性的类型、默认值、必要性
prop2: { type: Number, default: 123 } // 属性2
},
data() { // 仅用于组件内部的变量
return {
attr1: null, // 变量1
attr2: null, // 变量2
rules: { // 表单属性校验
attr1: [
{ required: true, message: 'xxx', trigger: 'blur' }
],
attr3: [
{ required: true, message: 'xxx', trigger: 'change' }
]
}
}
},
methods: { // 自定义方法，大致有2类，一种是事件响应，另一种是逻辑处理
method1() {
// 方法1
},
method2() {
// 方法2
}
},
beforeCreate() { // 组件生命周期方法，beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
// 创建前
},
created() {
// 已创建，数据初始化已完成，但未挂载到DOM
},
beforeMount() {
// 挂载前
},
mounted() {
// 已挂载，已渲染完成，有具体的位置和大小等
},
beforeUpdate() {
// 更新前
},
updated() {
// 已更新
},
computed: { // 计算属性
attr1: {
get() {
return this.attr1
},
set(val) {
this.attr1 = val
}
},
attr3() {
return 'xxx'
}
},
watch: { // 监控变量变化
attr1(value) { // 被监控变量的名称
},
'attr2': function(val, oldVal) {
}
},
beforeDestroy() {
// 销毁前
},
destroyed() {
// 已销毁
}
}
</script>
<style scoped>
</style>
2、标签属性
javascript
复制代码
<template>
<el-input value="123"/> <!-- 原生属性 -->
<el-input>{{ attr }}</el-input> <!-- 字符串模板 -->
<el-input v-model="attr"/> <!-- 绑定变量 -->
<el-input :value="method()"/> <!-- @是v-bind的缩写，表示数据绑定，支持单值、多值、样式等 -->
<el-button @click="onclick"/> <!-- @是v-on的缩写，表示事件回调或方法调用 -->
</template>
<script>
export default {
data() {
return {
attr: 456
}
},
methods: {
method() {
return 789
},
onclick() {
}
}
}
</script>
<style scoped>
</style>
3、组件保活
javascript
复制代码
<template>
<keep-alive>
<el-input v-model="value"/> <!-- 必须用keep-alive包裹 -->
</keep-alive>
</template>
<script>
export default {
data() {
return {
value: null
}
},
activated() { // 生命周期函数（方法）
// 耗时请求或巨量数据清空不需要重复获取的变量
this.value = 123
}
}
</script>
<style scoped>
</style>
4、导入导出
javascript
复制代码
// yyy.js 和 zzz.js
export function method1() {} // 单个方法导出
export function method2() {}
export default { method1, method2 } // 多个方法组合导出
javascript
复制代码
<template>
<Component /> // 引用的组件
</template>
<script>
import Component from '@/xxx' // 导入其他组件，组件名称随意，但要与components声明一致
import yyyMethods from './yyy' // 导入其他JS文件，名称随意
import { method1, method2 } from '@/zzz' // 导入其他JS方法，并自动拆包
// 引用路径，@/xxx 是相对于项目根路径的表示方式，项目根路径一般为 /src
// 引用路径，./xxx 是相对于当前文件所在文件夹的路径的表示方式
export default {
components: { Component }, // 引用的组件
methods: {
method() {
yyyMethods.method1() // 方法调用方式1
method2() // 方法调用方式2
}
}
}
</script>
<style scoped>
</style>
5、表单校验
javascript
复制代码
<template>
<el-form ref="form" :rules="rules"> <!-- 表单名和规则名随意 -->
<el-row>
<el-col>
<el-form-item label="变量1" prop="prop1"> <!-- 表单属性名随意 -->
<el-input v-model="attr1"/> <!-- 这是组件变量，与表单中声明的属性没有直接关系，可以同名也可以不同名 -->
</el-form-item>
<el-form-item label="变量2" prop="prop2">
<el-input v-model="attr2"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-button @click="onclick">点我</el-button>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
attr1: null, // 变量1
attr2: null, // 变量2
rules: { // 表单属性校验，名称随意
prop1: [
{ required: true, message: '必填提示', trigger: 'blur' }, // 默认必填校验方法
{ max: 90, message: '长度不能超过90', trigger: 'change' } // 默认限长校验方法
],
prop2: [
{
required: true,
validator: (rule, value, callback) => { // 自定义校验方法
if (!value) {
callback(new Error('必填提示'))
}
callback() // 校验通过
}
}
]
}
}
},
methods: {
onclick() {
// 也可以 this.$refs.form.validate()
this.$refs['form'].validate((valid) => {
if (valid) { // 通过-true 不通过-false
// 校验通过的处理
}
})
}
}
}
</script>
<style scoped>
</style>
6、接口方法
javascript
复制代码
// request.js
import axios from 'axios'
import { Notification } from 'element-ui'
import qs from 'qs'
// 后端服务提供的接口基地址
const service = axios.create({ baseURL: 'http://192.168.1.1:8080', timeout: 30 * 1000 })
// 接口请求主方法
function request(config) {
if (config.method === 'get' && config.data) {
config.url = config.url + '?' + qs.stringify(config.data, { indices: false })
}
return service(config)
}
// 前置拦截器，补充接口Token
service.interceptors.request.use(
config => {
config.headers['Authorization'] = 'Bearer xxx'
config.headers['Content-Type'] = 'application/json'
return config
},
error => {
Promise.reject(error)
}
)
// 后置处理器，默认的错误处理
service.interceptors.response.use(
response => {
if (200 !== response['code']) {
Notification.error({ title: response.message })
return Promise.reject(response.message)
}
},
error => {
Notification.error({ title: '接口请求失败', duration: 5000 })
return Promise.reject(error)
}
)
export default request
javascript
复制代码
// xxx.js
import request from '@/request'
export function method1(data) {
return request({
url: 'system/method1',
method: 'get', // 增-post 删-delete 改-update 查-get
data
})
}
export function method2(params) {
return request({
url: 'system/method2',
method: 'post',
params
// 数组入参在data表现为 /url?xxx=v1&xxx=v2
// params表现为 /url?xxx[]=v1&xxx[]=v2
})
}
export function method3() { // 一般不用这个方法
return request({
url: 'system/method3',
method: 'update'
}).then(res => {
// 处理响应
}).catch(err => {
// 处理异常错
})
}
export default { method1, method2, method3 }
javascript
复制代码
<template>
<div @click="onclick"/>
</template>
<script>
import { method1, method2 } from './xxx'
export default {
mixins: [method1(), method2()], // 引用其他JS方法
data() {
return {}
},
methods: {
onclick() {
method2().then((res) => {
// 处理方法
})
}
}
}
</script>
<style scoped>
</style>
7、钩子函数
javascript
复制代码
<template>
<p ref="useDom">段落内容</p> <!-- 钩子关键词ref或hook，名称随意，一般以useXxx命名，同钩子获取原生DOM -->
<el-button @click="getDom"/>
<el-button @click="setDom"/>
</template>
<script>
export default {
methods: {
getDom() {
console.log(this.$refs.useDom)
// <p>段落内容</p>
},
setDom() {
this.$refs.useDom.innerText = '新的段落内容'
}
}
}
</script>
<style scoped>
</style>
8、CRUD
javascript
复制代码