通过CDN引入Vue的情况，怎么创建自定义组件和使用自定义组件

当通过CDN引入Vue.js时，创建自定义组件和使用它们的过程如下：

1. **引入Vue.js**:
首先，在HTML中通过CDN链接引入Vue核心库：

   <script src="https://cdn.jsdelivr.net/npm/vue@latest"></script>

这会自动下载最新版的Vue，并将其脚本标签内的`Vue`变量暴露出来。

2. **创建自定义组件**:
先创建一个`.vue`文件，比如`MyComponent.vue`:

   <template>
     <div>
       我是一个自定义组件
       <p>{{ message }}</p>
     </div>
   </template>
   <script>
   export default {
     data() {
       return { message: "Hello, Custom Component" };
     },
   };
   </script>

在这里我们定义了一个包含模板和数据处理逻辑的组件。

3. **注册和使用自定义组件**:
在主文件（如`app.js`或`main.js`）里，你需要使用`Vue.component`来注册组件：

   import MyComponent from './MyComponent.vue'; // 引入组件

   Vue.component('my-component', MyComponent); // 注册组件

   // 在HTML中使用
   <div id="app">
     <my-component></my-component>
   </div>

现在，每当在模板中使用`<my-component>`标签时，就会渲染你在`MyComponent.vue`中定义的内容。

4. **组件生命周期钩子**:
如果有更复杂的逻辑，可以在组件中使用生命周期钩子，如`beforeCreate`, `created`, `mounted`, `updated`, `beforeDestroy`等。