Vue.js 实例介绍

什么是 Vue 实例？

Vue.js是由开源开发者开发的前端 JavaScript 框架。它通常用于构建单页应用程序。要了解有关 VueJS 的更多信息，请参阅 Vue.js |介绍和安装。

VueJS 在运行时没有 HTML 代码，而是 VueJS 基于我们的 HTML 代码创建一个模板并将其存储到虚拟 DOM中，然后使用此模板渲染原始 HTML 代码，然后将其渲染为实际 DOM。 VueJS 实例是 HTML 网页的 DOM 元素和 JavaScript 中的应用程序逻辑之间的中介。根据MVVM 模式中的定义，VueJS 实例具体是一个View-Model 。演示 HTML 代码和在 VueJS 中定义为 View-Model 的 Vue 实例之间的连接的基本语法是：

Javascript

  

new Vue({ 
    el: "#app"
});

我们可以从程序范围内的任何地方访问该实例。但是在一个实例中，我们只能使用THIS关键字访问为该实例定义的属性。换句话说，程序中的两个实例之间没有直接联系。

Vue.js 实例中的属性/选项：因为 MVVM 模式还包含与 VueJS 绑定的 HTML 元素。但是要将 Vue 实例与 DOM 元素绑定，我们有一些特殊的属性以及 Vue 实例。属性是：

1. 埃尔
2. 数据
3. 方法
4. 计算
5. 手表
6. 模板

让我们通过一个示例简要了解这些选项中的每一个：

1. EL：该选项一般用于将实例映射到 HTML 元素并与 DOM 连接。它使用 HTML 元素安装实例并遵守程序/实例的创建。 EL 充当 JavaScript 的查询选择器，我们可以使用 ID 或 className 挂载 EL。我们可以根据应用程序在创建时或稍后阶段安装元素。例子：

Javascript

  
Type 1:

new vue({
    el: "#app"
});

  
Type 2:

var vm = new vue({
    ...
});
vm.$mount("#app");

2. 数据：它是实例最重要的属性之一。所有数据属性都被存储以在程序中使用并在创建实例时进行编译。我们可以将数据元素与 DOM 绑定以在网页上进行动态反应，而不是重新加载整个内容。我们可以在这个选项中存储任何类型的数据元素，通常在 VanillaJS 中使用的所有可能的数据元素在这里都是有效的。例子：

Javascript

     Name: {{ name }} 
      
 Male: {{ isMale }} 
  
    ....
 
   
 
 new vue({
     el: "#app",
    data: {
      name: "John",
      isMale: true,
      personalDetails: {
        hobbies: ["cricket","football],
        age: 20
      }
    }
 });
 

OUTPUT: 

Name: John

Male: true

如示例中所述，

标记将根据对 Vue 实例中创建的 NAME 变量所做的更改来替换其内容。这个过程称为Binding ，一般用来实现网页的动态性。

3. 方法：每个 Vue 实例都可以有自己的一组用于模块化程序结构的函数/方法。实例的内置函数定义很少（来自实例生命周期）。我们还可以在“METHODS”属性中定义我们自己的一组函数。它们与创建实例时的数据属性一起编译。例子：

Javascript

      
 {{ getName() }} 
  

  

new vue({
    el: "#app",
    data: {
        name: "John"
    },
    methods: {
      getName: function() {
          return (this.name);
      }
    }
});

OUTPUT: John

如示例中所述，我们可以通过实例方法访问数据项，并且可以与 DOM 元素绑定。

4. Computed：它帮助我们对数据进行计算和转换。它们仅用于转换数据项以进行演示，它们不会更改实际的现有数据。这是一个依赖属性，换句话说，计算的属性是根据数据元素的反应性依赖关系缓存的。

在计算属性中，它知道其中的函数是否受到任何数据属性更改的影响。例子：

Javascript

      
 {{ getFullname }} 
  

  
new Vue({
    el: '#app',
    data: {
        name: "John"
    },
    computed: {
        getFullname: function()
      {
          return this.name+" Dave";
      }
    }
});

OUTPUT:  John Dave

5. Watch：这个属性在实现动态网页时被广泛使用。它在数据更改时执行方法/代码。当任何其他方法或用户与网页的交互发生任何更改时，它会自动执行代码。实现 WATCH 的唯一先决条件是在实例中具有关联的数据属性。

通常，当我们想做一些异步任务（从服务器检索信息）时使用它。示例（单击按钮时，Counter 的值将发生变化）：

Javascript

        Counter: {{Counter}}
        

        Click Me
 
      
 new Vue({
    el: '#app',
    data: {
        Counter: 0
    },
    watch: {
        Counter: function(val)
        {
            this.Counter = 10;
        }
    }
});

 OUTPUT: 

Counter : 10

Click Me

6. 模板：该属性负责从实例中创建 HTML 元素。它只是用 DOM 替换属性内的内容。在编译时，它只是将 HTML 元素放置到虚拟 DOM 中，并在需要时将其放置到实际 DOM 中。例子：

Javascript

  

  
var dataTemplate = new Vue({
  el: '#app',
  template: '
Hello World
'
})

OUTPUT: Hello World

Vue 实例的主题到此结束，涵盖了所有实例属性及其与适当示例的配合。