Vue基本用法

Vue基本用法

1、Vue结构

<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、标签属性

<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、组件保活

<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、导入导出

// yyy.js 和 zzz.js
export function method1() {} // 单个方法导出
export function method2() {}

export default { method1, method2 } // 多个方法组合导出

<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、表单校验

<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、接口方法

// 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

// 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 }

<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、钩子函数

<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