Vue一款轻量级的js框架,在此分享一下自己学习历程,Vue的学习成本比较低,相对于React以及Angular来说算是相当简单了的
首先是不使用npm安装的前提下,我们简单利用link直接使用Vue
在你的网页中添加如下的js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
然后接下来我们就可以开始Vue的学习之路了
首先从Vue实例开始说起
我们现在的网页是这样的
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Vue</title>
</head>
<body>
</body>
</html>
接着我们需要定义出来一个Vue实例,但是在定义之前我们先看一下官方给出的生命周期的图示
在一个新的实例被创建之前,首先是数据观测,然后初始事件,然后被建立,接着判断是否有el这个选项(这个通常是用来绑定到html中的元素),如果有则判断是否有template选项即模板选项,如果没有则等待mounted钩子的唤起,接着继续判断模板是否存在。
如果模板存在,就把模板编译到render函数里面,如若没有存在,就把el的外部html当作模板,接下来是mount之前,创建一个vm.$el的对象来替换掉el,然后mount
mount之后就是mounted的状态,当数据发生改变的时候虚拟dom会重新render并且patch,接着更新数据,直到vm.$destroy()被调用
在销毁之前,会先拆卸掉监视者,子组件和事件监听器,然后销毁。
好了我们先试试
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Vue</title>
</head>
<body>
<div id="app">
Vue Test
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
})
</script>
</html>
至此,我们了解了Vue实例的生命周期,用代码创建了一个Vue实例,并将其绑定到dom上一个元素上。