vue 组件
程序员文章站
2022-03-21 20:33:56
定义组件名的方式有两种： 传值&传引用： 父组件向子组件传值： 子组件向父组件传值： 组件注册&引用： ①脚手架： 脚本: 实例： # test.html #test.js ......
1. 组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
2. 全局组件
<!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">
<h1 v-text="des"></h1>
<sidebar></sidebar>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
// 注册组件 （组件名，组件方法）
// 驼峰命名需要用横杠隔开 sideBar => side-bar
Vue.component('sidebar', {
template: `
<div>
<h1>这个是即将被挂载的组件</h1>
<h2> {{side}} </h2>
</div>
`,
// 自定义组件里的方法
data() {
return {
side: '这是组件自己的内容'
}
}
})
new Vue({
el: '#app',
data() {
return {
des: 'Vue',
}
}
})
</script>
</body>
</html>
3. 局部组件
<!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">
<h1 v-text="des"></h1>
<sidebar></sidebar>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
des: 'Vue',
}
},
// 局部组件
components: {
sidebar: {
template: `
<div>
<h1>这个是即将被挂载的组件</h1>
<h2> {{side}} </h2>
</div>
`,
data() {
return {
side: '这是组件自己的内容'
}
}
}
}
})
</script>
</body>
</html>
4. 模板标签 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">
<h1 v-text="des"></h1>
<template>
<div>
hello vue
</div>
</template>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
des: 'Vue',
}
},
})
</script>
</body>
</html>
本文地址：https://blog.csdn.net/gklcsdn/article/details/109274957
上一篇： CSS基础知识（颜色、伪类、盒子模型）
下一篇： 进化的贪吃蛇（一）