html页面如何写vue自定义组件

在 HTML 页面中使用 Vue 自定义组件，需要先进行以下几个步骤：

1. 引入 Vue.js 库

在 HTML 页面中引入 Vue.js 库，可以通过 CDN 或下载本地文件的方式。例如：

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

2. 创建 Vue 实例

在页面中创建一个 Vue 实例，可以使用以下代码：

<div id="app">
  <!-- Vue 组件将在这里渲染 -->
</div>

<script>
  var app = new Vue({
    el: '#app',
    // 组件选项
  })
</script>

这里的 `el` 属性指定了 Vue 实例的挂载点，即 Vue 组件将被渲染到 `#app` 元素中。

3. 定义 Vue 组件

定义 Vue 组件需要使用 `Vue.component` 方法，例如：

<script>
  Vue.component('my-component', {
    template: '<div>这是一个自定义组件</div>'
  })
</script>

这里的 `my-component` 是自定义组件的名称，`template` 属性指定了组件的模板，可以是 HTML 或其他模板语言。

4. 使用 Vue 组件

在 HTML 页面中使用 Vue 组件，需要使用组件标签，例如：

<my-component></my-component>

这里的 `my-component` 就是在上面定义的自定义组件名称。

通过以上步骤，就可以在 HTML 页面中使用 Vue 自定义组件了。当然，还可以在组件中添加更多的选项和功能，比如 props、methods、computed 等等。