vue学习

@表示在项目src目录开始寻找

import { getPersonTrainRecord } from '@/api/surplus'

router-view

路由 切入点

“导航”表示路由正在发生改变。

<router -link to=""> 触发路由

配置路由映射

routes: [
    { name: 'Home', path: '/', component: () => import('./views/Home') }]
name 随意  path:vue组件配置的路径 component 引入组件 

vue组件中逻辑区域说明

export default {
    //组件定义名字
  name: 'PersonRecordaddup',
    //接收父组件传递的数据对象
  props: {
    visible: { type: Boolean, required: true },
    title: { type: String, default: '' },
    detail: { type: Object, default: () => { return {} } }
  },
    //model
  data() {
    return {
      czylist: [],
      ruleForm: {
        id: null,
        year: '',
        quarter: null,
        department: '',
        czyxm: '',
        czydm: null,
        performance: '',
        level: 554
      },
      //数据校验信息校验
      rules: {
        year: [
          { required: true, message: '请选择年份', trigger: 'change' }
        ],
        quarter: [
          { required: true, message: '请选择季度', trigger: 'change' }
        ],
        department: [
          { required: true, message: '请输入站点', trigger: 'change' }
        ],
        czyxm: [
          { required: true, message: '请输入人员姓名', trigger: 'change' }
        ],
        performance: [
          { required: true, message: '请选择绩效', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    visibleIn: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
        if (!val) {
          this.$emit('close')
        }
      }
    }
  },
    //监听事件
  watch: {
    detail: {
      handler(newVal, oldVal) {
        console.log('detail...')
        console.log('监听传入对象 进行数据回显')
        console.log(newVal)
        if (newVal !== null) {
          this.ruleForm = newVal
        } else {
          console.log('newVal===null')
          this.ruleForm = { }
        }
      }
    }
  },
    //页面加载完毕事件
  mounted() {
    getisAddPerson(this.ruleForm).then(response => {
      if (response) {
        console.log(response.data)
        const the = this
        response.data.forEach(function(val, index) {
          the.czylist.push({ 'value': val.czyxm, 'czydm': val.czydm })
        })
      }
    })
  },
    //方法区
  methods: {
    beforeClose() {
      // 取消按钮 关闭显示 不清空对象内容
      this.$emit('update:visible', false)
      this.$refs['ruleForm'].resetFields()
      // this.ruleForm = {}
    },
    submitForm() {
      const the = this
      this.czylist.forEach(function(val) {
        if (val.value === the.ruleForm.czyxm) {
          the.ruleForm.czydm = val.czydm
        }
      })
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          addUpPerson(this.ruleForm).then(response => {
            if (response) {
              this.$notify({
                message: response.data,
                type: 'success'
              })
              this.$emit('update:visible', false)
              this.ruleForm = {}
              this.$refs['ruleForm'].resetFields()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    querySearch(queryString, cb) {
      const restaurants = this.czylist
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
      console.log(item)
    }

  }
}
</script>

监听属性变化

watch: {
'result.quarter': function(newVal, oldVal) {
    console.log(newVal, oldVal)
}
}

vue页面加载完毕时间

  mounted() {
    // 页面创建完毕加载事件
    this.select()
  },
  methods(方法定义)