当前位置：首页 > VUE

vue 实现脚本

2026-01-07 21:48:36VUE

Vue 实现脚本的方法

Vue.js 提供了多种方式来实现脚本功能，包括组件内脚本、混入（Mixins）、插件（Plugins）以及自定义指令等。以下是常见的实现方式：

组件内脚本

在 Vue 单文件组件（SFC）中，可以直接在 <script> 标签中编写 JavaScript 代码，定义组件的逻辑。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message);
    }
  }
}
</script>

混入（Mixins）

混入是一种分发 Vue 组件可复用功能的灵活方式。通过混入可以将公共逻辑提取出来，供多个组件复用。

// messageMixin.js
export default {
  data() {
    return {
      message: 'Hello from Mixin!'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message);
    }
  }
}

<template>
  <div>{{ message }}</div>
</template>

<script>
import messageMixin from './messageMixin';

export default {
  mixins: [messageMixin],
  created() {
    this.showMessage();
  }
}
</script>

插件（Plugins）

插件可以为 Vue 添加全局功能，例如全局方法、指令或组件。

// myPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$showMessage = function (message) {
      console.log(message);
    };
  }
}

// main.js
import Vue from 'vue';
import myPlugin from './myPlugin';

Vue.use(myPlugin);

new Vue({
  created() {
    this.$showMessage('Hello from Plugin!');
  }
});

自定义指令

自定义指令允许直接操作 DOM 元素，适用于需要底层 DOM 操作的场景。

// main.js
Vue.directive('focus', {
  inserted(el) {
    el.focus();
  }
});

<template>
  <input v-focus>
</template>

动态脚本加载

如果需要动态加载脚本，可以使用 document.createElement 或第三方库（如 loadjs）。

// 动态加载外部脚本
function loadScript(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  script.onload = callback;
  document.body.appendChild(script);
}

loadScript('https://example.com/script.js', () => {
  console.log('Script loaded');
});