Vue组件

最新推荐文章于 2024-09-13 14:34:15 发布

楠大人929

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量60

点赞数

分类专栏： Vue 文章标签： vue.js 学习 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_72116747/article/details/129389289

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue组件

Vue组件的意思是自定义标签，模板

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码.

Vue.component();注册组件

my-component-li：自定义组件的名字

template：组件的模板

props：我们需要传递参数到组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    组件》自定义标签，模板的意思-->
<!--    v-for循环数组，v-bind绑定参数-->
<!--    组件：传递给组件中的值，通过props来接收-->
    <name v-for="item in items" v-bind:item="item"></name>

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

    //定义一个Vue组件component，名叫name
    Vue.component("name",{
        //对象
            //template:模板
            //props：接收绑定参数
        props:['item'],
        template:'<li>{{item}}</li>',
    });

  var vm = new Vue({
    el:"#app",
    data:{
        //定义了一个items数组
        items:["Java","pyhon","eclisp"],
    }
  });
</script>
</body>
</html>

说明：