VueJS - 应用实例

VueJS - 应用实例 首页 / VueJs入门教程 / VueJS - 应用实例

要开始使用VueJS,无涯教程需要创建Vue实例,称为Root Vue实例。

VueJS实例

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 = "vue_det"></div>

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

接下来,定义了数据对象。它具有值的firstname,lastname和address,例如,

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

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

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

因此,在{{}}内部调用了mydetails函数, Vue实例中返回的值将打印在{{}}中。

Vue Instance

让无涯教程看一下传递给Vue的选项。

#data     - 这种类型的数据可以是对象或函数。

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

运行上面代码输出

Filter

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

console.log(vm.$data);              //打印整个对象,如上所示

console.log(vm.$ data.fname); //打印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);

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

Console

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 - 用于单元测试。

Type           - 字符串数组,例如,{[key:string]:any}。

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

computed - type:{[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 具有两个函数 aSum 和 aSquare 。

函数aSum仅返回 this.a + 2 ,函数aSquare再次提供两个函数 get 和 set 。

变量vm是Vue的一个实例,它调用aSquare和aSum。同样,vm.aSquare=3从aSquare调用set函数,而vm.aSquare则调用get函数,如下图所示。

Instance of Vue

Methods - 方法将包含在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>

方法是Vue构造函数的一部分。让无涯教程使用Vue对象 vm.asquare()调用该方法,在 asquare 中更新属性 a 的值。 a的值从1更改为25,并且在以下浏览器控制台中也可以看到相同的值。

asquare function

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

朱赟的技术管理课 -〔朱赟〕

从0开始做增长 -〔刘津〕

大规模数据处理实战 -〔蔡元楠〕

图解 Google V8 -〔李兵〕

代码之丑 -〔郑晔〕

Python自动化办公实战课 -〔尹会生〕

如何落地业务建模 -〔徐昊〕

超级访谈:对话汤峥嵘 -〔汤峥嵘〕

AI大模型系统实战 -〔Tyler〕

好记忆不如烂笔头。留下您的足迹吧 :)