9.Vue组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
9.1全局组件所有实例都能用全局组件。
案例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>9.2 如何在其它html页面访问vue组件
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>9.3 局部组件一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着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>9.4 父子组件组件可以嵌套，父组件中可以套入一个子组件
测试代码：
<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>9.5使用 props 属性动态传递参数格式：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>
10.Watch 选项
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>
测试结果：
【文章原创作者：阿里云代理 aliyun.html 复制请保留原URL】总结失败的原因能够让人越来越谨慎。
