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

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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 怎么创建组件及组件使用方法

    什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 我知道vue中核心就是组件,但是组件是什么呢?组件有什么用呢? 这里来说说怎么用组件?怎么样创建自己的组件?: 1)创建自己的组件 通过vue.extend("template");通过vue构造器去拓展一个模板,

  • 详解如何创建并发布一个 vue 组件

    详解如何创建并发布一个 vue 组件

    步骤 创建 vue 的脚手架 npm install -g @vue/cli vue init webpack 绑定 git 项目 cd existing_folder git init git remote add origin http://gitlab.alipay-inc.com/ampg/my-projec.git git add . git commit git push -u origin master 写组件 创建组件 src/components/xxx.vue 例如: <te

  • Vue组件创建和传值的方法

    ## 创建组件的3种方法 # 第一种:  + Vue.extend()函数返回一个组件的构造器,里面包含一个参数,参数是对象,对象里面是一些配置项 + Vue.component()函数利用Vue.extend()返回的构造器创建一个组件的实例,有两个参数.; 参数1:组件名字,参数2:组件构造器 注意:       模板template中只能有一个根节点 组建的名字采用驼峰命名的话,使用时,就要加上"-"; 例如:组件名字indexA-->index-a; ## 第二种:  +

  • 详细讲解如何创建, 发布自己的 Vue UI 组件库

    详细讲解如何创建, 发布自己的 Vue UI 组件库

    前言 在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI_, _Vuetify 等. 只需一行命令, 即可方便的将这些库引入我们当前的项目: npm install vuetify // or yarn add vuetify 但是当我们自己开发了一个 _UI Component_, 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对吗? 这样做是很方便, 但是有两个问题: 当该 component 需要更新时, 我们需要手动维

  • vue点击按钮动态创建与删除组件功能

    vue点击按钮动态创建与删除组件功能

    主要功能需求点: 点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示 点击右侧创建的组件中的删除按钮,删除对应的组件 删除对应的组件之后,下方的组件位置自动上移 效果图: 代码: 父组件代码(去除了css样式代码): <template> <div class="home"> <div class="container"> <div class="addZujian"> <div>

  • Vue创建头部组件示例代码详解

    Vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title

  • Vue 创建组件的两种方法小结(必看)

    创建组件的两种方法小结 1.全局注册 2.局部注册 var child=Vue.extend({}) var parent=Vue.extend({}) Vue.extend() 全局方法 生成构造器,创建子类 使用基础 Vue 构造器,创建一个"子类". 这样写非常繁琐.于是vue进行了简化 使用Vue.component()直接创建和注册组件: Vue.component(id,options) 全局方法 用来注册全局组件 id 是string类型,即是注册组件的名称 option

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

    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) 把名称以标签的形式放到页面中<m

  • 详解vue组件通信的三种方式

    1. 第一种方式就是官方推荐的 官方推荐方式 有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线. 本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bu

  • Vue引入并使用Element组件库的两种方式小结

    目录 前言 Element-ui(饿了么ui) 安装element-ui 引入element-ui 完整引入element-u 按需引入element-ui 总结 前言 在开发的时候,虽然我们可以自己写css或者js甚至一些动画特效,但是也有很多开源的组件库帮我们写好了.我们只需要下载并引入即可. vue和element-ui在开发中是比较般配的,也是我们开发中用的很多的,下面就介绍下如何在eue项目中引入element-ui组件库 Element-ui(饿了么ui) element-ui(饿了

  • vue使用 vue-socket.io三种方式及踩坑实例解析

    目录 前言 安装 使用方式一 (官方用法)[全局挂载,不验证] 使用方式二 (组件挂载使用)[可验证] 使用方式三 (全局挂载使用)[可验证] 使用方式推荐 nodejs服务端本地demo代码 总结 前言 vue项目实时通信实现常用方式: 一.原生HTML5 WebSocket实现,vue中使用websocket 二.插件socket.io官网 ,Socket.io是一个WebSocket库,包括了客户端js和服务器端的nodejs,会自动根据浏览器从WebSocket.AJAX长轮询.Ifra

  • vue请求数据的三种方式

    请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据 介绍:vue-resource请求数据方式是官方提供的一个插件 使用步骤: 1.安装vue-resource模块 cnpm install vue-resource --save 加--save是为了在package.json中引用,表示在生产环境中使用.因为我们在日常开发中,如果我们要打包代码给其他人或者上传到github,又或者要发布代码时,pa

  • MySQL复制表的三种方式(小结)

    复制表结构及其数据 下面这个语句会拷贝数据到新表中. 注意:这个语句其实只是把select语句的结果建一个表,所以新表不会有主键,索引. create table table_name_new as (select * from table_name_old); 只复制表结构 create table table_name_new as select * from table_name_old where 1=2; 或者 create table table_name_new like tabl

  • Spring配置数据源的三种方式(小结)

    Spring配置数据源的三种方式(小结)

    目录 一.前言 三.开发数据源的方式 方式1:手动输入 方式2:Properties配置文件 方式3:Spring配置数据源 四.总结 一.前言 今天学习了用spring配置Druid数据源的三种方式,整理了学习笔记,希望大家喜欢! 二.数据源的作用 数据源(连接池)是提高程序性能如出现的 事先实例化数据源,初始化部分连接资源 使用连接资源时从数据源中获取 使用完毕后将连接资源归还给数据源 常见的数据源:DBCP.C3P0.BoneCP.Druid等等,本文主要以Druid数据源为案例实现Spr

  • 前端vue中文件下载的三种方式汇总

    目录 前端vue中文件下载的三种方式 附:vue实现图片或文件下载功能实例 总结 前端vue中文件下载的三种方式 第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <div name="downloadfile" onclick="downloadE

  • Shell 脚本自动输入密码的三种方式小结

    目录 方式一 方式二 方式三 注意,如果创建.sh文件后不可以执行,请执行sudo chmod 755 文件名.sh来修改权限. 方式一 使用 echo “密码” | (管道符) 使用场景: sudo 命令 在使用普通用户执行 root 命令时有时候会需要输入密码,并且在输入密码后一段时间不需要再次输入(但是不影响),这时候可以使用 echo "密码" | sudo 命令 比如我需要一键清空服务器,则可以创建一个clear.sh文件(假使我的密码是 123456): echo &quo

  • Vue显示图片的几种方式小结

    目录 前言 使用原生img标签 使用ElementUI的Avatar 总结 前言 最近在做自己的项目,有这么一个需求,用户列表需要展示用户的头像,之前一直没有处理,趁着这次机会,正好分享下我的解决过程. 头像这一栏空荡荡的,我这种强迫症患者难受死! 首先声明下,我的数据列表是查询数据库接口返回的,那么我头像路径也是保存在数据库的: 我先去网上随便搜了点图片入库里面,先让他能正常展示着,后面有空了再改为通过接口动态上传展示. 使用原生img标签 我们可以直接使用img标签去实现.通过它的src属性

随机推荐