.html页面引入vue并使用公共组件方式

介绍：本文主要讲解如何在.html页面中引入vue并使用公共组件，方便不熟悉Vue.js框架但需要使用公共组件的人员进行开发。

步骤：

1. 引入Vue.js及Vue组件库

在.html文件中使用<script>标签引入Vue.js及所需的Vue组件库。如下：

```html

```

1. 注册Vue组件

在引入Vue组件库后，我们需要先在页面中注册需要使用的Vue组件。如下所示：

```html

```

在上述代码中，我们使用Vue.component函数注册了一个名为el-button的Vue组件，该组件的实现来自ElementUI.Button组件。

1. 创建Vue实例

按照Vue.js的规则，在注册完组件后，我们需要创建一个Vue实例。如下所示：

```html

按钮

```

在上述代码中，我们使用new Vue函数创建了一个Vue实例，并将其挂载到页面中的<div id="app">元素上。

1. 实现组件功能

此时我们已经完成了Vue组件的注册和Vue实例的创建，现在就可以在.html页面中使用该组件，实现组件功能啦！如下所示：

```html

默认颜色
主要按钮
成功按钮
信息按钮
警告按钮
危险按钮

```

示例1：

在上一个示例的基础上，我们可以给该按钮组件添加一个click事件，点击该按钮时会在控制台输出一句话。如下所示：

<el-button type="primary" @click="handleClick">点击我</el-button>

var app = new Vue({
  el: '#app',
  methods: {
    handleClick: function() {
      console.log('按钮被点击啦！');
    }
  }
});

示例2：

这次，我们将把组件中的文字内容作为一个数据（message）放在组件的data属性中，并创建一个输入框同时使用Vue双向绑定和组件实现动态修改按钮上的文字内容。如下所示：

<el-button :plain=false @click="handleClick">{{ message }}</el-button>
<label for="message">按钮文字：</label>
<input type="text" id="message" v-model="message">

var app = new Vue({
  el: '#app',
  data: {
    message: '按钮'
  },
  methods: {
    handleClick: function() {
      console.log('按钮被点击啦！');
    }
  }
});

在上述代码中，我们创建了一个名为message的数据，用于存储组件中的文字内容。在页面中我们使用了输入框和v-mode指令将输入框message绑定到数据message上，并使用了{{ }}语法将数据message渲染到按钮上。在Vue实例中，我们使用new Vue函数的data属性进行数据的存储和操作，使用了methods方法来定义组件中的点击事件。