您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本文主要给大家介绍了关于vue.js之UI组件开发的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:
1. 新建组件:
<script src="/public/javascripts/vue.js"></script> <style> #app1{background-color: red} #app2{background-color: blue} </style> <body> <div id="app1"> <box-one></box-one> <box-two></box-two> <boxThree></boxThree> </div> <div id="app2"> <box-one></box-one> <box-two></box-two> </div> <box-one></box-one> <box-two></box-two> <script> Vue.component('box-one', { template: '<div class="box-one">box-one</div>' }); var app1 = new Vue({ el: '#app1', components: { 'box-two': { template: '<div class="box-two">box-two</div>' }, 'boxThree': { template: '<div class="boxThree">boxThree</div>' } } }); var app2 = new Vue({ el: '#app2' }); </script>
Vue.component
方法用于注册全局组件, new Vue({ components: {}})
用于注册某个实例内使用的组件,所以 <box-two></box-two>
在 #app2 中失效;<boxThree></boxThree>
;2. 浏览器渲染网页标签的限制:
<script src="/public/javascripts/vue.js"></script> <style> .red{background-color: red} .blue{background-color: blue} </style> <body> <div id="app1"> <table class="red"> <box-one></box-one> </table> <select class="red"> <box-two></box-two> </select> <table class="blue"> <tr is="box-one"></tr> </table> <select class="blue"> <option is="box-two"></option> </select> </div> <script> Vue.component('box-one', { template: '<tr><td>box-one</td></tr>' }); Vue.component('box-two', { template: '<option>option</option>' }); var app1 = new Vue({ el: '#app1' }); </script>
3. 组件中的 data 数据集:
<script src="/public/javascripts/vue.js"></script> <body> <div id="app1"> <done-button></done-button> </div> <script> Vue.component('done-button', { template: '<button>{{text}}</button>', data: function (){ return { text: 'ok' } } }); var app1 = new Vue({ el: '#app1' }); </script>
new Vue({})
中的实例数据集,组件中的 data 数据集必须是一个函数,再使用函数返回一个对象集,否则会报错;4. 实例给组件传值:
<script src="/public/javascripts/vue.js"></script> <body> <div id="app1"> <done-button text="submit" textOne="submit1" text-two="submit2"></done-button> </div> <script> Vue.component('done-button', { template: '<button :data-text="text" :data-text-one="textOne" :data-text-two="textTwo">{{text}}</button>', props: ['text', 'textOne', 'textTwo'] }); var app1 = new Vue({ el: '#app1' }); </script>
5. 组件标签属性使用动态数据:
<script src="/public/javascripts/vue.js"></script> <style> .appNumber{background-color: red} </style> <body> <div id="app1"> <done-button :number="appNumber"></done-button> <button class="appNumber" @click="appNumber++">{{appNumber}}</button> </div> <script> Vue.component('done-button', { template: '<button @click="number++">{{number}}</button>', props: ['number'] }); new Vue({ el: '#app1', data: { appNumber: 0 } }); </script>
6. 自定义组件属性的值的规则:
<script src="/public/javascripts/vue.js"></script> <body> <div id="app1"> <done-button number1="a" number2="1" :number3="1" ></done-button> </div> <script> Vue.component('done-button', { template: '<button :num1="number1" :num2="number2" :num3="number3">{{number1}}</button>', props: { number1: { type: Number }, number2: { type: Number }, number3: { type: Number } } }); new Vue({ el: '#app1' }); </script>
{ // 属性类型: String、Number、Boolean、Function、Object、Array,null-任意类型, // 可以使用数组多选 type: null, // 是否必须被赋值:true、false required: false, // 默认值:可以是一般任意值或有返回值的函数 default: '', // 自定义判断函数:参数 value 为调用时传入的值, // 返回 true、false 来通知 vue 机制是否报错 validator: function(value){ return true } }
7. 组件内给实例发送通知:
<script src="/public/javascripts/vue.js"></script> <body> <div id="app1"> <done-button v-on:child="father" ></done-button> </div> <script> Vue.component('done-button', { template: '<button v-on:click="add()">增加</button>', methods: { add: function () { this.$emit('child', 11); } } }); new Vue({ el: '#app1', methods: { father: function(number) { console.log('father' + number); } } }); </script>
this.$emit('child', 11)
告诉实例,该调用 child 事件了,后面的参数会变成 child 的调用参数传递;v-on:child="father"
元素属性,来监听 child 事件收到通知时应该执行什么处理,通过 father 的形参,可以直接访问 child 的调用参数;8. 组件之间通信:
<script src="/public/javascripts/vue.js"></script> <body> <div id="app1"> <done-button ></done-button> <cancel-button></cancel-button> </div> <script> var bus = new Vue(); Vue.component('done-button', { template: '<button v-on:click="send()">发送</button>', methods: { send: function () { bus.$emit('done-emit', 11); } } }); Vue.component('cancel-button', { template: '<p>{{text}}</p>', data: function (){ return { text: '00' } }, mounted: function() { var _this = this; bus.$on('done-emit', function(number) { _this.text = number; }); } }); new Vue({ el: '#app1', methods: { call: function(value) { console.log('father:' + value); } } }); </script>
bus.$emit
发送通知,使用 bus.$on
监听通知;9. 组件内容节点的分发:
<script src="/public/javascripts/vue.js"></script> <body> <div id="app1"> <box></box> <box> <h5>box1</h5> </box> <box>{{box2Text}}</box> </div> <script> Vue.component('box', { template: '<p><slot>默认</slot></p>' }); new Vue({ el: '#app1', data: { box2Text: 'box2' } }); </script>
10. 多个 <slot> 标签之间的使用:
<script src="/public/javascripts/vue.js"></script> <body> <div id="app1"> <box> <p>ppppp</p> <p slot="h5">h5</p> <h5 slot="h5">h5</h5> <p slot="h6">h6</p> <h6 slot="h6">h6</h6> </box> </div> </div> <script> Vue.component('box', { template: [ '<div id="box">', '<div class="default">', '<slot></slot>', '</div>', '<div class="h5">', '<slot name="h5"></slot>', '</div>', '<div class="h6">', '<slot name="h6"></slot>',, '</div>', '</div>', ].join('') }); new Vue({ el: '#app1' }); </script>
11. <slot> 标签回传数据给内容节点:
<script src="/public/javascripts/vue.js"></script> <body> <div id="app1"> <box > <template scope="props"> <span>{{props.text}}</span> </template> </box> </div> </div> <script> Vue.component('box', { template: '<div id="box"><slot v-for="i in items" :text="i"></slot></div>', data: function (){ return { items: [0,1,2,3,4] } } }); new Vue({ el: '#app1' }); </script>
scope="props"
属性,而 <template> 标签内则是 props 对象的作用域上下文;props.text
访问到 text 属性的值; <slot name="header">
使用,而 <template slot="header">
即可;12. 动态切换组件:
<script src="/public/javascripts/vue.js"></script> <body> <div id="app1"> <component :is="view"></component> <button @click="view = 'inlinebox'">change</button> </div> </div> <script> Vue.component('box', { template: '<div id="box">box</div>', }); Vue.component('inlinebox', { template: '<div id="inlinebox">inlinebox</div>' }); new Vue({ el: '#app1', data: { view: 'box' } }); </script>
13. 在实例中访问子元素对象:
<script src="/public/javascripts/vue.js"></script> <body> <div id="app1"> <box ref="box1"></box> </div> </div> <script> Vue.component('box', { template: '<div id="box">box</div>', }); new Vue({ el: '#app1', mounted: function() { console.log(this.$refs); } }); </script>
$refs
中访问到组件的对象;总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。