vue模块代码开发模板

复制
<template>
  <div>{{ test }}</div>
</template>

<script>
// import引入的组件需要注入到对象中才能使用

export default {
  name: 'Index',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: [''],
  data() {
    // 这里存放数据
    return {
      test: '这是一个模板'
    }
  },
  // 监听属性 类似于data概念
  computed: {
  },
  // 监控data中的数据变化
  watch: {
    test: {
      deep: true, // deep: true  // 可以深度检测到 test 对象的属性值的变化
      handler(newV) {
        this.test = newV
      }
    }
  },
  // 生命周期 - 创建完成(可以访问当前this实例)
  created() {},
  // 生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    gettest() {
      // 这是一个触发调用父组件的方法
      // this.$emit('fathervoid', false)
      return this.test
    }
  }
}
</script>

<style lang='scss' scoped>

</style>