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


Posted in Javascript onSeptember 01, 2019
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- post-title使用驼峰命名postTitle会报错 blog-post改为blogPost会报错 -->
    <blog-post post-title="hello!"></blog-post>
  </div>



  <script>
    Vue.component('blog-post', { //命名时候可以使用横线
     props: ['postTitle'],         //如果这里使用连接线post-title将报错
     template: '<h3>{{ postTitle }}</h3>'
    })

    new Vue({
      el:"#app",

    })
  </script>

</body>
</html>

总结 props里可使用驼峰命名但不能用横线,如果props使用驼峰 组件上将使用横线

vue组建命名 可以使用驼峰和横线, 如果使用驼峰 组建使用将采用横线使用

以上就是关于vue组件命名和props命名的全部知识点内容,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 #Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 #Javascript
vue中的v-if和v-show的区别详解
Sep 01 #Javascript
react中Suspense的使用详解
Sep 01 #Javascript
vue 实现微信浮标效果
Sep 01 #Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 #Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 #Javascript
You might like
PHP5 面向对象程序设计
2008/02/13 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
浅谈js闭包理解
2019/03/28 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Python requests获取网页常用方法解析
2020/02/20 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
六年级学生评语
2014/04/22 职场文书
活动总结怎么写啊
2014/05/07 职场文书
九年级化学教学反思
2016/02/22 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python