vue 获取obj的值_第四章：Vue实例

最新推荐文章于 2023-11-30 16:39:59 发布

weixin_39681171

最新推荐文章于 2023-11-30 16:39:59 发布

阅读量942

点赞数

文章标签： vue 获取obj的值

本文链接：https://blog.csdn.net/weixin_39681171/article/details/111323835

版权

本文介绍了如何在VueJS中创建根Vue实例，重点讨论了`el`参数用于指定DOM元素以及数据对象如何与视图绑定。通过示例展示了数据对象的定义，方法的创建以及如何在模板中使用这些数据和方法。同时提到了props和计算属性的概念，以及在单元测试中使用的propsData。

摘要由CSDN通过智能技术生成

要开始使用VueJS，我们需要创建Vue实例，称为根Vue Instance。

句法

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

让我们看一个示例，以了解需要成为Vue构造函数一部分的内容。

<html>
   <head>
      <title>VueJs Instancetitle>
      <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>

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)中分配。Lastname 也是如此。

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

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

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

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

#data-这种类型的数据可以是对象或函数。Vue将其属性转换为 getters/setters 以使其具有交互性。

让我们看一下如何在选项中传递数据。

例

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

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

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

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

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

<html>
   <head>
      <title>VueJs Introductiontitle>
      <script type = "text/javascript" src = "js/vue.js">script>
   head>
   <body>
      <script type = "text/javascript">var _obj = { fname: "Raj", lname: "Singh"};// direct instance creationvar 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);

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

Tips: props类型是一个字符串或对象数组。它采用基于数组或基于对象的语法。它们被称为用于从父组件接受数据的属性。

eg1:

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

eg2:

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实例时需要传递它。

eg:

<html>
   <head>
      <title>VueJs Introductiontitle>
      <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);       // -> 6console.log(vm.aSum); // -> 8script>
   body>
html>

计算具有两个函数aSum和aSquare。

函数aSum仅返回this.a + 2。函数aSquare再次获得和设置两个函数。

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

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

<html>
   <head>
      <title>VueJs Introductiontitle>
      <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); // 25script>
   body>
html>

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

END

时光，在物转星移中渐行渐远，春花一梦，流水无痕，没有在最想做的时候去做的事情，都是人生的遗憾。人生需要深思熟虑，也需要一时的冲动。

weixin_39681171

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫