黑马vue---56-58、vue组件创建的三种方式
2024-09-02 02:35:21
黑马vue---56-58、vue组件创建的三种方式
一、总结
一句话总结:
不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
1、使用 Vue.extend 来创建全局的Vue组件?
Vue.component('mycom1', Vue.extend({
Vue.component('mycom1', Vue.extend({
template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
}))
2、使用vue的component方法直接创建?
Vue.component('mycom2', {
Vue.component('mycom2', {
template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'
})
3、使用template标签直接创建?
在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构
在 Vue.component中直接指定template: '#tmpl'即可
<!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构 -->
<template id="tmpl">
<div>
<h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
<h4>好用,不错!</h4>
</div>
</template> Vue.component('mycom3', {
template: '#tmpl'
})
4、vue引入组件的方式?
使用标签的形式,直接引入即可:比如<mycom2></mycom2>
Vue.component('mycom2', {
template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'
})
5、vue组件创建组件最便捷方式?
使用template标签直接在vue控制的区域之外创建,然后在 Vue.component中直接指定template: '#tmpl'即可
<!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构 -->
<template id="tmpl">
<div>
<h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
<h4>好用,不错!</h4>
</div>
</template> Vue.component('mycom3', {
template: '#tmpl'
})
二、vue组件创建的三种方式
1、使用 Vue.extend 来创建全局的Vue组件
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到页面中,即可 -->
<mycom1></mycom1>
</div> <script>
// 1.1 使用 Vue.extend 来创建全局的Vue组件
// var com1 = Vue.extend({
// template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性,指定了组件要展示的HTML结构
// })
// 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)
// Vue.component('myCom1', com1)
// 如果使用 Vue.component 定义全局组件的时候,组件名称使用了 驼峰命名,则在引用组件的时候,需要把 大写的驼峰改为小写的字母,同时,两个单词之前,使用 - 链接;
// 如果不使用驼峰,则直接拿名称来使用即可;
// Vue.component('mycom1', com1) // Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的
// 第二个参数: Vue.extend 创建的组件 ,其中 template 就是组件将来要展示的HTML内容
Vue.component('mycom1', Vue.extend({
template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
})) // 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body> </html>
2、使用vue的component方法直接创建
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<!-- 还是使用 标签形式,引入自己的组件 -->
<mycom2></mycom2>
</div> <script>
// 注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
Vue.component('mycom2', {
template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'
}) // 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body> </html>
3、使用template标签直接创建
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<mycom3></mycom3>
<!-- <login></login> -->
</div> <div id="app2">
<mycom3></mycom3>
<login></login>
</div> <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构 -->
<template id="tmpl">
<div>
<h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
<h4>好用,不错!</h4>
</div>
</template> <template id="tmpl2">
<h1>这是私有的 login 组件</h1>
</template> <script>
Vue.component('mycom3', {
template: '#tmpl'
}) // 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
}); var vm2 = new Vue({
el: '#app2',
data: {},
methods: {},
filters: {},
directives: {},
components: { // 定义实例内部私有组件的
login: {
template: '#tmpl2'
}
}, beforeCreate() { },
created() { },
beforeMount() { },
mounted() { },
beforeUpdate() { },
updated() { },
beforeDestroy() { },
destroyed() { }
})
</script>
</body> </html>
最新文章
- Nginx配置文件
- C# LIST列表的使用
- Python 之 使用 PIL 库做图像处理
- Nessus漏洞扫描教程之配置Nessus
- 生产者与消费者(一)---wait与notify
- VisualStudio2015内置LocalDB
- English learning method ---学英语重中之重打通“任督二脉”
- MYSQL经常使用命令列表
- july教你如何迅速秒杀掉:99%的海量数据处理面试题
- yii2发送邮件(配置QQ版本)
- webApi签名验证
- 在react中引入下拉刷新和上拉加载
- Ansible第一章:基础认识--小白博客
- 用户认证:基于jwt和session的区别和优缺点
- final域的内存语义
- <;转>;jmeter(二十二)内存溢出原因及解决方法
- tcp面试题
- Android自定义View学习笔记(一)
- CentOS6.8_64位手动安装MySQL5.6
- cloudstack api调用python
热门文章
- 正则限制input负数输入
- TLS1.3&;TLS1.2形式化分析(二)
- Scyther-Semantics and verification of Security Protocol 翻译 (第二章 2.2.2----2.3)
- Linux高级网络设置——给网卡绑定多个IP
- SSL/TLS 受诫礼(BAR-MITZVAH)攻击漏洞(CVE-2015-2808)
- 数组和集合转化 array与list
- 捷克200套UR51出货新版本FTP问题(FTP主动模式无法正常传输数据问题)
- 系统---添加一个相机的IP实现opencv读取rstp视频流
- Ubuntu系统---终端下用g++进行c++项目
- linux getpid _getpid()