Vue.js 实例
Vue.js 实例
要启动Vue应用程序，必须使用Vue函数创建一个新的Vue实例。每当我们创建新的Vue项目时，默认情况下在main.js文件中都会激活Vue实例。也称为根Vue实例。
语法:
var vm = new Vue({
// options
})
Vue的应用程序设计受到MVVM模式的启发。按照惯例，我们必须使用变量vm(ViewModel的缩写)来引用我们的Vue实例。创建Vue实例时，必须传递一个options对象。在本文中，您将学习如何使用这些选项来创建所需的行为。
Vue应用程序包含使用新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 文件使输出更具吸引力。
CSS 文件使输出更具吸引力。
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出:
输出:
Firstname : Albert
Lastname : Pinto
I am Albert Pinto from Las Vegas 
示例说明
在上面的示例中，您可以看到我们使用了名为
el 的参数。此
"el" 参数用于携带DOM元素的ID。在上面的示例中，我们有ID #app。它是Index.html文件中显示的div元素的ID。
el 的参数。此
"el" 参数用于携带DOM元素的ID。在上面的示例中，我们有ID #app。它是Index.html文件中显示的div元素的ID。
<div id = "app"></div>
现在，我们上面的程序的逻辑将只影响div元素，而不会影响其外部。
定义ID后，我们就定义了数据对象。在数据对象中，我们定义了一些值，例如名字和姓氏。这也在
<div> 元素内定义。例如，
<div> 元素内定义。例如，
<div id = "app">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>
在这里，
Firstname: {{firstname}} 值指定数据对象中存储的数据的名字。当您执行该程序时，它将在插值内被替换，即{{}}被数据对象(即Albert)中分配的值替换。
Firstname: {{firstname}} 值指定数据对象中存储的数据的名字。当您执行该程序时，它将在插值内被替换，即{{}}被数据对象(即Albert)中分配的值替换。
姓氏与
相同>姓氏: {{lastname}} 值指定数据对象中存储的数据的姓氏。当您执行该程序时，它将在插值内(即{{}})替换为数据对象(即Pinto)中分配的值。
相同>姓氏: {{lastname}} 值指定数据对象中存储的数据的姓氏。当您执行该程序时，它将在插值内(即{{}})替换为数据对象(即Pinto)中分配的值。
定义数据对象后，我们可以使用以下方法: 我们定义了一个名为" mydetails"的函数并返回值。它也在<div>元素内定义为
<h1>{{mydetails()}}</h1>
因此，您可以看到函数mydetails在{{}}内部被调用。您可以看到Vue实例中返回的值打印在{{}}内。
Vue实例生命周期
每个Vue实例都会经历一系列初始化步骤。创建实例时，它需要设置数据观察，编译模板，将实例安装到DOM以及在数据更改时更新DOM。此过程称为Vue实例的生命周期。
Vue实例的生命周期图
Vue实例生命周期钩子说明
以下是Vue实例经历的所有事件或钩子的列表。对于
Vue.js 实例生命周期，有八个生命周期事件/方法或 hook:
Vue.js 实例生命周期，有八个生命周期事件/方法或 hook:
beforeCreate（创建前）
created（创建后）
beforeMount(载入前)
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）
beforeCreate() hook: beforeCreate()挂钩是在创建过程中发生的第一个事件或挂钩。它使开发人员甚至在将组件添加到DOM之前就可以执行操作。我们无法在此事件内部访问DOM。在此挂钩中，数据仍然没有反应，并且尚未设置在组件生命周期中发生的事件。
created() hook: 用于在创建实例后运行代码。它有助于您访问反应性数据，但是模板和虚拟DOM的安装或呈现尚未完成。在此挂钩中，事件是活动的，尽管尚未安装或呈现模板，但仍启用对反应性数据的访问。
beforeMount() hook: 使用beforeMount()挂钩在初始渲染发生之前以及模板或渲染函数编译之后执行。在编译模板并由Vue更新虚拟DOM之后调用它。这是很少使用的事件，在大多数情况下，您不需要使用此事件。
mount() hook: 使用的事件或挂钩。该挂钩为您提供了对反应组件，模板和呈现的DOM的完全访问权限。您具有对反应式组件，模板和呈现的DOM的完全访问权限。
beforeUpdate() hook: 在组件上的数据更改之前，将执行beforeUpdate()钩子，并且更新周期的开始。它会在修补和重新呈现DOM之前运行。
updated() hook: : updated()挂钩用于在组件和组件上的数据更改后执行。 DOM重新呈现。如果要在属性更改后访问DOM，这是完成此操作的最佳位置。
beforeDestroy() hook:: beforeDestroy()钩子用于执行就在拆除实例之前。这是Vue实例生命周期的倒数第二步，是您清理事件或响应性订阅的正确位置。
destroyed() hook: destroy()钩子是Vue.js实例生命周期的最后一步，用于进行最后一刻的清理。