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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
如何使JavaScript休眠或等待
Apr 27 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
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
js实现点击烟花特效
2020/10/14 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
python文本数据相似度的度量
2018/03/12 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
Python列表(List)知识点总结
2019/02/18 Python
Python给图像添加噪声具体操作
2019/03/03 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
python如何输出反斜杠
2020/06/18 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
2014年元旦感言
2014/03/06 职场文书
文明演讲稿范文
2014/05/12 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
飞越疯人院观后感
2015/06/09 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android