index.vue 執行順序 - daniel-qa/Vue GitHub Wiki

index.vue 執行順序

基本 index.vue

下面是一个完整的示例，展示如何使用 index.html 和 index.vue 组件。

  • 1 . 项目结构
my-vue-app/
├── index.html
└── index.vue
  • 2 . index.html 这是你的主 HTML 文件，其中引入了 Vue 和你的 Vue 组件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="text/x-template" id="index-template">
        <div>
            <h1>Hello from Index Component</h1>
            <p>This is a single file component example.</p>
        </div>
    </script>

    <script src="app.js"></script> <!-- 这里引入你的 JS 文件 -->
</body>
</html>
  • 3 . index.vue 这是你的 Vue 组件，包含模板、脚本和样式。
<template>
  <div>
    <h1>Hello from Index Component</h1>
    <p>This is a single file component example.</p>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      // 在这里定义你的数据
    };
  },
  methods: {
    // 在这里定义你的方法
  },
  created() {
    // 在这里可以添加创建时的逻辑
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>
  • 4 . JavaScript 文件 app.js 在 app.js 中实例化 Vue 和注册组件。
// app.js

// 注册 Vue 组件
Vue.component('index', {
    template: '#index-template'
});

// 创建 Vue 实例
new Vue({
    el: '#app',
    template: '<index/>'
});
  • 5 . 启动 http-server

在 my-vue-app 目录下运行 http-server：

http-server
  • 6 . 访问项目

在浏览器中访问 http://localhost:8080 （或你终端显示的其他端口），你应该能看到 index.vue 组件的内容。

index.vue 執行順序

下面是一个基本的 Vue 2 组件的 .vue 示例，并描述了执行顺序。

示例 .vue 文件 vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <input v-model="searchTerm" placeholder="Search..." />
    <button @click="performSearch">Search</button>
    <ul>
      <li v-for="item in searchResults" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Search Example',
      searchTerm: '',
      searchResults: []
    };
  },
  methods: {
    performSearch() {
      // 模拟 API 请求
      const results = [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ];
      this.searchResults = results.filter(item =>
        item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
      );
    }
  },
  mounted() {
    console.log('Component is mounted.');
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

执行顺序

  • 1 . 组件初始化：

Vue 解析 .vue 文件，准备挂载组件。

  • 2 .数据定义：

data 函数执行，返回初始状态： title 为 "Search Example" searchTerm 为空字符串 searchResults 为一个空数组

  • 3 .生命周期钩子：

beforeCreate：数据未初始化，组件实例尚未创建。 created：数据已初始化，但 DOM 尚未挂载。 beforeMount：即将挂载到 DOM。 mounted：组件已挂载，DOM 可以操作，输出 "Component is mounted." 到控制台。

  • 4 .用户交互：

用户在输入框中输入内容，v-model 绑定会自动更新 searchTerm。

  • 5 . 方法调用：

用户点击 "Search" 按钮，触发 performSearch 方法： 模拟 API 请求，使用一个静态数组过滤结果。 根据 searchTerm 更新 searchResults。

  • 6 .数据更新与视图渲染：

当 searchResults 更新时，组件会重新渲染，显示匹配的结果。

  • 7 .样式应用：

使用 scoped 样式，确保样式仅影响当前组件。

  • 总结

这个示例展示了 Vue 2 组件的基本结构和执行顺序。通过用户交互，组件状态和视图会动态更新。

⚠️ **GitHub.com Fallback** ⚠️