VueJS - 实例

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

         VueJs Instance                           Firstname : {{firstname}}         Lastname : {{lastname}}         {{mydetails()}}      

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

现在，无论我们要做什么都会影响div元素而不会影响它.

接下来，我们定义了数据对象.它有值firstname，lastname和address.

在div中分配相同的值.例如，

   Firstname : {{firstname}}   Lastname : {{lastname}}

名字:{{firstname}}值将在插值内被替换，即{{}}与数据对象中指定的值，即Ria .姓氏也是如此.

接下来，我们有一些方法，我们定义了一个函数mydetails和一个返回值.它在div中分配为

 < h1> {{mydetails()}}

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

输出

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

让我们看看要传递给Vue的选项.

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

让我们看看数据在选项中的传递方式.

示例

         VueJs Introduction                           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);         

输出

console.log(vm.fname); //打印Raj

console.log(vm.$ data ); 打印完整对象，如上所示

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

如果有组件，则必须从函数引用数据对象，如以下代码所示.

         VueJs Introduction                           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);         

对于组件，数据是一个函数，与Vue.extend一起使用，如上所示.数据是一个功能.例如，

data: function () {   return _obj}

要引用组件中的数据，我们需要创建它的实例.例如，

var myComponentInstance = new Component();

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

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

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

道具 :  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: '{{ msg }}'})var vm = new Comp({   propsData: {      msg: 'hello'   }})

计算 : 键入:{[key:string]:函数| {get:Function，set:Function}}

示例

         VueJs Introduction                           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         

Computed有两个函数 aSum 和 aSquare .

函数aSum只返回 this.a + 2 .再次函数aSquare两个函数 get 和 set .

变量vm是Vue的一个实例，它调用aSquare和aSum.另外vm.aSquare = 3从aSquare调用set函数，vm.aSquare调用get函数.我们可以在浏览器中检查输出，看起来像下面的屏幕截图.

方法 : 方法将包含在Vue实例中，如以下代码所示.我们可以使用Vue对象访问该函数.

         VueJs Introduction                           var vm = new Vue({            data: { a: 5 },            methods: {               asquare: function () {                  this.a *= this.a;               }            }         })         vm.asquare();         console.log(vm.a); // 25         

方法是Vue构造函数的一部分.让我们使用Vue对象 vm.asquare()调用方法，在 asquare中更新属性 a 的值功能. a的值从1更改为25，并且在以下浏览器控制台中反映出相同的内容.