huanggr
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动
html部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .demo { width: 300px; height: 200px; border: 1px solid red; } span { width: 100%; height: 50px; display: block; } input { width: 100px; height: 50px; background: #ccc; } </style> </head> <body> <div id="app"> <!-- 不写提醒 --> <curtom-component> </curtom-component> <!-- 写了提醒的 --> <curtom-component modal-title="提醒" @on-ok="ok" @on-cancel="cancel"> </curtom-component> <curtom-component modal-title="提醒" @on-ok="ok"> <ul slot="content"> <li v-for="item in list">{{item}}</li> </ul> <div slot="footer"> <strong>确定</strong> <strong>返回</strong> <strong>重置</strong> </div> </curtom-component> <curtom-component @on-cancel="cancel"> </curtom-component> </div> </body> </html> |
javascript代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <script type="text/javascript"> //定制模板 Vue.component('curtom-component', { props: { modalTitle: { type: String, default: '这是一个模态框' } }, data() { return { message: "我是子组件的数据" } }, template: ` <div class="demo"> <h3>{{modalTitle}}</h3> <span> <slot name="content"> 默认的内容 </slot> </span> <slot name="footer"> <input type="button" name="" value="确定" @click="okHandle"> <input type="button" name="" value="取消" @click="cancelHandle"> </slot> </div> `, methods: { okHandle() { alert("子组件触发"); this.$emit("on-ok"); }, cancelHandle() { alert("子组件触发cancel"); this.$emit("on-cancel"); } } }) var list = [..."爱前端"]; new Vue({ el: "#app", data: { list: list }, methods: { ok() { alert('改变div样式'); }, cancel() { alert('退出了'); } } }) </script> |
封装组件
每个组件会提供一些标准且简单的应用接口，允许使用者设置和调整参数和属性。
可以将不同来源的多个组件有机地结合在一起，快速构成一个符合实际需要的复杂(大型)应用程序。
组件的主要特点：
重用性 –能够公用和通用
可定制性–可设置参数和属性
高内聚性–功能完整
互操作性–多组件协同工作
Vue组件的API来自三部分：
props参数 传递数据给组件
slot定制模板 外部模板混合子组件模板
event自定义事件 监控子组件交互状态
7