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对象自带的一些函数,来实现动态 ...
随机推荐
- Opencv图片明暗处理
Opencv图片明暗处理 #include <iostream> #include <opencv2/opencv.hpp> using namespace std; usin ...
- 在tomcat下context.xml中配置各种数据库连接池
作者:郑文亮 Tomcat6的服务器配置文件放在 ${tomcat6}/conf 目录底下.我们可以在这里找到 server.xml 和 context.xml.当然,还有其他一些资源文件.但是在在本 ...
- WAV相关:从PCM16 Little Endian数据转WAV文件
数据格式 [0.0, -0.0, -0.0, 0.0, 0.0, 0.0, 5.960464477539063e-08, 5.960464477539063e-08, 1.19209289550781 ...
- Swift4.0复习特性、编译标志和检查API的可用性
1.Swift中的特性: @引出,后面紧跟特性名,圆括号带参数即可. @attribute(args) avaiable: 指明对象,函数,类型的可用性. @available(iOS 10.0, m ...
- 【Leetcode_easy】1128. Number of Equivalent Domino Pairs
problem 1128. Number of Equivalent Domino Pairs solution1: 不明白为什么每个元素都要加上count: class Solution { pub ...
- AWS 数据库（七）
数据库概念 关系型数据库 关系数据库提供了一个通用接口,使用户可以使用使用 编写的命令或查询从数据库读取和写入数据. 关系数据库由一个或多个表格组成,表格由与电子表格相似的列和行组成. 以行列形式存储 ...
- 一个栈的入栈序列为ABCDEF，则不可能的出栈序列是
技术之瞳 阿里巴巴技术笔试心得习题2.65: 一个栈的入栈序列为ABCDEF,则不可能的出栈序列是(D) A.DEFCBA B.DCEFBA C.FEDCBA D.FECDBA E.ABCDEF ...
- 033 Android App启动的闪屏效果+新手向导(多个图片滑动效果)+ViewPager使用
1.目标效果 App启动时,出现闪屏效果(利用动画实现). App新手使用时,会出现新手向导效果. 2.XML页面布局 (1)闪屏页面 <?xml version="1.0" ...
- [Asp.Net Core] - 使用 ViewComponents 实现分页控件
分页控件(定义分页参数) ~/ViewComponents/PaginationViewComponent.cs using HelloWorld.DataContext; using Microso ...
- python---pth包路径
为依赖包添加环境变量 (这一步很关键)PYTHONPATH C:\tensorflow\models\research;C:\tensorflow\models\research\slim6.然后并没 ...