vue uses external methods

Preface

In Vue.js development, we usually encounter a problem: how to use external methods. This article will introduce how to let Vue.js interact with external methods to better develop and maintain code.

Prerequisite knowledge

Before studying this article, you need to know the following knowledge:

• Vue.js basic knowledge and usage
• JavaScript basics Knowledge and usage
• Introduction and usage of external methods

1. Introducing external methods

Introducing external methods in Vue.js The method is the same as introducing external methods in JavaScript.

Suppose we have a file named utils.js, which is located in the src/utils/ directory under the project root directory. There is a method named add in this file, which adds two numbers and returns the result. In Vue.js, we can introduce this method as follows:

import { add } from '@/utils/utils.js';

In the above code, we use the ES6 import syntax to import the add method in the utils.js file. The @ here represents the src directory. If your utils.js file path is different, you should change it accordingly.

2. Using external methods in Vue.js

After introducing the external method, we can call it in the Vue.js component.

Below is an example. We have a Vue.js component called MyComponent that displays the sum of two numbers and uses the add method to calculate it.

<template>
  <div>{{ sum }}</div>
</template>

<script>
  import { add } from '@/utils/utils.js';

  export default {
    data() {
      return {
        num1: 3,
        num2: 5,
      }
    },
    computed: {
      sum() {
        return add(this.num1, this.num2);
      }
    }
  }
</script>

In the above code, we imported the add method, and then used it in the sum calculation attribute to get the sum of num1 and num2 and display it on the page. If the add method of utils.js returns an error, we can use try-catch statements to catch the errors and display them.

3. Using external libraries in Vue.js components

In Vue.js development, we usually need to use some external JavaScript libraries to extend the functions of Vue.js . If we want to use these libraries in Vue.js components, we need to introduce them in the component.

The following is an example using the moment.js library. moment.js is a powerful JavaScript date library that we can use in components to format and calculate dates.

First, we need to use NPM to install the moment.js library:

npm install moment --save

Next, introduce the moment.js library into the Vue.js component:

import moment from 'moment';

Finally, in Use the moment.js library in the component:

<template>
  <div>{{ formattedDate }}</div>
</template>

<script>
  import moment from 'moment';

  export default {
    data() {
      return {
        date: new Date(),
      }
    },
    computed: {
      formattedDate() {
        return moment(this.date).format('YYYY-MM-DD');
      }
    }
  }
</script>

In the above code, we import the moment.js library and assign it to the moment variable, then use the moment library in the formattedDate calculated property to format the date, and It is displayed on the page.

Conclusion

In Vue.js development, introducing and using external methods and libraries is a very common situation. This article explains how to introduce and use external methods and libraries in Vue.js. Remember, when using external methods and libraries in Vue.js components, you need to remember to import them into the component. If you have any questions or comments, please leave them in the comments section.

The above is the detailed content of vue uses external methods. For more information, please follow other related articles on the PHP Chinese website!