您的位置：首页 > 产品设计 > UI/UE

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

2017-01-11 02:02 1271 查看
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
4000
>
</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上一个元素上。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航