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 ...
随机推荐
- hdu 4286 (list的reverse时间复杂度为n)
list 的翻转reverse源码: // 将链表倒置 // 其算法核心是历遍链表, 每次取出一个结点, 并插入到链表起始点 // 历遍完成后链表满足倒置 template <class T, ...
- 远程访问Function时报错Remote table-valued function calls are not allowed.
开始是这样调用的:select * from [LinkedServer].[db name].dbo.[function name](param1, param2) 原因: Only table-v ...
- 黑盒测试实践--Day3 11.27
黑盒测试实践--Day3 今天完成任务情况: 收到小组紧急通知,作业要求更新了.组长召集大家在下午课后去开个短会,会议信息如下: 时间:11.27 晚上5:30 地点:东九楼501 会议内容: 学习了 ...
- 转:Linux awk 命令 说明
一. AWK 说明 awk是一种编程语言,用于在linux/unix下对文本和数据进行处理.数据可以来自标准输入.一个或多个文件,或其它命令的输出.它支持用户自定义函数和动态正则表达式等先进功能,是 ...
- css总结9:内边距(padding)和外边距(margin)
1 css总结9:内边距和外边距 通过css总结8:盒子模型可知:内边距(padding),外边距(margin).可以影响盒子在浏览器的位置. 1.1 padding使用:{padding:上 右 ...
- LightOJ 1038 Race to 1 Again (概率DP,记忆化搜索)
题意:给定一个数 n,然后每次除以他的一个因数,如果除到1则结束,问期望是多少. 析:概率DP,可以用记忆公搜索来做,dp[i] = 1/m*sum(dp[j] + 1) + 1/m * (dp[i] ...
- Linq学习<一>
lambda查询语法: var result =arrarylist.where(n=>n.contains("l")) 简化的委托方法实例 linq查询结构: var ...
- Extjs Hello extjs
<html > <head runat="server"> <title></title> <link rel="s ...
- 用ActionBar的ActionProvider的时候报错:cannot be cast to android.view.ActionProvider
在用ActionBar的自定义ActionProvider的时候有时候会遇到以下的报错:
- C#操作excel打印
using System; using System.Data; using System.IO; using System.Runtime.InteropServices; using System ...