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获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
Javascript的闭包详解
Dec 26 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 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实现mysql数据库连接操作及用户管理
2015/11/08 PHP
phalcon框架使用指南
2016/02/23 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
Js注册协议倒计时的小例子
2013/06/24 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python进阶教程之循环对象
2014/08/30 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python中requests和https使用简单示例
2018/01/18 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
房地产出纳岗位职责
2013/12/01 职场文书
家长会主持词开场白
2014/03/18 职场文书
中学教师师德承诺书
2014/05/23 职场文书
物理学专业求职信
2014/07/04 职场文书
先进工作者个人总结
2015/02/15 职场文书
小学教师求职信范文
2015/03/20 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Python实现对齐打印 format函数的用法
2022/04/28 Python