Vue.js 注册组件
2024-10-21 13:38:19
<!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.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
</head> <body>
<div id="app">
<temp></temp>
<com1></com1>
<com3></com3>
</div> <div id="app2">
<temp1></temp1>
</div> <template id="add">
<h3>这是第三个组件</h3>
</template> </body>
<script>
// 定义全局变量的组件
//1 直接使用component
Vue.component('temp', {
template: '<h1>这是一个组件</h1>'
}) // 2 使用Vue.extend()定义一个组件
var com1 = Vue.extend({
template: '<h2>这是第二个组件</h2>'
})
Vue.component('com1', com1) //使用template标签 创建出来的组件
Vue.component('com3', {
template: '#add'
})
var vm = new Vue({
el: '#app',
data: { }, })
var vm2 = new Vue({
el: '#app2',
data: { },
components: {
//定义私有组件
temp1: {
template: '<h1>这是一个私有的组件,只能自己使用</h1>'
}
} })
</script> </html>
最新文章
- 一个有趣的CM
- Mysql的视图、存储过程、函数、索引全解析
- Android SDK Manager 无法下载更新,或者更新速度超慢,或者待安装包列表不显示
- ok6410 android driver(9)
- 关于0x000000c2问题解决方法
- String.valueOf(null) 报空指针
- QListWidget 去掉选中项
- 依赖注入(DI)有助于应用对象之间的解耦,而面向切面编程(AOP)有助于横切关注点与所影响的对象之间的解耦(转good)
- hp quicktestprofession ver-10.0(QTP)的入门使用指南
- C语言顺序栈
- Forward团队-爬虫豆瓣top250项目-项目总结
- Linux基础命令---lpc打印机控制
- ng-repeat不添加容器标签
- jenkins自动部署到tomcat报错:ERROR: Publisher hudson.plugins.deploy.DeployPublisher aborted due to exception
- [USACO08DEC]Trick or Treat on the Farm 记忆化搜索
- Javascript学习笔记--理解prototype
- 向Nexus仓库推送/使用各种组件
- 【commons-io】File对文件与目录的处理&;FileUtis,IOUtils,FilenameUtils工具的使用
- 手风琴图片和钢琴导航栏JQ滑动特效
- 确定有限自动机 valid number