How to introduce js files in vue

There are four ways to introduce external JS files in Vue.js: through the <script> tag. Import modular JS files through the import statement. Register JS files as Vue components through the Vue.component() method. Mix JS file code with multiple Vue components through the Vue.mixin() method.

Introducing JS files into Vue.js

Vue.js provides a variety of methods to introduce external JavaScript Files, including:

1. Through the <script> tag

In the Vue template, you can use <script> tag introduces JS files:

<code class="html"><script src="./my-script.js"></script></code>

2. Pass the import statement

For modular JavaScript files, you can pass Import statement:

<code class="js">import myModule from './my-module.js'</code>

3. Use the Vue.component() method

If you need to use the JavaScript file as a Vue component To register, you can use the Vue.component() method:

<code class="js">Vue.component('my-component', {
  // ... 组件配置
  template: '<div></div>',
  // ... 组件方法
  created() {
    // 组件创建时执行
    this.fetchData()
  },
  methods: {
    fetchData() {
      // ... 从 JavaScript 文件中获取数据
    }
  }
})</code>

4. Through the Vue.mixin() method

If you need to mix the code in the JavaScript file with multiple Vue components, you can use the Vue.mixin() method:

<code class="js">const myMixin = {
  data() {
    return {
      // ... 混合数据
    }
  },
  methods: {
    // ... 混合方法
  }
}

Vue.mixin(myMixin)</code>

When using these methods to introduce JS files, you need to consider the following Things to note:

• Make sure the path to the JS file is correct.
• If you use modular JavaScript, you need to make sure that Babel or webpack is configured correctly.
• Choose the most appropriate introduction method according to the specific situation.

The above is the detailed content of How to introduce js files in vue. For more information, please follow other related articles on the PHP Chinese website!