VUE组件
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>
测试结果：
