vue 引用 js 檔的方法 - daniel-qa/Vue GitHub Wiki

vue 引用 js 檔的方法

在 Vue CLI 创建的默认项目中，如果你想新增一个 app.js 文件并绑定 name 数据，可以按照以下步骤进行：

    1. 创建 app.js 文件

在 src 目录下创建一个新的 JavaScript 文件 app.js，内容如下：

// src/app.js
export function greet(name) {
    return `Hello, ${name}!`;
}
    1. 修改 App.vue 组件

import { greet } from './app'; // 导入 greet 函数

在 src/App.vue 文件中，你需要导入 app.js，并在组件中使用这个功能。以下是修改后的 App.vue 示例：

<template>
  <div id="app">
    <h1>{{ greeting }}</h1>
    <input v-model="name" placeholder="Enter your name" />
    <button @click="updateGreeting">Greet</button>
  </div>
</template>

<script>
import { greet } from './app'; // 导入 greet 函数

export default {
  data() {
    return {
      name: '',
      greeting: ''
    };
  },
  methods: {
    updateGreeting() {
      this.greeting = greet(this.name); // 更新问候信息
    }
  }
};
</script>

<style>
/* 你的样式 */
</style>

在 Vue 组件中，export default { data() { ... } } 是用来定义组件的一个标准方式。

通常，它会与 Vue 的其他部分（如模板和样式）放在同一个 .vue 文件中。这样可以使组件更具可维护性和模块化。

  • 參考

name 和 input 輸入框綁定，greeting 會呼叫 app.js 的 function greet(name)，並即時顯示改變值在面頁

App.vue

<template>

  <div id="app">
    <h1>{{ greeting }}</h1>
    <input v-model="name" placeholder="Enter your name" />    
  </div>

  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { greet } from './app'; // 导入 greet 函数

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
	  return {
		name: '',
	  };
	  },
  computed: {
	  greeting() {
		return greet(this.name); // 计算问候信息
	  },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// src/app.js
export function greet(name) {
    return `Hello, ${name}!`;
}
⚠️ **GitHub.com Fallback** ⚠️