Vue学习笔记（1）一开始的使用以及Vue实例的详解

来源：互联网发布：成都java培训机构排名编辑：程序博客网时间：2024/05/16 17:43

Vue一款轻量级的js框架，在此分享一下自己学习历程，Vue的学习成本比较低，相对于React以及Angular来说算是相当简单了的

首先是不使用npm安装的前提下，我们简单利用link直接使用Vue

在你的网页中添加如下的js

然后接下来我们就可以开始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上一个元素上。

0 0

Vue学习笔记（1） 一开始的使用以及Vue实例的详解

Vue学习笔记（1）一开始的使用以及Vue实例的详解