Vue非单文件组件的几个注意点

最新推荐文章于 2024-09-06 22:20:29 发布

前端程序员路易

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量344

点赞数

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

本文链接：https://blog.csdn.net/qq_46582421/article/details/121641674

版权

vue 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

本文介绍了Vue组件的命名规范，包括单个单词和多个单词组成的组件名，以及kebab-case和CamelCase两种命名方式。同时，讨论了组件标签的正确写法，并展示了在不使用脚手架时可能遇到的问题。此外，还提供了一种简写组件定义的方法。内容强调了避免使用HTML元素名称，以及如何通过name属性定制组件显示名。

摘要由CSDN通过智能技术生成

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

代码：

<!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>2.几个注意点</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link rel="shortcut icon" href="../ico—全图标/application/Burn.ico" type="image/x-icon">
</head>
<body>
    <div id="root">
        <h1>{{msg}}</h1>
        <xuexiao></xuexiao>
        <school></school>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue在启动时生成生产提示
    
        //定义组件
        const s = Vue.extend({
            name:'utm boy',
            template:`
              <div>
                 <h2>学校名称：{{name}}<h2/>
                 <h2>学校地址：{{address}}<h2/>  
              </div>
            `,
            data(){
                return {
                    name:'UTM',
                    address:'柔佛州新山市'
                }
            }
        })
        
        new Vue({
            el:'#root',//e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{
                msg:'UTM欢迎你'
            },
            components:{
                xuexiao:s
            }
        })
        </script>
</body>
</html>

效果：
在这里插入图片描述

前端程序员路易

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue非单文件组件的几个注意点

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

扫一扫

专栏目录