组件是什么
vue中认为 万物皆组件
组件是由html css js构建起来一个元素 组件一旦被构建就不能在改变
组件可以被复用
组件的使用
组件模板在vue2 只能有一个根元素
注意：
组件标签名 不能与已有的html标签名冲突
如果自定义的组件标签名 含有多个单词组成(一般建议使用中横线命名或者使用大驼峰或者小驼峰)
在html页面中调用时候 需要统一将小驼峰或者大驼峰转化为中横线调用
原因：HTML不区分大小写
例如：
Vue.component("TestDemo", {
template: `
<元素标签>
内容
</元素标签>
`
})
<test-demo></test-demo>
组件注册分为两种：想要使用组件 你需要先注册
1 全局注册
Vue.component("自定义组件标签名", {
template: `
<元素标签>
内容
</元素标签>
`
})
<自定义组件标签名></自定义组件标签名> // 它所渲染的就是template里边所写的模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<test-demo></test-demo>
</div>
</body>
<script src="vue.min.js"></script>
<script>
// 第一个组件pP
Vue.component("testDemo", {
template: `
<div>
<p>cpu</p>
<p>硬盘</p>
<p>内存</p>
<div>
<ul>
<li>显卡</li>
</ul>
</div>
</div>`
})
new Vue({
el: "#app",
data: {
}
})
</script>
</html>
扫一扫
5223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
