关于vue中的组件、prop以及事件的命名规范

最新推荐文章于 2022-10-23 11:00:00 发布
最新推荐文章于 2022-10-23 11:00:00 发布
阅读量856 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianflower/article/details/118195399
版权

组件：建议使用kebab-case（短横线命名）

prop：建议使用cameCase（驼峰命名）

事件：建议使用kebab-case（短横线命名）


                

        

        

    

  


    

      

        

            

              
                
                  lianflower
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue框架下代码规范总结

				
			

			

				

					xinguanyiban07的专栏
				

				

					04-30
					
					610
					
				

			

		

		

			
				
废话少说，上干货。这里只是列取规则，详情例子对照参考vue官网风格指南
一、规范命名
主要防止命名冲突、便于理解语义和后期维护
1、组件名为多个词
组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。
如：todo-item
2、props属性定义要尽量详细
如：
props: {
  status: {
    type: String,
    required...

			
		

	



                

              
                



	

		

			

				
					
Vue项目组件命名规范

					
热门推荐

				
			

			

				

					Grey的博客
				

				

					11-06
					
					1万+
					
				

			

		

		

			
				
一、定义组件名



注册组件命名时: 要么单词首字母都大写(大驼峰),要么都小写用短横线连接

二、单文件组件命名







拆分单文件组件命名时:要么单词首字母都大写(大驼峰),要么都小写用短横线连接

三、基础组件命名

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如Base、App或V。像button icon 这类的



四、单例组件名



只应该拥有单个活跃实例的组件应该以The前缀命名，以示其唯一性。

...

			
		

	



                


  
              

                


	

		

			

				
					
vue组件书写规范

				
			

			

				

					weixin_30555125的博客
				

				

					10-11
					
					373
					
				

			

		

		

			
				
vue组件书写规范
import引入原则: 
// import { mapState, mapGetters, mapActions, mapMutations } form 'vuex' // 涉及到状态管理的组件优先引入vuex

// import component from 'components/xxxxxx.component' // components

// import d...

			
		

	





	

		

			

				
					
vue props规范写法

				
			

			

				

					weixin_42432439的博客
				

				

					10-29
					
					1518
					
				

			

		

		

			
				
props: {
name: {
required: true, // 设置required就不要设置default
type: String
},
res: {
type: Array,
default: function() {
// Array和Object的默认值的设置都是function
return []
}
},
time: {
type: Number,
default: 0
}
...

			
		

	



		

			
		



	

		

			

				
					
对于Vue代码执行流程的理解

				
			

			

				

					weixin_42075821的博客
				

				

					10-12
					
					255
					
				

			

		

		

			
				
初学Vue，文章中有理解不正确的地方，希望大神们可以指正，我会及时改正，不断完善，不断进步。

首先，一个Vue项目都会有index.html 、main.js 、App.vue这三个文件。
在Vue中我们会经常提到“组件”，通俗来讲，它就是后缀名为.vue文件，也就是说后缀名为.vue文件都被称为组件。
Vue是单页面形式开发，我们Vue项目中的所有组件都会通过index.html文件进行渲染加载。
注意事项：
1、在main.js文件的Vue实例中，定义了App.vue是根组件。
2、根组件中，也就是&

			
		

	





	

		

			

				
					
vue中props的两种写法

				
			

			

				

					云
				

				

					03-04
					
					1173
					
				

			

		

		

			
				
props: ["svgInfoData", "component_prop"],
  props: {
    svgInfoData: {
      type: Array,
      default: () => [],
    },
    component_prop: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },






			
		

	





	

		

			

				
					
vue组件命名和props命名代码详解

				
			

			

				

					10-16
				

			

		

		

			
				
下面将详细讲解Vue组件命名和props命名的规则及最佳实践。  首先，Vue组件的命名有以下几种方式：  1. **kebab-case（短横线命名）**：例如`my-component`。这种命名方式在HTML中书写最为直观，因为HTML属性名称不...

			
		

	





	

		

			

				
					
Vue组件中prop属性使用说明实例代码详解

				
			

			

				

					08-27
				

			

		

		

			
				
Vue 组件中 Prop 属性使用说明实例代码详解  Vue 组件中 Prop 属性是一个非常重要的概念，它允许开发者在组件之间传递数据。 Prop 属性可以是静态的，也可以是动态的。静态的 Prop 属性可以直接在模板中传入值，而...

			
		

	





	

		

			

				
					
关于vue组件内部命名规范的一些思考和意见

				
			

			

				

					01-20
				

			

		

		

			
				
在Vue组件中，有几个关键的区域需要考虑命名规范：  1. **组件名**：Vue推荐使用kebab-case（短横线分隔）命名组件，例如`my-component`。这样做可以使组件名在HTML中看起来更清晰，同时遵循Web组件的标准。  2. **...

			
		

	





	

		

			

				
					
vue组件名命名规范

				
			

			

				

					weixin_43837268的博客
				

				

					10-10
					
					1738
					
				

			

		

		

			
				
紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。


// bad
components/
|- TodoList.vue
|- TodoItem.vue
└─ TodoButton.vue

// good
components/
|- TodoList.vue
|- TodoListItem.vue
└─ TodoListItemButton.vue
...

			
		

	





	

		

			

				
					
VUE模板及组件的使用

				
			

			

				

					weixin_30869099的博客
				

				

					11-02
					
					368
					
				

			

		

		

			
				
一、vue模板安装
二、组件的使用
三、父子组件传值
四、子组件对父组件添加事件
五、markdown编辑器

一、vue模板安装
1.全局安装vue

npm install vue-cli -g


2.到指定文件夹下,下载模板

vue init webpack-simple


3.下载生产环境依赖

npm install


npm...

			
		

	





	

		

			

				
					
Vue.js 组件编码规范

				
			

			

				

					weixin_30355437的博客
				

				

					03-13
					
					118
					
				

			

		

		

			
				
Vue.js 组件编码规范（最下文附有本人写的demo地址）


目标
本规范提供了一种统一的编码规范来编写Vue.js代码。这使得代码具有如下的特性：

其它开发者或是团队成员更容易阅读和理解。
IDEs 更容易理解代码，从而提供高亮、格式化等辅助功能
更容易使用现有的工具
更容易实现缓存以及代码包的分拆

本指南为De Voorhoede参考RiotJS 编码...

			
		

	





	

		

			

				
					
vue组件命名规范-分享

				
			

			

				

					qq_44472790的博客
				

				

					04-04
					
					2896
					
				

			

		

		

			
				
一个组件在封装和使用的时候的命名规范–回顾
1.vue2.0版本文档介绍的以下2种组件命名方式：
第一种：使用 kebab-case（推荐使用这种，遵循 W3C 规范中的自定义组件名：字母全小写且必须包含一个连字符）
Vue.component('my-component-name', { /* ... */ })

第一个参数 my-component-name就是当前组件的名字，是我们自己定义...

			
		

	





	

		

			

				
					
vue规范规则

				
			

			

				

					aoqiaolang0919的博客
				

				

					09-04
					
					262
					
				

			

		

		

			
				
vue组件，数据通信，样式，JS的规范规则。对vue官方风格指南的总结归类并加入自己的规范，在团队小组中使用。
1.项目名/文件目录命名：
kebab-case（- 连接）：
项目名：vue-admin
文件目录：table-module
2.组件规范：2.1 组件名为多个单词：  组件名应该始终是多个单词的，根组件 App 以及 <transition>、&l...

			
		

	





	

		

			

				
					
vue组件的3种书写形式

				
			

			

				

					weixin_30724853的博客
				

				

					03-14
					
					112
					
				

			

		

		

			
				
第一种使用script标签

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>

        <-- 注意：使...

			
		

	





	

		

			

				
					
【前端】2.持续总结一下Vue书写规范，包含了元素，组件，注释，指令等

					
最新发布

				
			

			

				

					小冷coding的博客
				

				

					10-23
					
					907
					
				

			

		

		

			
				
持续总结了元素，组件，注释指令等规范

			
		

	





	

		

			

				
					
vue语法 基本指令

				
			

			

				

					ling_xy的博客
				

				

					08-01
					
					471
					
				

			

		

		

			
				
文章目录一.目录及几个主要文件说明二.vue语法vue基本指令1.数据绑定指令2.元素属性绑定 v-bind3.元素显示隐藏4.条件语句指令5.集合绑定 v-for6.类别绑定 class style7.元素的事件绑定
一.目录及几个主要文件说明
目录结构：

build文件：打包之后的项目文件
config：配置目录（包括端口之类）
node_modules：依赖包文件
src：开发目录文件【开发只使用这个】 包括：

assets：放置一些图片（如logo）
components：放置组件文件。可以不用

			
		

	





	

		

			

				
					
vue的十一种书写规范

				
			

			

				

					wyk760629476的专栏
				

				

					04-29
					
					431
					
				

			

		

		

			
				
1.created watch不要调用方法，可以用watch中的原有属性控制，声明时候就执行渲染方法

2.props要驼峰式命名

3.事件命名要短线分隔

4.props要添加约束，默认值，必填规则等

5.单实例组件要以The开头

6.v-for要添加key以免渲染无序

7.v-for不能与v-if一起使用,可以用computed

8.保持指令简写的一致性，都用或者都不用

9.模板表...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值