Vue.js学习-5-Vue.js组件Vue.component简单学习

原创

高万禄 2021-07-13 18:20:24 ©著作权

文章标签 Vue 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者高万禄的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="vueApp">
        <h1>Vue.js组件Vue.component简单学习</h1>
        <h4>如果我们自己定义属于我们自己的html标签，这是不是一件非常酷的事情</h4>
        <h4>下面我们来用Vue.js来实现这个小愿望</h4>
        <myelement v-for="value in array" v-bind:text="value"></myelement>
        //value是一个个对象让text对象指向value对象并使用我们自一定义的组件myelemnt里面text对象对应的模板语法填充到DOM之中去
        <h4>但是好像自己命名的组件名称只能小写，哈哈，html里也都是小写啊</h4>
    </div>
</body>
<script>
    Vue.component('myelement',{
        props:['text'],
        template:"<li>{{text.data}}</li>"//这是一个模板语法
    });
    let vueApp=new Vue({
        el:"#vueApp",
        data:{
            array:[
                {data:"你好"},
                {data:"Vue.js"},
                {data:"我们将会一起来学习"}
            ],
        }
    });
</script>
</html>