web前端--vue--vue组件vue实例
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
web前端--vue--vue组件vue实例根据千峰教育学习视频所练习的笔记 | 学习⼀段时间，我也有写⼀点东西的必要了···
1. vue组件介绍
组件系统是将⼀个⼤型的界⾯切分成⼀个⼀个更⼩的可控单元
组件是复⽤（同⼀个头部可以⽤在游戏、微信、qq中）的，可维护的
组件具有强⼤的封装性，易于使⽤
⼤型应⽤中，组件与组件之间交互可以解耦操作
2. 创建vue组件
全局组件
局部组件
2.1. 先来看全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使⽤⾃定义组件（标签）-->
<my-header></my-header>
</div>
<div id="app2">
<my-header></my-header>
</div>
<script>
<!-- 全局组件-->
<!ponent定义组件，参数为组件名字,组件名字相当于我们⾃定义的标签-->
ponent('my-header',{
template:'<h2>标题</h2>'
});
<!-- template对组件进⾏模板替换，替换成真实的html结构-->
var vm = new Vue({
el:'#app' <!--通过id来找，具有唯⼀性-->
});
var vm = new Vue({
el:'#app2'
});
</script>
</body>
</html>
写好了之后我们看看组件能不能把模板渲染到<div>标签上：
我们再来写⼀个<div>容器，id 为 app2，并为它创建⼀个实例：
<body>
···
<div id="app2">
<my-header></my-header>
</div>
<script>
······
el:'#app'
});
var vm = new Vue({
el:'#app2'
});
</script>
</body>
其实这个时候，也是可以渲染出组件的：
因为这个vue组件是全局的，可以在 app ⾥⽤，也可以在 app2 ⾥⽤。
2.2. 局部组件
除了创建全局组件之外，我们还能创建局部组件
局部组件就是在单独创建的实例中进⾏创建，在这⾥我们要写配置，就是代码⾥的components
<body>
···
<div id="app2">
<my-header></my-header>
</div>
<script>
var vm = new Vue({
el:'#app',
components: {
'my-header':{
template:'<h2>标题</h2>'
}
}
});
</script>
</body>
我们看⼀下效果：可以知道全局组件和局部组件还是有区别的
3. 组件数据的特点
我们能不能让⾃⼰创建的 vue 实例⾥的 data 下⾯的属性在组件中使⽤呢？试⼀下！
我们先去vue实例下添加data
<script>
var vm = new Vue({
el:'#app',
data:{
//定义成对象 message
message:'hello vue !'
},
components: {
'my-header':{
template:'<h2>标题</h2>'
}
}
});
</script>
接着，我们到<div>容器中渲染 message ，页⾯上就出来了：
<div id="app">
{{message}}
<my-header></my-header>
</div>
<div id="app2">
······
</div>
那么我们这个{{message}}在实例下定义的数据不能在组件中⽤？我们到组件模板中去调⽤试⼀下：
<div id="app">
<!-- {{message}} -->
<my-header></my-header>
</div>
<div id="app2">
······
</div>
<script>
var vm = new Vue({
······
components: {
'my-header':{
template:'<h2>标题{{message}}</h2>'
}
}
});
</script>
⼤家可以看到，并不能找到 message 。
因为数据是不共享的，是为了防⽌冲突和耦合性。
所以说，message只能在容器中使⽤，在组件中是调⽤不到的。
那么，我想要在组件中⽤到数据，就要⽤到组件提供的 data 配置了
<div id="app">
<my-header></my-header>
</div>
<div id="app2">
<my-header></my-header>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'hello vue !'
},
components: {
'my-header':{
template:'<h2>标题{{message}}</h2>',
//在组件中使⽤数据(就不能写成对象了):组件中定义function函数，并⽤return返回
data:function () {
return{
message:'nice to meet you'
};
}
}
}
});
</script>
这会⼉我们就看到打印的是data配置⾥的message，不再是先前的hello vue 了。
4. vue实例与vue组件的关系
所有的vue组件其实都是被扩展的vue实例,就是vue组件可以继承vue实例。
5. 补充：vue组件的模板语法规范
根据之前的学习，我们可以知道，在组件中可以写上 template (模板)。
当数据⽐较少的时候，是没有什么问题的，我们可以写作⼀⾏。
当模板复杂起来之后，⼀⾏很长不⽅便阅读，我们有更好的⽅式对待。
如图：我想在message下⾯加⼀些列表
template:'<div><h2>{{message}}</h2><ul><li>张⼀⼭</li></ul> <ul><li>吴京</li></ul><ul><li>李现</li></ul><ul><li>肖战</li></ul></div>',
5.可以看到这样的代码看起来不太⽅便，现在我们进⾏⼀些处理：
加 \
template:'<div>\
<h2>{{message}}</h2>\
<ul>\
<li>张⼀⼭</li>\
</ul>\
<ul>\
<li>吴京</li>\
</ul>\
<ul>\
<li>李现</li>\
</ul>\
<ul>\
<li>肖战</li>\
</ul>\
</div>',
哈哈，这样写也不太⽅便
⽤``
template:`<div>
<h2>{{message}}</h2>
<ul>
<li>张⼀⼭</li>
</ul>
<ul>
<li>吴京</li>
</ul>
<ul>
<li>李现</li>
</ul>
<ul>
<li>肖战</li>
</ul>
</div>`,
⽤ <template> 模板标签：在HTML下⾯写⼀个<template>标签,再把列表结构放进去。
写好之后，我们可以通过id找到这个模板
<body>
<div id="app">
······
</div>
<template id="temp">
<div>
······
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
components:{
'my-header':{
template:'#temp',
data:function () {
return{
message: 'hello my idol'
};
}
}
}
});
</script>
</body>
还可以使⽤<scripr type="text/x-template">,但是⼀定要写type类型，不然会按js⽅式解析。
<script type="text/x-template" id="temp">
<div>
······
</div>
</script>
<script>
······
</script>。