9.Vue组件
组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
所有实例都能用全局组件。
案例1:
<div id="app">
<mycomponent></mycomponent>
</div>
<script>
//注册组件
Vue.component("mycomponent",{
template:'<li>这里是组件的内容</li>'
});
var v= new Vue({
el:"#app",
});
</script>
说明:
注册组件
Vue.component("组件名称",{组件的属性})
案例2:
<div id="app">
<mymenu></mymenu>
</div>
<script>
//注册组件 mymenu:组件的名字 {}里面是组件的属性配置
Vue.component("mymenu",{
//data数据,这里的数据和vue实例中的数据不同,这里data类型是函数而非对象。
data:function(){
return{
count:0
}
},
//组件的模板只能有一个根元素
template:'<div><input type="button" value="-" @click="sub" />'+
'<input type="num" :value="count" /><input type="button" value="+" @click="plus" /></div>',
//需要用到的方法
methods:{
sub:function(){
this.count--;
},
plus:function(){
this.count++;
}
}
})
var v=new Vue({
el:"#app"
})
</script>
1.将组件内容写入一个vue页面中
welcome.vue
<template>
<div>欢迎您!!{{msg}}</div>
</template>
<script>
module.exports = {
data:function(){
return {
msg:"daimenglaoshi"
}
}
}
</script>
2.在html页面中导入vue组件并使用
因为html中不能直接使用vue页面的内容,需要用到插件http-vue-loader。
下载http-vue-loader.js文件 或者在线调用:
<script src="https://unpkg.com/http-vue-loader"></script>
html中调用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/http_vue_loader.js" ></script>
</head>
<body>
<div id="app">
<welcome></welcome>
<welcome></welcome>
<welcome></welcome>
</div>
<script>
var v=new Vue({
el:"#app",
components:{
"welcome":httpVueLoader("welcome.vue")
}
})
</script>
</body>
</html>
一旦全局注册,就意味着即便以后你不再使用这个组件,它依然会随着Vue的加载而加载。
因此,对于一些并不频繁使用的组件,我们会采用局部注册。
案例代码:
<div id="app">
<welcome></welcome>
</div>
<script>
var msg = {
template:"<div>您好,{{name}}</div>",
data(){
return{
name:"呆萌老师"
}
}
}
//该组件只在本Vue实例中使用
var v=new Vue({
el:"#app",
components:{
welcome:msg
}
})
</script>
组件可以嵌套,父组件中可以套入一个子组件
测试代码:
<div id="app">
<father></father>
</div>
<script>
//注册父组件
Vue.component("father",{
template:"<div style='background-color:red'><p>我是一个父组件</p><son></son></div>",
//父组件中添加子组件
components:{
son:{
template:"<span style='background-color:yellow'>我是一个子组件</span>"
}
}
})
var v=new Vue({
el:"#app"
})
</script>
格式:props:['value'] data里面的数据会传递到组件里的props属性
案例代码1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<show v-for="item in items" v-html="item" ></show>
</div>
<script>
Vue.component("show",{
props:['value'],
template:"<li>{{value}}</li>"
})
var v=new Vue({
el:"#app",
data:{
items:['吃饭','睡觉','打豆豆']
}
})
</script>
</body>
</html>
案例代码2:
<div id="app">
<!-- 改变文本框的值,组件中的值也会变 -->
<input type="text" v-model="item" />
<mydiv v-html="item"></mydiv>
</div>
<script>
Vue.component("mydiv",{
props:['value'],
template:'<li>{{value}}</li>'
});
var app = new Vue({
el:"#app",
data:{
item:'呆萌'
}
});
</script>
vue的选项很多,除了前面用到的el,data,methods等,还有其它的。比如Watch
数据变化的监控经常使用,例如天气预报的穿衣指数,它主要是根据温度来进行提示的。温度大于25度时,我们建议穿T恤短袖,温度小于25度大于0度时,我们建议穿毛衣外套,温度小于0度时我们建议穿棉衣羽绒服。
测试案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
输入温度,显示穿衣指数
<div id="app">
<p>温度:{{temperature}}</p>
<p>穿衣建议:{{advise}}</p>
输入温度:<input type="text" v-model="temperature" />
</div>
<script>
var v=new Vue({
el:"#app",
data:{
temperature:"",
advise:""
},
//监控温度的变化
watch:{
temperature:function(newVal,oldVal){
if (newVal > 25) {
this.advise ="建议穿T恤短袖";
} else if (newVal >= 0 && newVal <= 25) {
this.advise ="建议穿毛衣外套";
} else {
this.advise ="建议穿棉服羽绒服";
}
}
}
})
</script>
</body>
</html>
测试结果: