普通HTML文件如何使用VUE组件

Dear T.

已于 2023-11-01 00:52:44 修改

阅读量1w

点赞数 4

文章标签： javascript html vue.js

于 2023-06-19 16:39:23 首次发布

本文链接：https://blog.csdn.net/qq_63704334/article/details/131288686

版权

方法一：

要在普通HTML文件中使用Vue组件，你需要进行以下步骤：

1. 引入Vue框架：在HTML文件中的<head>标签内，添加以下代码来引入Vue框架的JavaScript文件。

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

你也可以将Vue框架的JavaScript文件下载到本地，并使用相对路径引入。

2.创建Vue实例：在HTML文件中的<body>标签内，创建一个<div>元素，作为Vue实例的挂载点。给这个<div>元素添加一个id属性，用于在Vue实例中引用。

<div id="app"></div>

3.编写Vue组件：在HTML文件中的<script>标签内，编写Vue组件的JavaScript代码。首先，创建一个Vue组件对象，定义组件的模板、数据和方法等。

<script>
  // 创建Vue组件对象
  var myComponent = Vue.component('my-component', {
    template: '<div>{{ message }}</div>',
    data: function() {
      return {
        message: 'Hello, Vue!'
      };
    }
  });
</script>

现在，你可以在HTML文件中使用Vue组件了。在<div id="app">的范围内，可以直接使用你定义的Vue组件，如下所示：

<my-component></my-component>

Vue会将该组件渲染到对应的<div>中，并显示组件中定义的内容。

需要注意的是，Vue组件的代码可以放在单独的JavaScript文件中，然后在HTML文件中使用<script src="your-component.js"></script>来引入。这样可以更好地组织和管理代码。

方法二：

先引入vue.js

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

定义一个app

<div id="app"></div>

这里引用的是Element-UI组件，使用CDN方式引用的组件不需要在VUE组件中注册，直接使用该组件即可。

引入Element-UI

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

然后是在script标签里编写代码，下面是一个示例代码

new Vue({
    el:"#app",
    methods:{
        method_1(){
            console.log("这是一个消息盒子方法")
            this.$message({
                message: '这是一个成功方法',
                type: 'success'
            });
        }
    }
})

我们在app里面调用测试一下


<div id="app">
    <el-button  @click="method_1">点我一下</el-button>
</div>
<script>

    new Vue({
        el:"#app",
        methods:{
            method_1(){
                console.log("这是一个消息盒子方法")
                this.$message({
                    message: '这是一个成功方法',
                    type: 'success'
                });
            }
        }
    })
</script>

特别提醒一下，任何以Vue为基础的组件必须在Vue的CDN之后引用！！

Dear T.

关注

4
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
普通HTML文件如何使用VUE组件

标签内，编写Vue组件的JavaScript代码。首先，创建一个Vue组件对象，定义组件的模板、数据和方法等。需要注意的是，Vue组件的代码可以放在单独的JavaScript文件中，然后在HTML文件中使用。你也可以将Vue框架的JavaScript文件下载到本地，并使用相对路径引入。标签内，添加以下代码来引入Vue框架的JavaScript文件。现在，你可以在HTML文件中使用Vue组件了。1. 引入Vue框架：在HTML文件中的。3.编写Vue组件：在HTML文件中的。中，并显示组件中定义的内容。
复制链接

扫一扫