huanggr
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动
特殊is属性扩展原生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 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <script type="text/javascript" src="vue.js"></script> <body> <div id="app"> <my-ul input-value="搜索"> </my-ul> <my-ul input-value="查询"> </my-ul> <table> </table> </div> </body> </html> <script> Vue.component('my-ul', { props: ['inputValue'], data:function(){ return { selectShow:false } }, template: ` <div> <input type="text" :value="inputValue" @click="selectShow= !selectShow"> <ul v-show="selectShow"> <li>html+css</li> <li>html+css</li> <li>html+css</li> <li>html+css</li> </ul> </div> ` }) new Vue({ el: "#app", }) /* 在组件中，有一套约定俗成的规矩，组件嵌套必须符合W3C规范，如何将由div组成的组件放到table中，让我查看页面会发现看，div在table以外，不是里面，这是因为不符合规范，所以移出去了，如果需要让div嵌套在table中，我们可以这样做： <tr is="my-ul"></tr> 使用符合条件的标签 里面写is="组件名" 就可以了 */ /* 注意问题2 @click="selectShow= !selectShow" 用来点击切换 高端 在table中放入不符合条件的组件的方法，使用is，如下面例子: <tr is="my-ul"></tr> */ </script> |
7