VueJS – 实例(4)

作者 : 慕源网 本文共4009个字,预计阅读时间需要11分钟 发布时间: 2021-11-16 共241人阅读

要开始使用 VueJS,我们需要创建 Vue 的实例

语法

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

让我们看一个例子来理解什么需要成为 Vue 构造函数的一部分。

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <h1>{{mydetails()}}</h1>
      </div>
      <script type = "text/javascript" src = "js/vue_instance.js"></script>
   </body>
</html>

vue_instance.js

var  vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      address    : "Mumbai"
   },
   methods: {
      mydetails : function() {
         return "I am "+this.firstname +" "+ this.lastname;
      }
   }
})

对于 Vue,有一个名为el的参数。它采用 DOM 元素的 id。在上面的例子中,我们有 id #vue_det。它是 div 元素的 id,它存在于 .html 中。

<div id = "vue_det"></div>

现在,我们要做的任何事情都会影响 div 元素,而不会影响它之外的任何内容。

接下来,我们已经定义了数据对象。它具有值 firstname、lastname 和 address。

在 div 中也分配了相同的内容。例如,

<div id = "vue_det">
   <h1>Firstname : {{firstname}}</h1>
   <h1>Lastname : {{lastname}}</h1>
</div>

Firstname : {{firstname}} 值将在插值内被替换,即 {{}} 与数据对象中分配的值,即 Ria。姓氏也是如此。

接下来,我们在方法中定义了一个函数 mydetails 和一个返回值。它在 div 内分配为

<h1>{{mydetails()}}</h1>

因此,在 {{} } 中调用函数 mydetails。Vue 实例中返回的值将打印在 {{}} 中。检查输出以供参考。

输出

VueJS - 实例(4)

现在,我们需要将选项传递给 Vue 构造函数,主要是数据、模板、要挂载的元素、方法、回调等。

让我们来看看传递给 Vue.js 的选项。

#data – 这种类型的数据可以是对象或函数。Vue 将其属性转换为 getter/setter 以使其具有反应性。

我们来看看数据是如何在选项中传递的。

例子

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var _obj = { fname: "Raj", lname: "Singh"}
         
         // direct instance creation
         var vm = new Vue({
            data: _obj
         });
         console.log(vm.fname);
         console.log(vm.$data);
         console.log(vm.$data.fname);
      </script>
   </body>
</html>

输出

VueJS - 实例(4)

console.log(vm.fname); // prints Raj

console.log(vm.$data); prints the full object as shown above

console.log(vm.$data.fname); // prints Raj

如果存在组件,则必须从函数中引用数据对象,如下面的代码所示。

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var _obj = { fname: "Raj", lname: "Singh"};
         
         // direct instance creation
         var vm = new Vue({
            data: _obj
         });
         console.log(vm.fname);
         console.log(vm.$data);
         console.log(vm.$data.fname);
         
         // must use function when in Vue.extend()
         var Component = Vue.extend({
            data: function () {
               return _obj
            }
         });
         var myComponentInstance = new Component();
         console.log(myComponentInstance.lname);
         console.log(myComponentInstance.$data);
      </script>
   </body>
</html>

在组件的情况下,数据是一个函数,它与 Vue.extend 一起使用,如上所示。数据是一个函数。例如,

data: function () {
   return _obj
}

要引用来自组件的数据,我们需要创建它的一个实例。例如,

var myComponentInstance = new Component();

要从数据中获取详细信息,我们需要执行与上面的父组件相同的操作。例如。

console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);

以下是浏览器中显示的详细信息。

VueJS - 实例(4)

Props – props 的类型是字符串或对象数组。它采用基于数组或基于对象的语法。据说它们是用于从父组件接受数据的属性。

示例 1

Vue.component('props-demo-simple', {
   props: ['size', 'myMessage']
})

示例 2

Vue.component('props-demo-advanced', {
   props: {
      // just type check
      height: Number,
      
      // type check plus other validations
      age: {
         type: Number,
         default: 0,
         required: true,
         validator: function (value) {
            return value >= 0
         }
      }
   }
})

propsData – 用于单元测试。

类型– 字符串数组。例如,{ [key: string]: any }。它需要在创建 Vue 实例的过程中传递。

例子

var Comp = Vue.extend({
   props: ['msg'],
   template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
   propsData: {
      msg: 'hello'
   }
})

Computed – 类型: { [key: string]: Function | { get: Function, set: Function } }

例子

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var vm = new Vue({
            data: { a: 2 },
            computed: {
            
               // get only, just need a function
               aSum: function () {
                  return this.a + 2;
               },
               
               // both get and set
               aSquare: {
                  get: function () {
                     return this.a*this.a;
                  },
                  set: function (v) {
                     this.a = v*2;
                  }
               }
            }
         })
         console.log(vm.aSquare);  // -> 4
         vm.aSquare = 3;
         console.log(vm.a);       // -> 6
         console.log(vm.aSum); // -> 8
      </script>
   </body>
</html>

Computed 有两个函数aSumaSquare

函数 aSum 只返回 this.a +2。函数 aSquare 又是两个函数getset

变量 vm 是 Vue 的一个实例,它调用 aSquare 和 aSum。另外 vm.aSquare = 3 从 aSquare 调用 set 函数,vm.aSquare 调用 get 函数。我们可以在浏览器中检查输出,如下图所示。

VueJS - 实例(4)

方法– 方法将包含在 Vue 实例中,如下面的代码所示。我们可以使用 Vue 对象访问该函数。

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var vm = new Vue({
            data: { a: 5 },
            methods: {
               asquare: function () {
                  this.a *= this.a;
               }
            }
         })
         vm.asquare();
         console.log(vm.a); // 25
      </script>
   </body>
</html>

Methods是 Vue 构造函数的一部分。让我们使用 Vue 对象vm.asquare()调用该方法,在asquare函数中更新属性a的值。a 的值从 1 变为 25,在下面的浏览器控制台中可以看到相同的反映。

VueJS - 实例(4)


慕源网 » VueJS – 实例(4)

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录