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 相关文章推荐
16个最流行的JavaScript框架[推荐]
May 29 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
原生JavaScript实现留言板
Jan 10 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
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
原生js封装添加class,删除class的实例
2017/11/06 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
python中安装django模块的方法
2020/03/12 Python
python对一个数向上取整的实例方法
2020/06/18 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
中间件分为哪几类
2016/09/18 面试题
即将毕业大学生自荐信
2014/01/24 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript