个人名片:
作者简介:一名大二在校生
个人主页:坠入暮云间x
座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
**学习目标: 坚持每一次的学习打卡
今天的学习内容是vue的组件,让我们一起看下去吧!
不会安装VUE和配置的可以看这篇文章,up主写的很详细,也很适合新手
Vue安装与配置入门教程(非常详细)
在vue中,组件是可复用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。组件可大大提高了代码的复用率。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
![在这里插入图片描述](https://img-blog.csdnimg.cn/b4b7c6600add4050bd20de9a5162fccc.png
每个.vue
组件都分为三个组成部分:
template
:组件的模版结构script
:组件的JavaScript行为style
:组件的样式template
模板结构中应该只能包含一个根元素,因此若有多个应包含在一个大div中。顾名思义就是所有实例都可以进行使用的组件
注册全局组件语法:
Vue.component(tagName, options)
tagName
为组件名,options
为配置选项
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 全局组件title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
<runoob>runoob>
div>
<script>
// 注册
Vue.component('runoob', {
template: '自定义组件!
'
})
// 创建根实例
new Vue({
el: '#app'
})
script>
body>
html>
顾名思义就是只有小部分实例可以使用的组件
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部组件title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
head>
<body>
<div id="app">
<runoob>runoob>
div>
<script>
var Child = {
template: '自定义局部组件!
'
}
// 创建根实例
new Vue({
el: '#app',
components: {
// 将只在父模板可用
'runoob': Child
}
})
script>
body>
html>