vue组件命名和props命名代码详解
<!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命名的全部知识点内容,感谢大家的学习和对我们的支持。
相关推荐
-
Vue组件化(ref,props, mixin,.插件)详解
目录 1.ref属性 2.props配置项 props总结 3.mixin混入 3.1.局部混入 3.2.全局混入 mixin混入总结 4.插件 插件总结 1.ref属性 被用来给元素或子组件注册引用信息(id的替代者) 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 使用方式: 打标识:<h1 ref="xxx">.....</h1>或 <School ref="xxx"></Schoo
-
Vue中的组件及路由使用实例代码详解
1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>
-
Vue.js子组件向父组件通信的方法实例代码详解
一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文
-
vue+Element-ui实现分页效果实例代码详解
当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div class="deit"> <div class="crumbs"> &l
-
vue组件之间的数据传递方法详解
(1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o
-
Element-ui tree组件自定义节点使用方法代码详解
工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <div class="sortDiv"> <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-
-
vue 地图可视化 maptalks 篇实例代码详解
Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发: - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了 上面是一段 maptalks 官方介绍,下面来创建工程.首先利用 vue-cli3 搭建一
-
vue 下列表侧滑操作实例代码详解
由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧.有点多 效果如图 <template> <div class="lottery-management-wrapper"> <ul> <li class="lottery-management-list-wrapper"> <div class="lottery-management-list" v-for="(item ,
-
vue中v-text / v-html使用实例代码详解
废话少说,代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例中的数据,事件和方法</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><
-
vue组件生命周期钩子使用示例详解
目录 组件生命周期图 组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图 组件生命周期钩子 所有的生命周期钩子自动绑定 一.组件的生命周期:一个组件从创建到销毁的整个过程 二.生命周期钩子:在一个组件生命周期中,会有很多特殊的
随机推荐
- jQuery Selectors(选择器)的使用(六、属性篇)
- 利用nginx解决跨域问题的方法(以flask为例)
- asp.net下Linq To Sql注意事项小结
- js判断数据类型如判断是否为数组是否为字符串等等
- js中confirm实现执行操作前弹出确认框的方法
- 黑帽seo劫持程序,js劫持搜索引擎代码
- 通过脚本清空标签p中的class名和style 原创
- js当一个变量为函数时 应该注意的一点细节小结
- nodejs初步体验篇
- CI(CodeIgniter)框架视图中加载视图的方法
- python fabric使用笔记
- 在Python中使用PIL模块处理图像的教程
- 一个Javascript 编写的代码编辑器
- JavaScript里实用的原生API汇总
- jQuery+slidereveal实现的面板滑动侧边展出效果
- JS验证逗号隔开可以是中文字母数字
- Java实现文件变化监控
- Android仿百度谷歌搜索自动提示框AutoCompleteTextView简单应用示例
- 易语言的优势总结
- Java 中引入内部类的意义?