vue入门开发，vue前期阶段，vue基础代码

概念

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，其核心思想是通过组件化的方式来组织代码，使得开发更加模块化和可维护。以下是 Vue.js 组件开发 的基础知识：

组件的基本结构

Vue.js 组件是一个自包含的模块，通常包括 模板（HTML）、脚本（JavaScript）和 样式（CSS）三部分。组件可以嵌套使用，形成复杂的用户界面。

示例： 

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

<style scoped>
.hello {
  background-color: lightblue;
}
</style>

组件的定义方式

Vue.js 提供了多种定义组件的方式，包括 全局注册 和 局部注册。

• 全局注册： 全局注册的组件可以在应用的任何地方使用

Vue.component('my-component', {
  template: '<div>My Component</div>'
});

• 局部注册： 局部注册的组件只能在特定的父组件中使用。

import MyComponent from './MyComponent.vue';

export default {
  components: {
    'my-component': MyComponent
  }
};

组件的数据管理

在 Vue.js 中，组件的数据通过 data 函数 返回一个对象来管理。组件的 响应式数据 会在数据变化时自动更新视图。

示例：

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};

组件的属性传递

组件之间通过 props 进行数据的传递。父组件可以通过 props 向子组件传递数据，子组件通过 props 选项 接收这些数据。

示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Message from parent'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

组件的事件通信

Vue.js 组件间的事件通信通过 自定义事件 实现。父组件可以通过 v-on 指令 监听子组件触发的事件，子组件则通过 $emit 方法 触发事件。

示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      console.log('Event received with data:', data);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="emitEvent">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', { message: 'Hello from child' });
    }
  }
};
</script>

组件的生命周期

Vue.js 组件有一系列的生命周期钩子函数，如 created、mounted、updated 和 destroyed，这些钩子函数允许开发者在组件的不同生命周期阶段执行特定的逻辑。

示例：

export default {
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Component updated');
  },
  destroyed() {
    console.log('Component destroyed');
  }
};

组件的插槽

插槽（Slot）是 Vue.js 提供的一种内容分发的机制，允许父组件向子组件传递复杂的 HTML 结构，增强了组件的灵活性和复用性。

示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <p>This content is from parent</p>
    </child-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

组件的动态渲染

Vue.js 支持 动态组件，通过 <component> 标签和 :is 属性，可以根据条件动态渲染不同的组件，非常适合基于用户交互或状态变化来切换组件的场景。

示例：

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

组件的混入

混入（Mixin）是 Vue.js 中用于复用组件选项的机制，可以将一个组件的选项（如 data、methods、生命周期钩子等）混入到另一个组件中，提高代码复用性。

示例：

// mixin.js
export const myMixin = {
  data() {
    return {
      sharedData: 'Shared data'
    };
  },
  methods: {
    sharedMethod() {
      console.log('Shared method called');
    }
  }
};

// 组件中使用混入
import { myMixin } from './mixin';

export default {
  mixins: [myMixin],
  created() {
    console.log(this.sharedData); // 输出: Shared data
    this.sharedMethod(); // 输出: Shared method called
  }
};

组件的异步加载

在大型应用中，为了优化性能，可以使用 Vue.js 的 异步组件 功能，将组件的加载延迟到需要时再进行，这样可以减少初始加载时间。

示例：

export default {
  components: {
    AsyncComponent: () => import('./AsyncComponent.vue')
  }
};

总结 

         掌握这些基础知识是深入理解和高效开发 Vue.js 组件的关键。通过不断实践和项目积累，可以更好地掌握这些概念并灵活应用到实际开发中。