热门关键字:
jquery > jquery教程 > jquery教程 > 全局组件定义的三种方式

全局组件定义的三种方式

390
作者:管理员
发布时间:2021/6/15 18:12:15
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4942
  一、vue组件的优势


  1、我们在写一个页面的时候,时长会碰到一种样式,或者一块菜单栏之类的,它们在很多的页面都是一模一样的,如果我们每一个页面都写一遍的话,会造成巨大的浪费时间和精力,如果我们全部复制黏贴过去的话,后期的修改又会十分的痛苦,有没有办法能让我们将这一块通用的样式/菜单给封装起来,等到我们使用的时候,直接引入进来,就能正常的使用了,并且我们在维护的时候,只需要修改一个文件,就能完成整体的修改。组件这个概念就应运而生了


  组件具有的优势是:


  ① 提高开发效率


  ② 方便重复使用


  ③ 简化调试步骤


  ④ 提升整个项目的可维护性


  ⑤ 便于协同开发


  ⑥vue 中的组件是一个自定义标签形式,Vue.js的编译器为它添加特殊功能;vue也可以扩展原生的html元素,封装可重用的代码。


  二、vue组件的构建:这里以创建hearMenu为例


  1、创建文件夹hearMenu,文件夹里面创建文件:hearMenu.vue(主要的组件代码)以及hearMenu.css(组件的样式)


  下面是vue的主要内容:


  2、组件文件的引用


  在对应的页面/组件,引入需要的组件,引入了之后,需要在当前页面注册


  在当前页面注册成功之后,在引用的时候,需要留意这里是驼峰的写法,写在html的时候需要将它们拆分开来 ,不然会报错的。


  比如hearMenu→hear-menu


  这样就引入了你自己定义的组件了


  三、vue组件的注意事项


  1、js 中所有驼峰式命名属性在 HTML 中均须写成小写字母短横分隔的形式


  2、全局注册的优点在于所有的Vue实例都可以用,缺点在于权限太大,容错率降低(类似于JavaScript中的全局变量和局部变量)


  3、有多个单词时,推荐使用kebab-case (短横线分隔命名) ,字母全小写且必须包含一个连字符。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐