VUE学习 -- 组件基础及组件注册

最新推荐文章于 2024-04-27 12:02:33 发布

Haoea！

最新推荐文章于 2024-04-27 12:02:33 发布

阅读量54

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/snwown/article/details/122456638

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

组件基础

一、组件是什么？
组件系统是VUE的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎每一种类型的应用界面都可以抽象为一个组件树。

组件的重点就是可复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message }} {{message + message}}
        <div :id="message"></div>
        <ul>
            <!-- <li v-for = "item in list">
                <span v-if = "!item.del">
                    {{item.title}}
                </span>
                <span v-else style="text-decoration: red line-through;">
                    {{item.title}}
                </span>
                <button v-show = "!item.del">删除</button>
            </li> -->
            <todo-item v-for = "item in list" :title="item.title" :del="item.del"></todo-item>
        </ul>
        <!-- <todo-iteam v-for = "item in list"  :title="item.title" :del="item.del"></todo-iteam> -->
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</body>
<script>
    Vue.component('todo-item',{
        //定义属性声明
        props: {
            title:String,
            del: {
                type:Boolean,
                default:false,
            },
        },
        template:  `
        <li >
                <span v-if = "!del">
                    {{title}}
                </span>
                <span v-else style="text-decoration: red line-through;">
                    {{title}}
                </span>
                <button v-show = "!del">删除</button>
            </li>
        ` //html的模板
        ,
        data: function () {
            return {}
      },
      methods: {

      },
    })
    var vm = new Vue({
        el:'#app',
        data:{
            message:'hello world',
            list:[{
                title: '课程1',
                del: false
            },
            {
                title: '课程2',
                del: true
            },
            ],
        }
    })
</script>
</html>

另外一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message }} {{message + message}}
        <div :id="message"></div>
        <!-- <ul>
            <todo-item v-for = "item in list" :title="item.title" :del="item.del"></todo-item>
        </ul> -->
        <!-- <todo-iteam v-for = "item in list"  :title="item.title" :del="item.del"></todo-iteam> -->
        <todo-list></todo-list>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</body>
<script>
    Vue.component('todo-item',{
        //定义属性声明
        props: {
            title:String,
            del: {
                type:Boolean,
                default:false,
            },
        },
        template:  `
        <li >
                <span v-if = "!del">
                    {{title}}
                </span>
                <span v-else style="text-decoration: red line-through;">
                    {{title}}
                </span>
                <button v-show = "!del">删除</button>
            </li>
        ` //html的模板
        ,
        data: function () {
            return {}
      },
      methods: {

      },
    })
    Vue.component('todo-list',{
        template: `
            <ul>
                <todo-item v-for = "item in list" :title="item.title" :del="item.del"></todo-item>
            </ul>
        `,
        data: function(){
            return {
                list:[{
                title: '课程1',
                del: false
            },
            {
                title: '课程2',
                del: true
            }
            ],
            }
        }
    })
    var vm = new Vue({
        el:'#app',
        data:{
            message:'hello world',
     
        }
    })
</script>
</html>