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.js 实例_https://bianchenghao6.com_【vue教程】_第1张

注意: 所有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;
}

程序执行后,您将看到以下输出:
输出:
 Firstname : Albert
Lastname : Pinto
I am Albert Pinto from Las Vegas

Vue.js 实例_https://bianchenghao6.com_【vue教程】_第2张

示例说明

在上面的示例中,您可以看到我们使用了名为
el 的参数。此
"el" 参数用于携带DOM元素的ID。在上面的示例中,我们有ID #app。它是Index.html文件中显示的div元素的ID。
 <div id = "app"></div>

现在,我们上面的程序的逻辑将只影响div元素,而不会影响其外部。
定义ID后,我们就定义了数据对象。在数据对象中,我们定义了一些值,例如名字和姓氏。这也在
<div> 元素内定义。例如,
 <div id = "app">
   <h1>Firstname : {{firstname}}</h1>
   <h1>Lastname : {{lastname}}</h1>
</div>

在这里,
Firstname: {{firstname}} 值指定数据对象中存储的数据的名字。当您执行该程序时,它将在插值内被替换,即{{}}被数据对象(即Albert)中分配的值替换。
姓氏与
相同>姓氏: {{lastname}} 值指定数据对象中存储的数据的姓氏。当您执行该程序时,它将在插值内(即{{}})替换为数据对象(即Pinto)中分配的值。
定义数据对象后,我们可以使用以下方法: 我们定义了一个名为" mydetails"的函数并返回值。它也在<div>元素内定义为
 <h1>{{mydetails()}}</h1>

因此,您可以看到函数mydetails在{{}}内部被调用。您可以看到Vue实例中返回的值打印在{{}}内。

Vue实例生命周期

每个Vue实例都会经历一系列初始化步骤。创建实例时,它需要设置数据观察,编译模板,将实例安装到DOM以及在数据更改时更新DOM。此过程称为Vue实例的生命周期。

Vue实例的生命周期图

Vue.js 实例_https://bianchenghao6.com_【vue教程】_第3张

Vue实例生命周期钩子说明

以下是Vue实例经历的所有事件或钩子的列表。对于
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实例生命周期的最后一步,用于进行最后一刻的清理。