组件名称

最新推荐文章于 2024-04-04 09:31:48 发布

该睡觉觉了

最新推荐文章于 2024-04-04 09:31:48 发布

阅读量377

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zhangyiyang111/article/details/115384545

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

组件名称

* 1.不能使用现有标签作为组件的名称,eg:div p span img
* 2.不能使用现有标签的大写作为组件的名称.eg:DIV diV dIV
* 3.组件名称中使用小驼峰形式进行命名,在调用时,需要将大写转为 -小写
* 4.定义组件时,建议使用小驼峰形式进行命名.方便书写
* 5.如果组件模板内容非常多时,需要换行,一定要使用反引号.
* 6.一个组件的模板只能对应一个根节点

<!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>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 作用域 -->
    <div id="app">
        <v-two></v-two>
        <!-- <v-one></v-one> -->
    </div>
    <script>
        // 实例化vue
        new Vue({
            el:'#app',
            data:{},
            methods:{},
            components:{
                /**
                 * 1.不能使用现有标签作为组件的名称,eg:div p span img
                 * 2.不能使用现有标签的大写作为组件的名称.eg:DIV diV dIV
                 * 3.组件名称中使用小驼峰形式进行命名,在调用时,需要将大写转为 -小写
                 * 4.定义组件时,建议使用小驼峰形式进行命名.方便书写
                 * 5.如果组件模板很多时,需要换行,一定要使用反引号.
                 * 6.一个组件的模板只能对应一个根节点
                */
                vTwo:{
                    template:'<div>局部注册组件</div>'
                },
                // 错误写法
                // vOne:{
                //     template:`<div>
                //             <h1>标题一</h1>
                //             <p>文本内容</p>
                //         </div>
                //         <hr />
                //         <div>底部</div>
                //         `
                }
            }
        })
    </script>
</body>
</html>

该睡觉觉了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件名称

组件名称* 1.不能使用现有标签作为组件的名称,eg:div p span img* 2.不能使用现有标签的大写作为组件的名称.eg:DIV diV dIV* 3.组件名称中使用小驼峰形式进行命名,在调用时,需要将大写转为 -小写* 4.定义组件时,建议使用小驼峰形式进行命名.方便书写* 5.如果组件模板内容非常多时,需要换行,一定要使用反引号.* 6.一个组件的模板只能对应一个根节点<!DOCTYPE html><html lang="en"><head&
复制链接

扫一扫

专栏目录