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

更新時(shí)間：2017年07月03日 14:35:41 作者：rayman_v

前端開發(fā)中,隨著業(yè)務(wù)的增多,出于效率的考慮,我們對(duì)于組件化開發(fā)的需求也越來(lái)越迫切。下面這篇文章主要給大家介紹了關(guān)于vue.js之UI組件開發(fā)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。

本文主要給大家介紹了關(guān)于vue.js之UI組件開發(fā)的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)一起看看詳細(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í)例以外無(wú)法使用任何組件；

2. 瀏覽器渲染網(wǎng)頁(yè)標(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ū)ο?，由于是引用類型，則雙方都會(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 來(lái)通知 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)無(wú)法直接與組件外數(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" 元素屬性，來(lái)監(jiān)聽 child 事件收到通知時(shí)應(yīng)該執(zhí)行什么處理，通過(guò) father 的形參，可以直接訪問(wèn) 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>

沒(méi)有聲明 name 屬性的 <slot> 標(biāo)簽，是為組件的內(nèi)容節(jié)點(diǎn)中沒(méi)有聲明 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 訪問(wèn)到 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í)例中訪問(wèn)子元素對(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>