vue.js學(xué)習(xí)之UI組件開發(fā)教程

2019-11-19 16:11:25

字體：大中小

供稿：網(wǎng)友

本文主要給大家介紹了關(guān)于vue.js之UI組件開發(fā)的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：

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 方法用于注冊(cè)全局組件， new Vue({ components: {}}) 用于注冊(cè)某個(gè)實(shí)例內(nèi)使用的組件，所以 <box-two></box-two> 在 #app2 中失效；
由于瀏覽器渲染標(biāo)簽時(shí)會(huì)把標(biāo)簽全部轉(zhuǎn)成小寫，駝峰式組件名稱會(huì)失效，如事例中的 <boxThree></boxThree> ；
在實(shí)例以外無法使用任何組件；

2. 瀏覽器渲染網(wǎng)頁標(biāo)簽的限制：

<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>

由于受到瀏覽器渲染標(biāo)簽的限制，例如 table 標(biāo)簽子元素只能是 tbody 或 tr 、select 標(biāo)簽子元素只能是 option ，類似的其他更多的標(biāo)簽，所以 vue 引入了 is 屬性；
如果使用的是組件文件 .vue 后綴的文件開發(fā)，則因?yàn)槭亲址绞戒秩镜模圆皇芟拗疲?br />

3. 組件中的 data 數(shù)據(jù)集：

<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({}) 中的實(shí)例數(shù)據(jù)集，組件中的 data 數(shù)據(jù)集必須是一個(gè)函數(shù)，再使用函數(shù)返回一個(gè)對(duì)象集，否則會(huì)報(bào)錯(cuò)；

4. 實(shí)例給組件傳值：

<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>

props 定義的字符串?dāng)?shù)組中的值，可以像 data 數(shù)據(jù)集一樣在組件內(nèi)自由調(diào)用；
props 定義的字符串?dāng)?shù)組中的值，會(huì)作為組件標(biāo)簽中的標(biāo)簽屬性名，給實(shí)例賦值；
受瀏覽器渲染標(biāo)簽屬性的影響，標(biāo)簽屬性的命名如果使用駝峰式，則使用時(shí) vue 會(huì)自動(dòng)生成對(duì)應(yīng)的短橫線隔開式屬性名，如事例中的 text-two；

5. 組件標(biāo)簽屬性使用動(dòng)態(tài)數(shù)據(jù)：

<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>

實(shí)例中的 appNumber 變化時(shí)，組件中的 number 會(huì)跟著變化；
組件中的 number 變化時(shí)，實(shí)例中的 appNumber 并不會(huì)變化；
實(shí)例中的 appNumber 的值，會(huì)覆蓋組件內(nèi) number 的值；
但如果 appNumber 的值是數(shù)組或?qū)ο螅捎谑且妙愋停瑒t雙方都會(huì)互相影響；

6. 自定義組件屬性的值的規(guī)則：

<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>

props 允許接受一個(gè)對(duì)象作為參數(shù)，每個(gè)參數(shù)作為一個(gè)元素屬性，type 為屬性的值期待的類型；
如果條件不符合，vue 的開發(fā)版下會(huì)在 console 打印出錯(cuò)誤信息，但功能還是能正常傳值的；
事例中 number2 傳遞的其實(shí)是 String 類型的 '1'，而只有 :number3 這種賦值才能傳遞數(shù)值類型的 1；
可選項(xiàng)：

{ // 屬性類型： String、Number、Boolean、Function、Object、Array，null-任意類型， // 可以使用數(shù)組多選 type: null, // 是否必須被賦值：true、false required: false, // 默認(rèn)值：可以是一般任意值或有返回值的函數(shù) default: '', // 自定義判斷函數(shù)：參數(shù) value 為調(diào)用時(shí)傳入的值， // 返回 true、false 來通知 vue 機(jī)制是否報(bào)錯(cuò) validator: function(value){ return true } }

7. 組件內(nèi)給實(shí)例發(fā)送通知：

<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>

組件內(nèi)無法直接與組件外數(shù)據(jù)集綁定，只能發(fā)送事件通知，組件內(nèi)使用 this.$emit('child', 11) 告訴實(shí)例，該調(diào)用 child 事件了，后面的參數(shù)會(huì)變成 child 的調(diào)用參數(shù)傳遞；
實(shí)例在初始化組件時(shí)，定義 v-on:child="father" 元素屬性，來監(jiān)聽 child 事件收到通知時(shí)應(yīng)該執(zhí)行什么處理，通過 father 的形參，可以直接訪問 child 的調(diào)用參數(shù)；

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()">發(fā)送</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>

可以定義一個(gè)全局實(shí)例 bus ，在不同組件內(nèi)使用 bus.$emit 發(fā)送通知，使用 bus.$on 監(jiān)聽通知；

9. 組件內(nèi)容節(jié)點(diǎn)的分發(fā)：

<script src="/public/javascripts/vue.js"></script><body><div id="app1"> <box></box> <box>  <h4>box1</h4> </box> <box>{{box2Text}}</box></div><script>Vue.component('box', { template: '<p><slot>默認(rèn)</slot></p>'});new Vue({ el: '#app1', data: {  box2Text: 'box2' }});</script>

vue 默認(rèn)在組件內(nèi)定義了 <slot> 標(biāo)簽，用于獲取組件被使用時(shí)的內(nèi)容節(jié)點(diǎn)；
<slot> 標(biāo)簽的內(nèi)容為組件的默認(rèn)內(nèi)容節(jié)點(diǎn)；
內(nèi)容節(jié)點(diǎn)也可使用動(dòng)態(tài)數(shù)據(jù)；

10. 多個(gè) <slot> 標(biāo)簽之間的使用：

<script src="/public/javascripts/vue.js"></script><body><div id="app1"> <box>  <p>ppppp</p>  <p slot="h4">h4</p>  <h4 slot="h4">h4</h4>  <p slot="h5">h5</p>  <h5 slot="h5">h5</h5> </box></div></div><script>Vue.component('box', { template: [  '<div id="box">',   '<div class="default">',    '<slot></slot>',   '</div>',   '<div class="h4">',    '<slot name="h4"></slot>',   '</div>',   '<div class="h5">',    '<slot name="h5"></slot>',,   '</div>',  '</div>', ].join('')});new Vue({ el: '#app1'});</script>

沒有聲明 name 屬性的 <slot> 標(biāo)簽，是為組件的內(nèi)容節(jié)點(diǎn)中沒有聲明 slot 屬性的標(biāo)簽而占位；
聲明了 name 屬性的 <slot> 標(biāo)簽，是為組件的內(nèi)容節(jié)點(diǎn)中與之相等 slot 屬性的標(biāo)簽而占位；
多個(gè)標(biāo)簽應(yīng)用了相同的 slot 屬性也會(huì)有效；

11. <slot> 標(biāo)簽回傳數(shù)據(jù)給內(nèi)容節(jié)點(diǎn)：

<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>

首先，數(shù)據(jù)是組件內(nèi)提供的，但數(shù)據(jù)的布局方式由實(shí)例調(diào)用組件時(shí)決定；
在組件的內(nèi)容節(jié)點(diǎn)內(nèi)，必須使用 <template> 標(biāo)簽包含著要渲染的子元素，并且定義 scope="props" 屬性，而 <template> 標(biāo)簽內(nèi)則是 props 對(duì)象的作用域上下文；
props 內(nèi)自動(dòng)含有 <slot> 標(biāo)簽中的屬性，例如事例中的 text 屬性，則可直接使用 props.text 訪問到 text 屬性的值；
當(dāng)然，也可以結(jié)合 <slot name="header"> 使用，而 <template slot="header"> 即可；
<template> 標(biāo)簽為 vue 保留的標(biāo)簽，實(shí)際只是個(gè)占位符；

12. 動(dòng)態(tài)切換組件：

<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>

<component> 標(biāo)簽為 vue 保留的標(biāo)簽，實(shí)際只是個(gè)占位符；
is 屬性可指定組件標(biāo)簽名，也可綁定動(dòng)態(tài)變量；

13. 在實(shí)例中訪問子元素對(duì)象：

<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>