<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <template id="myaddress"> <!--组件模块--> <div> <h2>{{address}}</h2> <ul> <li v-for="item in arr">{{item}}</li> </ul> <input type="text" v-focus> </div> </template> <template id="myrow"> <tbody> <tr> <td>1234321</td> </tr> </tbody> </template> <template id="myslot"> <div> <slot name="s1"></slot> <h3>组件</h3> <slot name="s2"></slot> </div> </template> <div id="box"> <hello></hello> <world></world> <my-address></my-address> <!--需要写组件名就可以--> <my-address></my-address> <table> <!--<my-row></my-row>--> <!--上 写法 会显示在table 外面 正确写法 下--> <tbody is="my-row"></tbody> <!--链接关联标签--> </table> <!--slot 内容嵌套调用--> <my-slot> <ul slot="s1"> <li>嵌套组件内部组件1111111</li> </ul> <ul slot="s2"> <li>嵌套组件内部组件22222222222222</li> </ul> </my-slot> <!--动态模板 可以动态添加的组件--> <!--切换--> <button @click="flag='my-address'">address</button> <button @click="flag='my-slot'">slot</button> <my-address v-if="flag=='my-address'"></my-address> <my-slot v-if="flag=='my-slot'"> <ul slot="s1"> <li>嵌套组件内部组件1111111</li> </ul> <ul slot="s2"> <li>嵌套组件内部组件22222222222222</li> </ul> </my-slot> <!--动态组件--> <keep-alive> <!--heep-alive 缓存非活动组件 如随机数加在这标签内切换就不会变化 不然刷新一次变化一次--> <component :is="flag"></component> <!--导入对应的组件--> </keep-alive> <my-hello1></my-hello1> <my-hello2></my-hello2> </div> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script> //组件创建方式1 var myComponent = Vue.extend({ template:'<h2>hello</h2>>' }) Vue.component('hello',myComponent) //方式2 Vue.component('world',{ template:'<h2>world</h2>>' }) var vm = null; vm = new Vue({ el: "#box", data: { name:'moris', age:22, user:{ id:100, name : '111' }, flag:'my-address' }, components:{ //局部里面components 后面加s 'my-address':{ template:'#myaddress', data(){ // 组件是个独立的存在 有属于自己的 data 组件里面data 要加return return { address:"wuhang", arr:['a','b'] } }, directives:{ //自定义指令 focus:{ inserted(el){ //当前绑定元素扎入Dom中 el.focus(); } } } }, 'my-row':{ template:'#myrow', data(){ return { address:"wuhang11111", arr:['a','b'] } }, }, 'my-solt':{ template:'#mysolt', data(){ return { address:"wuhang11111222222222222", arr:['a','b'] } }, }, 'my-hello1':{ template:'<h3>aa:{{x}}</h3>>', data(){ return { x:Math.random() } }, }, 'my-hello2':{ template:'<h3>bb:{{y}}</h3>>', data(){ return { y:Math.random() } }, }, }, }) </script> </body> </html>
vue 组件基本原理详解
最新推荐文章于 2024-08-03 15:00:00 发布