vue创建组件的几种方法
<html> <head>
<title>vue创建组件</title>
<meta charset="utf-8">
</head> <body>
<div id="app">
<my-com1></my-com1>
<my-com2></my-com2>
<my-com3></my-com3>
</div>
<div id="app2">
<private></private>
</div>
<template id="temp1">
<div>
<h3>这是通过template元素在外部定义的组件结构</h3>
</div>
</template>
<template id="temp2">
<div>
<h3>这是一个私有组件</h3>
</div>
</template>
</body>
<!-- 这里请引入cdn或者是下载到本地的vue.js -->
<script src="node_modules\vue\dist\vue.js"></script>
<script>
//ps:组件模板只能有一个根元素
//一、创建全局的组件
//方式1 使用中间变量
//1.1使用extend创建
var com1 = Vue.extend({
template:'<h3>这是使用Vue.extend创建的组件</h3>'
})
//1.2使用Vue.component(),定义组件的名称
Vue.component('myCom1',com1);//使用驼峰命名是则在引用时就需将大写的字符变为小写，并以-连接两个单词，不使用则引用时标签名与定义一致
//方式2 不使用中间变量
Vue.component('myCom2',Vue.extend({
template:'<h3>这是使用Vue.component创建的组件</h3>'
}))
//更简洁的方式
Vue.component('mycom2',{
template:'<h3>这是使用Vue.extend创建的组件</h3>'
})
// 方式3 通过在template元素，在被控制的#app外面定义组件的模板
Vue.component('myCom3',{
template:'#temp1'
})
let vm = new Vue({
el: "#app",
data:{ }
});
//二、创建私有组件
let vm2 = new Vue({
el: "#app2",
data:{ },
components:{
private:{
template:"#temp2"
}
}
});
</script> </html>
效果：
vue创建组件的几种方法的更多相关文章
- Vue 创建组件的两种方法
地址:https://blog.csdn.net/cofecode/article/details/74634301 创建组件的两种方法 1.全局注册 2.局部注册 var child=Vue.ext ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- Vue创建组件的三种方式
1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"> <!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入 ...
- Vue 创建组件的方式
Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015 版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...
- java创建线程的三种方法
这里不会贴代码,只是将创建线程的三种方法做个笼统的介绍,再根据源码添加上自己的分析. 通过三种方法可以创建java线程: 1.继承Thread类. 2.实现Runnable接口. 3.实现Callab ...
- Solr创建Core的两种方法
创建Core的两种方法: 第一种方法: 1.打开dos命令窗口,切换目录到${solr.home}\bin,然后输入:solr create -c corename之后回车: 2.打开solr安装文件 ...
- 进程和创建线程的两种方法(threading.Thread)
进程 如QQ 要以一个整体的形式暴露给操作系统管理,里面包含对各种资源的调用,内存的管理, 网络接口的调用等,进程就是各种资源管理的集合 线程:是操作系统最小的调度单位,是一串指令的结合 进程 要操作 ...
- Java中创建数组的几种方法
Java中创建数组的几种方法 public static void main(String[] args) { //创建数组的第一种方法 int[] arr=new int[6]; int intVa ...
- JS动态创建元素（两种方法）
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
随机推荐
- OctetString 转String
/// <summary> /// OctetString转时间 /// </summary> /// <param name="ss">字符串 ...
- 008-SpringBoot发布WAR启动报错：Error assembling WAR: webxml attribute is required
一.Spring Boot发布war包流程: 1.修改web model的pom.xml <packaging>war</packaging> SpringBoot默认发布的都 ...
- 算法习题---5.1大理石在哪（UVa10474）
一:题目 现有N个大理石,每个大理石上写了一个非负整数.首先把各数从小到大排序,然后回答Q个问题.每个问题问是否有一个大理石写着某个整数x,如果是,还要回答哪个大理石上写着x.排序后的大理石从左到右编 ...
- 【Linux】宝塔上 GitLab数据迁移修改配置后nginx无法启动
背景: 服务器A 向 服务器B 迁移数据,修改配置重启.发现gitlab的 nginx 无法启动. 查找原因 gitlab-ctl tail 错误信息: 网上查了查,似乎是宝塔的问题, 原因应该是为了 ...
- Qt编写气体安全管理系统6-地图监控
一.前言 地图监控主要是提供一个地图(可以是平面的也可以是立体彩色的,一般建议鸟瞰图,有3D感),然后设备在对应的地图上,可以切换地图来查看对应区域的设备,一般来说一个区域会有一个地图文件,设备在地图 ...
- auto和decltype的用法总结
一, auto 1, auto的作用 一般来说, 在把一个表达式或者函数的返回值赋给一个对象的时候, 我们必须要知道这个表达式的返回类型, 但是有的时候我们很难或者无法知道这个表达式或者函数的 ...
- 报错：Exception: org.apache.sqoop.common.SqoopException Message: DRIVER_0002:Given job is already running - Job with id 1
报错背景: 创建完成job之后,执行job的时候报错. 报错现象: Exception: org.apache.sqoop.common.SqoopException Message: CLIENT_ ...
- Swift4.0复习扩展
1.扩展计算式属性: 2.对方法进行扩展: /// 定义枚举类型Light, /// 它指定了基本类型String enum Light: String { case red = "red& ...
- 智能指针.Qt测试
1.Qt598x64vs2017(或 Qt598x86vs2015[配置使用vs2017]).Win10x64 2.测试代码: 2.1.MainWindow.h class MainWindow : ...
- android基础---->传感器的使用
现在每部Android 手机里面都会内置有许多的传感器,它们能够监测到各种发生在手机上的物理事件,而我们只要灵活运用这些事件就可以编写出很多好玩的应用程序.今天我们开始简单的传感器使用的学习. 目录导 ...