在HTML文件中使用VUE组件

最新推荐文章于 2024-08-07 15:20:58 发布

wowpH

最新推荐文章于 2024-08-07 15:20:58 发布

阅读量1.1w

点赞数 4

分类专栏： Vue 文章标签： html vue 组件 js

本文链接：https://blog.csdn.net/pfdvnah/article/details/109172627

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一、前言
二、示例
三、总结

一、前言

本文的主要目的是学习如何在html文件中定义并使用组件。
主要内容是定义一个用来展示文本的组件，在 <ol> 标签内部循环展示一个列表。
学习本文前需要掌握html基础，vue实例，v-for指令。

二、示例

1、流程

引入vue.js文件

<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

定义组件

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
});

todo-item是组件的名字，props中声明从外部传入组件中的值，template定义组件的内容和样式。

创建vue实例

var vm = new Vue({
    el: '#app',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '牛肉' }
        ]
    }
});

数组groceryList是需要展示的数据。

使用组件

<todo-item v-for="item in groceryList" :key="item.id" :todo="item"></todo-item>

定义的组件用标签的形式使用，示例：<todo-item></todo-item>。v-for指令循环数组的每一项item，将item的值传给todo-item组件的todo变量。

2、完整代码

<!DOCTYPE html>
<html>

<head>
    <title>使用组件示例</title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <ol>
            <todo-item v-for="item in groceryList" :key="item.id" :todo="item"></todo-item>
        </ol>
    </div>
    <script>
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        });
        var vm = new Vue({
            el: '#app',
            data: {
                groceryList: [
                    { id: 0, text: '蔬菜' },
                    { id: 1, text: '奶酪' },
                    { id: 2, text: '牛肉' }
                ]
            }
        });
    </script>
</body>

</html>

3、目录结构

|
|--html                      // 保存html文件
|  |--index.html             // 示例起始页
|--js                        // 保存js文件
|  |--vue.js                 // vue框架js文件