Vue 代码模板，用户片段（常用型和完整型）

简单型：

{
  "Print to console": {
      "prefix": "vue",
      "body": [
          "<template>",
          " <div>\n",
          " </div>",
          "</template>\n",
          "<script>",
          " export default {",
          "   components: {",
          "   },",
          "   data () {",
          "     return {\n",
          "     }",
          "   },",
          "   mounted() {",
          "   },",
          "   methods: {",
          "   },",
          " }",
          "</script>\n",
          "<style scoped lang='scss'>\n",
          "</style>"
      ],
}
}

用户片段常用型：

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            " <div>\n",
            " </div>",
            "</template>\n",
            "<script>",
            " export default {",
            "   name: '',",
            "   props: {",
            "   },",
            "   components: {\n",
            "   },",
            "   data () {",
            "     return {\n",
            "     }",
            "   },",
            "   methods: {\n",
            "   },",
            "   mounted() {\n",
            "   },",
            "   watch: {\n",
            "   },",
            "   computed: {\n",
            "   },",
            "   filters: {\n",
            "   }",
            " }",
            "</script>\n",
            "<style scoped lang='scss'>\n",
            "</style>"
        ],
	}
}

用户片段完整型：

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div class=''></div>",
            "</template>",
            "<script>",
            "export default {",
            "  name: '',",
            "  props: {},",
            "  components: {},",
            "  data() {",
            "    return {};",
            "  },",
            "  computed: {},",
            "  watch: {},",
            "  methods: {},",
            "  created() {},",
            "  mounted() {},",
            "  beforeDestroy() {}",
            "};",
            "</script>",
            "<style lang='scss' scoped>",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

说明：
name：组件名字
props：组件接收父组件传值
components：使用子组件时，注册子组件。
data：所有全局属性存放的位置。双向绑定的数据。
computed：计算属性，其中放函数，每一个函数都有返回值，使用计算属性时，只需要使用函数名字即可，不写括号。
watch：监听器。监听属性值的变化。
methods：函数存放的位置，可以是事件触发的函数，也可以是被其他函数调用的函数。methods之中的函数可以相互调用，不过要加this。

完整型剩余没写的以下：

八个生命周期：

1、beforeCreate: 创建Vue实例之前（只有默认的一些生命周期和默认的一些事件，data和methods还没有被初始化）

2、Create: 数据已经在data方法中初始化了，计算属性，事件回调都已经完成，只不过dom并未挂载
挂载之前回进行得操作会找是否有需要挂载得el对象，有的话判断是否有template模板，有得话那么将模板转化为render函数，通过render函数去渲染DOM树
如果都没有得话，直接把最外层得el对象作为html得模板（data和methods已经被初始化了，最早可以调用到方法和数据的地方就是created）

3、beforeMount:render方法首次被调用生成虚拟DOM（在内存中已经渲染好了模板但并未挂载到页面中此时的页面还是旧页面）

4、mounted:挂载已经完成了，dom树已经完成渲染到页面中得，所以在这时我们可以对真实dom进行操作了（把内存中的模板替换到网页上，此时已经生成真实的dom了）

5、beforeUpdate:数据有更新，更新之前调用（data数据已经更新为最新的数据，页面的数据还是旧的）

6、updated：数据更新之后（页面数据和data数据均被更新）

7、beforeDestroy：实例销毁前（进入销毁阶段，此时所有的data和methods还未被销毁，处于可用状态）

8、destroyed：组件销毁之后（销毁完成，所有的数据，方法，指令、过滤器都被销毁，不可使用了）