前言
本文章记录,跟b站动力节点 老杜视频学Vue 的笔记
一、什么是组件和组件化
组件:是构建用户界面的可复用和独立的模块。可以将组件看作是一种自定义的 HTML 元素,它可以包含自己的模板、样式和逻辑。
组件化:是指将一个复杂的应用程序或页面拆分成多个小组件的过程。每个组件都有自己的职责和功能,并可以相互配合形成完整的应用程序。通过将应用程序拆分为多个组件,可以提高代码的可维护性、复用性和可测试性。
在 Vue 中,可以使用 Vue.component() 函数创建组件,并在其他组件或应用程序中引用和使用它们。每个组件可以有自己的数据、方法、生命周期钩子等。组件可以通过 props 接收父组件传递的数据,并通过事件向父组件发送消息。
组件化使得开发人员能够更好地组织和管理代码,减少了代码的重复性,同时也提供了更灵活、可扩展的开发方式,以及更好的分工协作能力。在复杂的应用程序中,组件化可以帮助我们快速开发、维护和优化代码。
第一个组件
注意事项如下图:
编写组件可分为以下三步骤:
第一步:在标签script中定义组件变量 const myComponent = Vue.extend({ template:·编写需要的标签·
data(){
return obj // 这里返回的的值是一个对象,类似new Vue 中的data 配置项
}
})
第二步:在vm对象中注册对象(这里先局部注册),需要用到新的配置项components:{组件名:组件变量,
}
第三步:使用自己注册的组件,在body中需要的地方使用自己定义的组件名,以标签的形式使用即可
具体案例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个组件</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="mydiv">
<h1>{{msg}}</h1>
<objli></objli>
</div>
<script>
const myComponent =Vue.extend({
template:`
<ul>
<li v-for="(obj,index) in objs" :key="obj.age">
{{obj.name}},{{index}}
</li>
</ul>
`,
data(){
return {
objs: [
{'name':'cyh','age':23},
{'name':'chh','age':22},
{'name':'cyy','age':21}
]
}
}
})
const vm =new Vue({
el: '#mydiv',
data:{
msg:"第一个组件",
},
// 局部注册
components:{
objli : myComponent,
}
})
</script>
</body>
</html>
第二个组件(全局注册)
细节:
1.Vue.extend()可以省略
2.组件的名字
第一种;全部小写
第二种:首字母大写,后面都是小写
第三种: kebab-case命 名法(串式命名法。例如: user- login)
第四种: CamelCase命 名法(驼峰式命名法。例如: UserLogin) ,但是这种方式只允许在脚手架环境中使用。
3.注册全局组件的方法:Vue.component(“组件名”,组件变量)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>熟练测试组件的写法</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="mydiv">
<h1>{{msg}}</h1>
<persons_li></persons_li>
</div>
<script>
const MyComponent = {
template:`
<ul>
<li v-for="(value,index) in persons" :key="value.id">
{{value.name}}
</li>
</ul>
`,
data(){
return {
persons:[{'id':2021,'name':'cyh'},{'id':2022,'name':'cyh2'}]
}
}
}
Vue.component("persons_li",MyComponent)
const vm =new Vue({
el: '#mydiv',
data:{
msg:"熟练测试组件的写法",
},
})
</script>
</body>
</html>