WebStorm创建文件模板---vue模板（tab补全）

一、操作图示

二、vue模板代码

以下是我的vue模板(后续可能会补充注释)

<template>
  <div>
    <div>{{ sum }}</div>
  </div>
</template>

<script>

export default {
  components: {},  //主要作用为动态渲染组件
  props: [], //用于接收来自父组件的数据
  data() { //返回组件实例的data对象的函数
    return {
      example: '',
      sum: '0',
    };
  },
  computed: {
  }, // 用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,进行处理后返回一个结果值
  watch: {
    example(newVal, oldVal){
      this.example = newVal
      this.example = oldVal
    }
  }, //一个对象，键是需要观察的表达式，值是对应回调函数，值也可以是方法名，或者包含选项的对象。
  methods: {},
  beforeCreate() {
    console.log('beforeCreate',1)
  },

  created() {
    this.sum = this.$route.query.sum
    console.log('create',2)
  },

  beforeMount() {
    console.log('beforeMount',3)
  },

  mounted() {
    console.log('mounted',4)
  },

  beforeUpdate() {
    console.log('beforeUpdate',5)
  },

  updated() {
    console.log('updated',6)
  },

  beforeDestroy() {
    console.log('beforeDestroy',7)
  },

  destroyed() {
    console.log('destroyed',8)
  },

}


</script>

<style scoped>

</style>