Vue2.0 新手入门 — 从环境搭建到发布

前言

vue的征战开始了，纠结了很久到底是学Vue还是React,然后发现有纠结那么久的时间，说不定一个已经入门了。于是先挑一个基于原生js的框架Vue开始吧（还有个主要原因是Vue的中文官网做的比较小清新，看起来舒服).

生命周期

如上图所示，Vue的生命周期一共有"Create","Mount","Update","Destroy"四个步骤。
vue.js提供了以下8个生命周期钩子函数，给我们提供了执行自定义逻辑的机会：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed
  从字面很好理解分别是创建前后，挂接前后，更新前后，销毁前后
  注:所谓的mount个人理解就是用vue.js的el去替换dom元素。

用个最简单的demo说明：
html:

<div id="vm1" >{{data}}</div>

javascript:

 var vmData = { name:"vmData", a:"999", data:"this is data" }; var log = function(msg){ console.log(msg); }; var vm = new Vue( { el:"#vm1", data:vmData, beforeCreate:function(){log("beforeCreate")}, created:function(){log("created")}, beforeMount:function(){log("beforeMount")}, mounted:function(){log("mounted")}, beforeUpdate:function(){log("beofreUpdate")}, updated:function(){log("updated")}, beforeDestroy:function(){log("beforeDestroy")}, destroyed:function(){log("destroyed")} }); vmData.b = "998"; vm.$watch("a",function(oldVal,newVal){ console.log("oldVal:" + oldVal + ";newVal:" +newVal); });

在页面初次加载时，会触发"create"和"mount"生命周期钩子：

在控制台中修改data中的值，以及调用$destroy()方法，分别会触发"update"和"destroy"生命周期钩子: