极客教程Vue.js实例
要启动Vue应用程序，必须使用Vue函数创建一个新的Vue实例。每当我们创建一个新的Vue项目时，Vue实例会默认激活在main.js文件中，它也被称为根Vue实例。
语法
var vm = new Vue({
// options
})
Vue的应用程序设计灵感来自MVVM模式。作为惯例，我们必须使用变量vm（称为ViewModel缩写）来引用Vue实例。当你创建一个Vue实例时，必须传入一个选项对象。在本文中，您将学习如何使用这些选项来创建所需的行为。
一个Vue应用程序包含一个使用new Vue创建的根Vue实例，它按照嵌套和可重用组件的树形结构组织。例如，如果你创建一个待办事项应用程序，那么它的组件树可能如下图所示:
注：所有Vue组件也都是Vue实例。
我们通过一个例子来看看Vue构造函数的一些组成部分。
index.html文件：
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "app">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{mydetails()}}</h1>
</div>
<script src="index.js"></script>
</body>
</html>
index.js文件：
var vm = new Vue({
el: '#app',
data: {
firstname : "Albert",
lastname : "Pinto",
address : "Las Vegas"
},
methods: {
mydetails : function() {
return "I am "+this.firstname +" "+ this.lastname +" from "+ this.address;
}
}
})
让我们用一个简单的CSS文件，使输出更具吸引力。
index.css文件：
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出结果：
Output结果:
Firstname : Albert
Lastname : Pinto
I am Albert Pinto from Las Vegas
例子解释
在上面的例子中，你可以看到我们使用了一个名为el的参数。这个“el”参数用于携带DOM元素的id。在上面的例子中，我们有id#app，它是Index.html文件中出现的div元素的id。
<div id = "app"></div>
现在，我们上面程序的逻辑将只影响该元素内的所有内容。
在定义id之后，我们定义了data对象。在data对象中，我们定义了一些值，例如firstname和lastname。这也定义在<div>元素中。例如，
<div id = "app">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>
这里，Firstname : {{firstname}}值指定了存储在data对象中的名字。当你执行程序时，它会在插值中被替换，即{{}}，并用数据对象中分配的值，即Albert。
在姓氏中也是一样的，因为Lastname: {{lastname}}值指定了存储在data对象中的姓氏。当你执行程序时，它会在插值中被替换，即{{}}，并用数据对象中分配的值，即Pinto。
在定义数据对象之后，我们有一些方法，我们定义了一个名为”mydetails”的函数并返回值。这也定义在<div>元素中:
<h1>{{mydetails()}}</h1>
因此，你可以看到mydetails函数在{{}}中被调用。您可以看到在Vue实例中返回的值被打印在{{}}内部。## Vue实例的生命周期钩子函数
每个Vue实例都要经历一系列的初始化步骤。当你创建一个实例时，它需要设置数据观察、编译模板、将实例挂载到DOM上以及在数据更改时更新DOM。这个过程被称为Vue实例的生命周期。
Vue实例的生命周期图示
Vue实例的生命周期钩子函数的解释
以下是Vue实例经历的所有事件或钩子的列表。Vue.js实例生命周期有8个钩子：
- Before create钩子
- Created钩子
- Before mount钩子
- Mounted钩子
- Before update钩子
- Updated钩子
- Before destroy钩子
- Destroyed钩子
beforeCreate()钩子： beforeCreate()钩子是创建过程中发生的第一个事件或钩子。它使开发者能够在组件添加到DOM之前执行某些操作。我们无法在此事件中访问DOM。在这个钩子中，数据仍然不是响应式的，组件生命周期内发生的事件还没有被设置好。
created()钩子： created()钩子用于在创建实例后运行代码。它使您能够访问响应式数据，但模板和虚拟DOM的挂载或渲染还没有完成。在这个钩子中，事件是活动的，并且可以访问响应式数据，虽然模板还没有被挂载或渲染。
beforeMount()钩子： beforeMount()钩子用于在初始呈现之前执行，并在已编译模板或渲染函数之后执行。它在模板被编译并被Vue更新虚拟DOM后被调用。这是不常用的事件，大多数情况下不需要使用此事件。
mounted()钩子： mounted()钩子是最常用的事件或钩子。这个钩子使你完全可以访问响应式组件、模板和呈现的DOM。在这个钩子内，你可以完全访问响应式组件、模板和渲染的DOM。
beforeUpdate()钩子： beforeUpdate()钩子在组件数据更改和更新周期开始之前执行。它在DOM被修补和重新呈现之前运行。
updated()钩子： updated()钩子在组件数据更改和DOM重新渲染之后执行。如果您需要在属性更改后访问DOM，这是最好的地方。
beforeDestroy()钩子： beforeDestroy()钩子用于在拆除实例之前执行。这是Vue实例生命周期的倒数第二步，如果需要，是清理事件或响应式订阅的正确位置。
destroyed()钩子： destroyed()钩子是Vue.js实例生命周期的最后一步，用于执行任何最后的清理。