Visual Studio Code 生成Vue模板，vscode生成vue模板

Visual Studio Code 生成Vue模板

1、文件->首选项->用户片段

2、新建全局代码片段文件，在输入的框中输入vue（vue是快捷键也可以输入其它的，如aaa），然后回车

3、在新建的文件中输入如下代码

{
     
      
	"Print to console": {
     
		"prefix": "vue",
		"body": [
			"",
			"",
			"",
			""
		],
		"description": "A vue file template"
	}
}

4、新建一个vue文件，在文件中输入vue(你设定的快捷键，如aaa)然后回车

5、输入快捷键后的代码

6、vue常用方法

https://cn.vuejs.org/v2/api/#created
所有方法的有效时限参照vue实列的生命周期

var vue = new Vue({
     
      el: '#app',    // 挂载目标
      data: {
      },    // 定义数据对象
      methods: {
      },    // 定义事件方法
      filters: {
      },    // 定义私有的过滤器
      directives: {
      },    // 定义私有的指令
      components: {
      },    // 定义实例内部私有的组件
	  watch:{
      },    // 监听值的变化，然后执行相对应的函数（或者步骤）
 
      beforeCreate() {
      },    // data 和 methods 属性之前调用此函数
      created() {
      },    // data 和 methods 属性初始化完成之后调用此函数
      beforeMount() {
      },    // 在挂载开始之前被调用
      mounted() {
      },    // 实例被挂载后调用
      beforeUpdate() {
      },    // 在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器
      updated() {
      },    // 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用
      beforeDestroy() {
      },    // 实例销毁之前调用。在这一步，实例仍然完全可用
      destroyed() {
      },    // 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁
    })

7、vue实列的生命周期