vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）
HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 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>
vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）的更多相关文章
- vue组件中的驼峰命名和短横线命名
参考链接:https://www.jianshu.com/p/f12872fc7bfb
- Vue组件中引入jQuery
一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...
- vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue组件中的样式属性--scoped
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...
- vue组件中使用iframe元素
需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
- vue组件中的data为什么是函数？
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- 第七十三篇：解决Vue组件中的样式冲突
好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...
随机推荐
- bootstrap列排序
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 列排序</title> <li ...
- linux内存监控 free
free 命令详解: 执行命令后总共四行. 第一行: 列头 第二行: total 内存总数: 32881776 used 已经使用的内存数: 8324796 free 空闲的内存数: 24556980 ...
- Mac OS X 下android环境搭建
安装jdk6.0版本以支持eclipse的安装 安装eclipse 安装jdk8.0版本,实际开发中用到的jdk 配置java环境变量 打开shell命令窗口(终端) 检测输入java -versio ...
- timer实现Grid自动换行(连续相同的id跳到下一行)
private { Private declarations } FRow: Integer; procedure SetRow(const Value: Integer); public { Pub ...
- 【转】android手势处理揭秘
当滑动(fling)比移动(scroll)有更高的效率时,为什么要让用户使用scroll操作呢?在面积很小而数据又很多的移动设备上,要显示远在后面的那些内容scroll是很困难的,这种情况下fling ...
- 教你如何选择BI数据可视化工具
本文来自网易云社区. 关于如何选择BI数据可视化工具,总体而言,主流BI产品在选择的时候要除了需要考虑从数据到展现.从公司内到公司外等各种场景,结合前面朋友的回答,还需要考虑以下几点:1:以后的数据处 ...
- 模态显示PresentModalViewController
1.主要用途 弹出模态ViewController是IOS变成中很有用的一个技术,UIKit提供的一些专门用于模态显示的ViewController,如UIImagePickerController等 ...
- 趣图：后端工程师是怎样调试CSS的
一大波趣图:CSS的力量 趣图:前端 VS 后端
- shell传参给matlab问题解决办法
之前需要通过shell脚本传参给matlab程序,但是遇到一些问题,现将我遇到的问题分享出来,给遇到同样问题的人一些借鉴. shell部分脚本Execl.sh: /usr/bin/python /ho ...
- js面对对象的几种方式
1.对象的字面量 var obj = {} 2.创建实例对象 var obj = new Object(); 3.构造函数模式 function fn(){}, new fn(); ...