手记

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"生命周期钩子:

4人推荐
随时随地看视频
慕课网APP