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 相关文章推荐
js获取网页高度(详细整理)
Dec 28 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
深入理解(function(){... })();
Aug 16 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
vue实现购物车加减
May 30 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
Javascript实现打鼓效果
Jan 29 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Python反射用法实例简析
2017/12/22 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
出国留学介绍信
2014/01/13 职场文书
八项规定整改方案
2014/02/21 职场文书
中考冲刺决心书
2014/03/11 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
会计工作检讨书
2015/02/19 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python