Vue.js 实例

一个 Vue.js 应用程序从一个 Vue 实例开始。实例对象是我们 Vue 应用程序的主要对象。它帮助我们在应用程序中使用 Vue 组件。 Vue 实例使用 MVVM(Model-View-View-Model) 模式。 Vue 构造函数接受一个称为选项对象的 JavaScript 对象。当你实例化一个 Vue 实例时，你需要传递一个选项对象，该对象可以包含数据、方法、元素、模板等选项。

句法：

var app = new Vue({
   // options
});

方法：首先，我们需要创建一个对象来使用 Vue 并将其分配给变量 app。在 Vue 中，有一个名为el的参数，它接受 DOM 元素的 id。所以我们将创建一个 id 为home的 div 元素。 Vue 元素只能在这个 id(#home) 中工作。我们可以在这个数据对象中分配参数值。

在以下示例中，我们使用 Vue.js 来展示实例的工作方式。

示例 1：

HTML

  

    
    

  

    
  
        
        {{title}}
        Title : {{name}}
        Topic : {{topic}}
    
  
  
    
        // Creating Vue Instance
        var app = new Vue({
            // Assigning id of DOM in parameter
            el: '#home',
            // Assigning values of parameters
            data: {
                title: "Geeks for Geeks",
                name: "Vue.js",
                topic: "Instances"
            }
        });
    

  

输出：

Vue 应用程序

示例 2：

HTML

  

    
    

  

    
  
        
        
            {{title}}
        
        Enter first name :
            
        
        Enter last name : 
            
        
        Click
        
    

  

    // Creating Vue Instance
    var app = new Vue({
        // Setting id of DOM in parameter
        el: '#home',
        // Passing datas
        data: {
            title: "Geeks for geeks",
        },
        methods: {
            fullname: function () {
                // Getting values from inputs
                var first_name = document
                    .getElementById("firstname").value
  
                var last_name = document
                    .getElementById("lastname").value
  
                // Setting text in element
                document.getElementById("full_name")
                    .innerHTML = "Hi, " + first_name 
                    + " " + last_name
            }
        }
    });

  

输出：