vue编码一个简单的组件

基于上一篇博客，现在我来学一下，如何根据vue编写一个简单的组件

第一步：导入vue.js模板

第二步：代码编写，定义一个Vue组件component

第三步：还是需要id填写app调用这个script

zujianmingcheng == 组件名称 （自定义的）

运行测试截图

全部代码演示

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

</div>

<script src="js/vue.js"></script>

<script>

    //定义一个组件
    Vue.component("zujianmingcheng",{
        template: '<font color="blue">定义蓝色组件</font>'

    });

    var vm = new Vue({
        el: "#app"
    });

</script>

</body>
</html>

那如何接收传入的数据并且遍历呢？

首先第一步，在data里面定义需要遍历的数组

其次第二步，在定义的组件 v-for循环遍历里面的元素 v-bind将循环接收的元素传入到组件里面

在之后第三步，定义组件的同时，使用 props:[] 接收从上方组件传来的数据，在通过{{}}输入到template里面

运行测试截图

当然了，在这里放置全部代码

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <zujianmingcheng v-for="item in items" v-bind:jieshoudeshuju="item"></zujianmingcheng>
</div>

<script src="js/vue.js"></script>

<script>

    //定义一个组件
    Vue.component("zujianmingcheng", {
        props: ['jieshoudeshuju'],
        template: '<li>{{jieshoudeshuju}}</li>'

    });

    var vm = new Vue({
        el: "#app",
        data: {
            items: ["a,b,c,d"]
        }
    });

</script>

</body>
</html>
posted @ 2023-05-06 17:26  YE-  阅读(15)  评论(0)  编辑  收藏  举报