vue组件的写法汇总


Posted in Javascript onApril 12, 2018

数据驱动和组件化是vue.js两个最重要的特点。组件化是为了方便代码复用,提高开发效率。常见的vue组件写法有四种,各有特色,适用于不同的场景。

1、全局组件

结构:

// 组件的注册 
Vue.component( 'componentName', { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
// 组件的使用 
new Vue({ 
 el: '#app' 
})

在script标签内通过Vue.component()定义一个全局组件,并通过new Vue()实例将组件应用到html文件中id为app的标签内。

特点:

<1>可以直接在html文件中的script标签内直接定义与使用;

<2>通过该方法定义的组件是全局组件,在任何Vue实例下都可以使用,适合项目比较简单的场景;

<3>每次定义组件时都要重新使用Vue.component(),且组件名不能相同;

实例:

Welcome组件

2、局部组件

结构:

// 构造组件对象 
const componentName = { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
// 组件的使用 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

在script标签中通过定义一个组件对象,并通过Vue实例中components属性将该组件注册调用。

特点:

<1>与全局方式定义的组件相似,都可以直接在html文件中的script标签中直接书写组件与使用;

<2>只有在注册过的Vue实例中才能使用该组件;

实例:

Welcome组件

3、使用template标签

结构:

<template id="componnet"> 
 // 组件的html结构 
</template> 
// 全局组件的注册与使用 
Vue.component( 'componentName', { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
new Vue({ 
 el: '#app' 
}) 
// 局部组件的注册与使用 
const componentName = { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

使用template标签将组件中的html结构写在body标签内部,在script标签内按照全局组件和局部组件的方式注册与使用。不同之处在于组件中template属性是通过id引用。

特点:

<1>js文件中不包含html结构内容,实现结构与逻辑分离;

实例:

Welcome组件

4、单文件组件

结构:

<template lang="html"> 
 // 组件中的html结构 
</template> 
<script> 
 //组件的逻辑 
 export default { 
 // 组件的属性和方法 
 } 
</script> 
<style lang="css" scoped> 
 // 组件的样式 
</style>

创建一个尾缀为vue的文件,文件名即为组件名。组件内包含三部分内容:html结构、js逻辑、css样式,分别对应于不同的标签。使用时组件时,通过import引入即可使用。

特点:

<1>组件与组件之间互不影响,复用性高,其html、css、js均可复用;

<2>组件的结构、逻辑清晰;

<3>适用于大型复杂项目,适合多人开发;

实例:

Welcome组件

!!!需要注意的是:template标签内必须用一个标签将所有的标签包裹,否则会报错

正确的写法:

<template> 
 <div> 
 <div></div> 
 ...... 
 <div></div> 
 </div> 
</template>

错误的写法:

<template> 
 <div></div> 
 <div></div> 
 ...... 
 <div></div> 
</template>

总结

以上所述是小编给大家介绍的vue组件的写法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js word表格动态添加代码
Jun 07 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
JS实现拖动示例代码
Nov 01 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
基于React+Redux的SSR实现方法
Jul 03 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 #jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 #Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 #Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 #Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 #jQuery
Koa项目搭建过程详细记录
Apr 12 #Javascript
React props和state属性的具体使用方法
Apr 12 #Javascript
You might like
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
js实现漫天星星效果
2017/01/19 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Python中存取文件的4种不同操作
2018/07/02 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python web框架 django wsgi原理解析
2019/08/20 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
标记环介质访问控制协议
2016/03/27 面试题
Overload和Override的区别
2012/09/02 面试题
医学生实习自我鉴定
2013/09/27 职场文书
实习单位接收函
2014/01/11 职场文书
工作过失检讨书
2014/02/23 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
主要负责人任命书
2014/06/06 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书