kebab-case

在vue官网上有这样的一句话：
“camelCase vs. kebab-case
HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：如果你使用字符串模版，则没有这些限制。”
小森表示对这句话好懵啊！
经过自己的各种倒弄终于得到了下边的东西。

重点在这里：

1、html特性不区分大小写：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>prop动态=绑定</title><script src="vue.js"></script>
</head>
<body><div id="app"><input type="text" v-model="message"><!--<child v-bind:myMEssage="message"></child>--><child v-bind:mymessage="message"></child><!--由于HTML的特性不识别大小写，所以“myMEssage”与“mymessage”是一样的，都解析为小写。故而下边的组件也应该是小写。-->
</div>
<script>Vue.component('child',{//此处都为小写。props:['mymessage'],template:'<p>{{mymessage}}</p>'});new Vue({el:'#app',data:{message:''}})
</script>
</body>
</html>

2、组件中使用camelCased（驼峰式）命名，在html中应改为kebab-case（短横线）命名方式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>prop动态=绑定</title><script src="vue.js"></script>
</head>
<body><div id="app"><input type="text" v-model="message"><child v-bind:my-message="message"></child><!--此处的my-message只能是短横线命名（若为驼峰式则全部转换为小写。）-->
</div>
<script>Vue.component('child',{
//        props:['my-message'],props:['myMessage'],//props中传递的数据可以为驼峰式也可以为短横线式，他们在此处是相互转换的template:'<p>{{myMessage}}</p>'// 此处有限制，是字符串模板，{{ }}语法中不能是短横线连接方式。此处只能是驼峰命名方式。若为短横线的命名方式，则会报错。如下图：});new Vue({el:'#app',data:{message:''}})
</script>
</body>
</html>

kebab-case相关推荐

ASP.NET CORE MVC 实现减号分隔(Kebab case)样式的 URL
ASP.NET CORE MVC 中,默认的 Route 模板是: /{controller}/{action} .我们可以通过开启 URL 小写转换将 URL 变为小写,但此方式在 Control ...
springboot 获取application参数_LOOK ! SpringBoot的外部化配置最全解析
本篇要点介绍各种配置方式的优先级. 介绍各种外部化配置方式. 介绍yaml的格式及原理. 介绍如何绑定并测试类型安全的属性配置. 介绍@ConfigurationProperties与@Value的 ...
springboot 获取application参数_LOOK ! SpringBoot的外部化配置最全解析
本篇要点介绍各种配置方式的优先级. 介绍各种外部化配置方式. 介绍yaml的格式及原理. 介绍如何绑定并测试类型安全的属性配置. 介绍@ConfigurationProperties与@Value的 ...
ASP.NET Core MVC 视图
ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. 布局用于提供各个页面所需的公共部分 ...
ASP.NET Core Razor 视图组件
视图组件简介在新的ASP.NET Core MVC中,视图组件类似于局部视图,但它们更强大.视图组件不使用模型绑定,仅依赖于您在调用时提供的数据. 视图组件特性: 呈现页面响应的某一部分而不是整个响 ...
api 获取网络使用情况_您的API是什么情况？
api 获取网络使用情况免责声明:在纯REST中,API是不透明的,URL应该是对先前请求的响应中作为链接发送的内容. 但是,我不是在讲纯REST,而是在讲更实用的API,其中涉及REST的一些概念 ...
您的API是什么情况？
免责声明:在纯REST中,API是不透明的,URL应该是在对先前请求的响应中作为链接发送的内容. 但是,我不是在讲纯REST,而是在讲更实用的API,其中涉及REST的一些概念以及通用的API最佳实践 ...
vue 如何生成一个dom元素_通过一个简单的示例学习如何编写Vue组件
大家好,本篇文章我将带着大家一起学习如何编写自定义组件(Components),通过「vue基础」新手快速入门篇(一)这篇文章的学习,我们知道了 Vue 设计的目的就是为了方便我们创建基于组件UI的项 ...
Monaco Editor教程（十八）：使用api来完成某些键盘操作，格式化，查找，显示右侧菜单等。
背景在一般的Web IDE中,我们需要将经常用到的一些操作放到顶部操作栏里,类似语雀的文档编辑. 代码编辑器,一般也会放一些查找,格式化,撤销,恢复.有些人喜欢用快捷键来进行这些操作,但由于mona ...
程序员必知的 4 种命名方式
文章目录 1.camel case (驼峰式) 2.snake case (蛇形式) 3.kebab case (烤串式) 4.匈牙利命名法 5.小结参考文献编码时,命名无处不在. 比如我们需要对 ...

kebab-case

重点在这里：

kebab-case相关推荐

最新文章

热门文章