vuejs教程：创建一个Vue对象的实例

2018-09-2915:59:48WEB前端开发Comments3,799 views字数 4172阅读模式

使用VueJS之前，需要创建一个叫做根Vue实例的Vue实例(可以简单的理解为：创建一个Vue对象的实例)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

语法如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

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

下面来看看一个例子，以理解Vue构造函数需要哪些东西。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

文件：instances.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs实例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <p>姓名 : {{name}}</p>
         <p>城市 : {{city}}</p>
         <p>{{mydetails()}}</p>
      </div>
      <script type = "text/javascript" src = "js/vue_instance.js"></script>
   </body>
</html>

文件：vue_instance.js -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

var  vm = new Vue({
   el: '#vue_det',
   data: {
      name : "Maxsu",
      city  : "海口",
      address    : "海口市美兰区人民大道58号"
   },
   methods: {
      mydetails : function() {
         return "我叫 "+this.name +" ，所在城市： "+ this.city;
      }
   }
})

对于Vue，有一个叫做e1的参数。它采用DOM元素的id。在上面的例子的instances.html文件中，有一个div标签，它的id是vue_det。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

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

现在，无论要做什么来影响这个div元素，但是不会影响它。
接下来，我们定义了数据对象。它是一个有值的名字，城市和地址。
div内部分配的是相同的。例如，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

<div id = "vue_det">
    <p>名字 : {{name}}</p>
    <p>城市 : {{city}}</p>
    <p>{{mydetails()}}</p>
</div>

名字：{{name}}值将在插值内被替换，即{{}}与在数据对象中分配的值，即：Maxsu。城市也是如此。
接下来，有一个方法定义了一个函数：mydetails和一个返回值。它被分配在div内。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

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

因此，在{{}}中的mydetails函数被调用。 Vue实例将函数返回的值打印在{{}}中。下面在浏览器中打开上面创建的文件：instances.html ，查看效果如下 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

现在，我们需要将选项传递给Vue构造函数，主要是数据，模板，要挂载的元素，方法，回调函数等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

让我们来看看传递给Vue的选项。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

#data - 这种类型的数据可以是对象或函数。Vue将其属性转换为：getter/setter以使其反应。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

示例一

下面来看看如何在选项中传递数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

创建一个文件：instances-obj.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs实例-示例二</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var _obj = { name: "Maxsu", city: "海口"}

         // direct instance creation
         var vm = new Vue({
            data: _obj
         });
         console.log(vm.name);         
         console.log(vm.$data.city);
         console.log(vm.$data);
      </script>
   </body>
</html>

打开浏览器，浏览上面文件，在终端下应该会看到以下效果 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

console.log(vm.name); - //打印Raj
console.log(vm.$data.city); - 如上所示打印城市
console.log(vm.$data); - 如上所示打印完整的对象文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

如果有一个组件，数据对象必须从一个函数中引用，如下面的代码所示(instances-component.html) -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs实例-示例二</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var _obj = { name: "Maxsu", city: "海口"};

         // direct instance creation
         var vm = new Vue({
            data: _obj
         });
         console.log(vm.name);
         console.log(vm.$data);
         console.log(vm.$data.city);

         // must use function when in Vue.extend()
         var Component = Vue.extend({
            data: function () {
               return _obj
            }
         });
         var myComponentInstance = new Component();
         console.log(myComponentInstance.name);
         console.log(myComponentInstance.$data);
      </script>
   </body>
</html>

在一个组件的情况下，数据是一个函数，与Vue.extend一起使用，如上所示。data是一个函数。例如，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

data: function () {
   return _obj
}

要引用组件中的data数据，需要创建它的一个实例。例如，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

var myComponentInstance = new Component();

为了从data中获取细节，需要像上面的父组件那样做。例如 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

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

以下是浏览器中显示的详细信息 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

类型的 props 是一个字符串或对象的数组。它采用基于数组或基于对象的语法。它们被认为是用来接受父组件数据的属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

示例-1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

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

示例-2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

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}。它需要在创建Vue实例的时候传递。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

示例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

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 } }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

示例三

创建一个文件：instances-computed.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs实例- 示例三</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>

计算有两个函数：aSum和aSquare。
函数aSum只是返回this.a + 2。函数aSquare再次调用两个函数：get和set。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

变量vm是Vue的一个实例，它调用aSquare和aSum函数。另外vm.aSquare = 3从aSquare函数调用set函数，vm.aSquare调用get函数。可以查看浏览器中的输出，如下图所示。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

方法 - methods将包含在Vue实例中，如以下代码所示。可以使用Vue对象来访问函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

<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。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5943.html

vuejs教程：创建一个Vue对象的实例

示例一

示例三

编写异步 JavaScript 的 10 个最佳实践

搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！

Tailwind CSS响应式Web设计全面掌握指南

全栈开发使用Node js（Express）、MYSQL进行CRUD

TypeScript项目搭配Axios封装后端接口调用

jQuery 4.0 测试版，体积小性能好不再支持 IE 10

JavaScript实现轮播图方法，代码简单

Next.Js 与 Tailwind 项目开发笔记

使用Vite创建Vue3项目并开发第一个组件

asyncio 中并发运行的多个任务要如何精确控制

Comment