首页 > 其他分享 >15 组件的几个注意点

15 组件的几个注意点

时间:2023-01-13 09:33:40浏览次数:31  
标签:school Vue const data 注意 组件 15 写法

几个注意点:

1.关于组件名:

一个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):School
多个单词组成:
第一种写法(kebab-case):my-school
第二种写法(CamelCase命名):MySchool(需要Vue脚手架支持)
备注:
(1).组件名尽可能回避HTML内已有的元素名称,例如:h2,H2都不行
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:

image

3.一个简写方式:

const school = Vue.extend(options) 可简写为:const school = options


<html>
    <head>
        <title>组件的几个注意点</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
      
        <div id="root">
            <my-School></my-School>
            <hello></hello>
        </div>
       
        <script type="text/javascript">
            Vue.config.productionTip = false
            const mySchool= Vue.extend({
                template:`
                    <div>
                        <h2>学校名称:{{schoolName}}</h2>    
                        <h2>学校地址:{{schoolAddress}}</h2>  
                    </div>
                `,
                data(){
                    return{
                        schoolName:'空格都',
                        schoolAddress:'成都'
                    }
                }
            })
            const hello = Vue.extend({
                template:`
                    <h2>{{msg}}</h2>
                `,
                data(){
                    return{
                        msg:'你好世界!'
                    }
                }
            })
            const vm = new Vue({
                el:'#root',
                data:{
                },
                components:{
                    mySchool:mySchool,hello:hello
                }
            })
           
        </script>
    </body>
</html>


标签:school,Vue,const,data,注意,组件,15,写法
From: https://www.cnblogs.com/quliangshyang/p/17048555.html

相关文章