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（短横线命名）的更多相关文章

  1. vue组件中的驼峰命名和短横线命名

    参考链接:https://www.jianshu.com/p/f12872fc7bfb

  2. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

  3. vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  4. vue组件中的样式属性--scoped

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...

  5. vue组件中使用iframe元素

    需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...

  6. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  7. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  8. vue组件中的data为什么是函数？

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  9. 第七十三篇：解决Vue组件中的样式冲突

    好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...

随机推荐

  1. ORACLE-1：虚拟列影响alter修改表字段操作!

    一.问题: 昨天想要修改Oracle数据库中某张表的某个字段,发现怎么都修改不成功!!!并给出了如下提示: ORA-54031:要删除或修改的列由某个虚拟列表达式使用 二.啥是“虚拟列” [不可见的列 ...

  2. Alpha冲刺（三）

    Information: 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Details: 组员1(组长)柯奇豪 过去两天完成了哪些任务 ssm框架的使用并实现简单的数据处理 ...

  3. Android下拉选择框之PopupWindow

    1.效果图 2.思路分析 1.点击弹出对话框 popupwindow 2.对popupwindow进行相关设置,popupwindow中设置view为listview 3.listview中item设 ...

  4. window phone 8资源管理器打开文件

    一.打开安装包里面文件: StorageFolder sf = Package.Current.InstalledLocation;//ApplicationData.Current.LocalFol ...

  5. xmlreader与xmlwriter里的几个坑与解决方案

    加载超过100M的xml文件时(可能不是很常见),XmlDocument这种全部加载到内存里的模式就有点不友好了,耗时长.内存高. 这时用xmlreader就会有自行车换超跑的感觉,但其间遇到几个坑, ...

  6. Ajax GET

    $ajax的post请求提交方式: Controller: @RequestMapping("/emps") @ResponseBody public Msg getEmps(@R ...

  7. NSRange 范围

    前言 结构体,这个结构体用来表示事物的一个范围,通常是字符串里的字符范围或者集合里的元素范围. typedef struct _NSRange { NSUInteger location; // 表示 ...

  8. 「CF622F」The Sum of the k-th Powers「拉格朗日插值」

    题意 求\(\sum_{i=1}^n i^k\),\(n \leq 10^9,k \leq 10^6\) 题解 观察可得答案是一个\(k+1\)次多项式,我们找\(k+2\)个值带进去然后拉格朗日插值 ...

  9. leecode刷题（3）-- 旋转数组

    leecode刷题(3)-- 旋转数组 旋转数组 给定一个数组,将数组中的元素向右移动 K 个位置,其中 K 是非负数. 示例: 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5, ...

  10. [AGC005C]Tree Restoring 构造

    Description ​ 给出一个数组a,要求构造一颗树,使节点x距离最远的点的距离为\(a_x\). Input ​ 第一行一个正整数NN(2≤N≤1002≤N≤100) ​ 接下来一行,有NN个 ...