什么是组件?
组件是一个可以复用的Vue对象.
1.组件的两种注册方法:
全局注册(全局注册后任何Vue实例都可以使用):
全局注册代码:
<!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>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
</html>
<script src="./00-vue.js"></script>
<script>
Vue.component("my-component",{
template:"<div>这是全局注册的内容</div>"
})
let app=new Vue({
el:"#app",
})
</script>
页面显示如下:
局部注册(使用components注册局部组件,注册后的组件只有在该实例作用域下才生效):
局部注册代码:
<!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>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
</html>
<script src="./00-vue.js"></script>
<script>
var Child={
template:"<div>这是局部注册的组件</div>"
}
let app=new Vue({
el:"#app",
components:{
'my-component':Child
}
})
</script>
效果如下:
2.组件里面还有一个data数据(解释为什么data是一个函数并且函数返回的是一个对象?)
先看代码:
为什么data是一个函数并且函数返回的是一个对象?
参考:因为组件可以是多个,如果直接是对象,对象是引用类型,引用类型同一个地址修改了会出现所有数据都变了的问题,所以通过函数返回一个独有的对象,使每一个组件都有一份自己的数据,这样数据可以互不干扰.
3.自己写一个计数器组件
4.自己写一个点击图片下一张图片
代码如下:除了data(是一个函数)和template(要有根元素),其它都一样(比如方法之类的)
5.上面有一个问题(模板里写东西很麻烦),所以我们要进行优化(效果和上面一致):
组件里可以写vue实例中的任何东西
3648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
