How to get value from vue

Preface

Vue.js is a lightweight, flexible, and efficient front-end framework that allows developers to conduct web development more easily. Vue.js is data-driven, componentized, and easy to use. For beginners, the most direct benefit is its data binding and bidirectional data flow features. Getting values ​​in Vue.js is a very important part of development. This article will briefly introduce the method of getting values ​​in Vue.js.

1. Get the value in the Vue instance

Get the value in the Vue instance mainly through the data attribute. After defining the data attribute in the Vue instance and binding the data, you can use the {{ }} interpolation expression for display. The specific code is as follows:

<div id="app">
    <p>{{ message }}</p>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue!'
    }
});

In the above code, a Vue instance vm is created by instantiating Vue. It receives an el attribute, which is used to specify the selector of the mounted element. #app represents the id in the page is an element of the app. At the same time, a data attribute is defined in vm, and the attributes of the object can be bound to the template of the page for display.

2. Get the value in the component

In Vue.js, the component is a reusable Vue instance, which is an abstract concept. The component can also be defined through the data attribute The data to be bound, the code is as follows:

Vue.component('my-component', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<div>{{ count }}</div>'
})

In the above code, we created a Vue component, defined the count value through the data attribute, and displayed it in the template. When using this component in the parent component, you can pass data through the props attribute. The code is as follows:

<my-component :count="6"></my-component>

When you need to update the count value, you can trigger the change event through the $emit method, as shown below:

Vue.component('my-component', {
  props: ['count'],
  template: '<div>{{ count }}</div>',
  methods: {
    updateCount: function () {
      this.$emit('change', this.count + 1)
    }
  }
})

defines an updateCount method in the above code, and sends the change event through emit to pass the new value. When the child component receives the event from the parent component, it can receive the new value through props and display it. The code is as follows:

<my-component :count="count" @change="count = $event"></my-component>

@change in the above code defines the method of receiving events, and $event represents the parameters passed from the child component.

3. Conclusion

Vue.js is a very powerful and flexible front-end framework. As shown above, Vue.js instances and components can define the data to be bound through the data attribute. Data, and can receive new values ​​through the props attribute to achieve two-way binding of data. I believe that in practice, we will become more proficient in the method of getting values ​​in Vue.js, and then write better and more efficient code.

The above is the detailed content of How to get value from vue. For more information, please follow other related articles on the PHP Chinese website!