vue学习---组件的几个注意点(组件名, 组件标签, 简写方式)

2021-11-16 08:32:10 阅读：155 来源： 互联网

几个注意点： 1.关于组件名: 一个单词组成：第一种写法(首字母小写)：school 第二种写法(首字母大写)：School 多个单词组成：第一种写法(kebab-case命名)：my-school 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持) 备注： (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。 (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签: 第一种写法：<school></school> 第二种写法：<school/> 备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
3.一个简写方式： const school = Vue.extend(options) 可简写为：const school = options

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>几个注意点</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            几个注意点：
                    1.关于组件名:
                                一个单词组成：
                                            第一种写法(首字母小写)：school
                                            第二种写法(首字母大写)：School
                                多个单词组成：
                                            第一种写法(kebab-case命名)：my-school
                                            第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
                                备注：
                                        (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
                                        (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

                    2.关于组件标签:
                                第一种写法：<school></school>
                                第二种写法：<school/>
                                备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

                    3.一个简写方式：
                                const school = Vue.extend(options) 可简写为：const school = options
        -->
        <!-- 准备好一个容器-->
        <div id="root">
            <h1>{{msg}}</h1>
            <school></school>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false
        
        //定义组件
        const s = Vue.extend({
            name:'atguigu',
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>    
                    <h2>学校地址：{{address}}</h2>    
                </div>
            `,
            data(){
                return {
                    name:'尚硅谷',
                    address:'北京'
                }
            }
        })

        new Vue({
            el:'#root',
            data:{
                msg:'欢迎学习Vue!'
            },
            components:{
                school:s
            }
        })
    </script>
</html>

标签：school,vue,const,---,Vue,组件,简写,写法
来源： https://www.cnblogs.com/leiyanting/p/15559422.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue学习---组件的几个注意点(组件名, 组件标签, 简写方式)