vue组件创建的三种方式小结


Posted in Javascript onFebruary 03, 2020

1.使用Vue.extend创建全局的Vue组件

//1.1 使用vue.extend创建组件
var com1 = Vue.extend({
  //通过template属性指定组件要展示的html结构 
  template : "<h3>使用vue.extend创建的组件</h3>"  
})
//1.2使用Vue.component('组件名称',创建出来的组件模板对象)
Vue.component('myCom1',com1)

把名称以标签的形式放到页面中<my-com1></my-com1>

注意,上边我们组件名称使用的是驼峰命名法,在写到页面中必须将大写的驼峰字母变成小写,标签中不允许使用大写,然后在中间用 "-" 连接,如果不使用驼峰,则直接拿名称引用即可。

2.直接使用Vue.component创建组件

在上边的基础上,我们可以直接把com1的内容写到Vue.component中。

Vue.component('com2',{

template : "<h3>这是直接Vue.component创建的组件</h3>"

})

还是使用标签的形式在页面中引用。

无论使用哪种形式创建出来的组件template中有且只有一个根元素

3.使用模板

Vue.component("com3",{
  template : '#temp1' 
})

在被控制的#app外部,使用template元素,定义组件的模板HTML结构

<template id="temp1">
  <div>
    <h1>好用,有代码提示快捷键</h1>
  </div>
</template>

还是使用标签的形式在页面中引用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
Vuex模块化应用实践示例
Feb 03 #Javascript
微信小程序8种数据通信的方式小结
Feb 03 #Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 #Javascript
javscript 数组扁平化的实现
Feb 03 #Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 #Javascript
JavaScript中的类型检查
Feb 03 #Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 #Javascript
You might like
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
表单复选框向PHP传输数据的代码
2007/11/13 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
python pandas cumsum求累计次数的用法
2019/07/29 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
办公室文员岗位职责
2015/02/04 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
业务员管理制度范本
2015/08/06 职场文书
初中班主任心得体会
2016/01/07 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
MySQL8.0.18配置多主一从
2021/06/21 MySQL
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
聊聊redis-dump工具安装问题
2022/01/18 Redis