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对象自带的一些函数,来实现动态 ...
随机推荐
- wpf程序，只允许运行一个程序实例问题
https://bbs.csdn.net/topics/390486402 https://codereview.stackexchange.com/questions/20871/single-in ...
- 我的一个PLSQL函数 先查询再插入数据库的函数 动态SQL拼接查询条件、通用游标、记录定义(封装部分查询字段并赋值给游标)、insert select 序列、常量【我】
先查询再插入数据库的函数 CREATE OR REPLACE FUNCTION F_REVENUE_SI(l_p_cd in Varchar2, l_c_cd in Varchar2, l_prod_ ...
- 利用postman生成各种编程语言的代码
原文来源:https://learning.getpostman.com/docs/postman/sending_api_requests/generate_code_snippets/ 在Post ...
- Egret的第三方库制作，以及在大型项目中的应用
目录: 一 创建第三方库 二 TypeScript库 三 JavaScript库 四 第三方库制作在大型RPG中的实际应用 参考: 第三方库的使用方法 目标: 本文目的是将现有游戏的框架制作成第三方库 ...
- Django架站的16堂課
Django架站的16堂課-活用Django+Web+Framework快速构建移动网站 目录 第1堂 网站开发环境的建立 1 1.1 网站的基础知识 1 1.1.1 网站的运行流程 1 1.1.2 ...
- SegNet
Paper link:https://arxiv.org/pdf/1511.00561.pdf Motivation:为了实际应用,主要是在时间效率和存储空间上做了改进: Introduction: ...
- CentOS 6 新装服务器部署流程
1.设置时区 rm -f /etc/localtime cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 2.配置内网IP (如果是外网IP,li ...
- Python机器学习基础教程-第2章-监督学习之决策树
前言 本系列教程基本就是摘抄<Python机器学习基础教程>中的例子内容. 为了便于跟踪和学习,本系列教程在Github上提供了jupyter notebook 版本: Github仓库: ...
- 第07组 Alpha冲刺（2/4）
队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:完成人员分配,初步学习Android开发 Github签入记录 接下来的计划:继续完成Android开发的学习,带领团队进行前后端开 ...
- Appium移动自动化测试-----（九） appium API 之应用操作
1.安装应用 方法: installApp() 安装应用到设备中去.需要apk包的路径. driver.installApp("path/to/my.apk"); driver.i ...