欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

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

成都創(chuàng)新互聯(lián)公司是專業(yè)的甘泉網(wǎng)站建設公司，甘泉接單;提供成都網(wǎng)站建設、成都做網(wǎng)站,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行甘泉網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

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.js學習之UI組件開發(fā)教程

  • Vue.component 方法用于注冊全局組件， new Vue({ components: {}}) 用于注冊某個實例內使用的組件，所以 <box-two></box-two> 在 #app2 中失效；
  • 由于瀏覽器渲染標簽時會把標簽全部轉成小寫，駝峰式組件名稱會失效，如事例中的 <boxThree></boxThree> ；
  • 在實例以外無法使用任何組件；

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

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

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

  • 由于受到瀏覽器渲染標簽的限制，例如 table 標簽子元素只能是 tbody 或 tr 、select 標簽子元素只能是 option ，類似的其他更多的標簽，所以 vue 引入了 is 屬性；
  • 如果使用的是組件文件 .vue 后綴的文件開發(fā)，則因為是字符串方式渲染的，所以不受限制；

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>

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

  • 不同于 new Vue({}) 中的實例數(shù)據(jù)集，組件中的 data 數(shù)據(jù)集必須是一個函數(shù)，再使用函數(shù)返回一個對象集，否則會報錯；

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>

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

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

5. 組件標簽屬性使用動態(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>

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

  • 實例中的 appNumber 變化時，組件中的 number 會跟著變化；
  • 組件中的 number 變化時，實例中的 appNumber 并不會變化；
  • 實例中的 appNumber 的值，會覆蓋組件內 number 的值；
  • 但如果 appNumber 的值是數(shù)組或對象，由于是引用類型，則雙方都會互相影響；

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>

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

  • props 允許接受一個對象作為參數(shù)，每個參數(shù)作為一個元素屬性，type 為屬性的值期待的類型；
  • 如果條件不符合，vue 的開發(fā)版下會在 console 打印出錯誤信息，但功能還是能正常傳值的；
  • 事例中 number2 傳遞的其實是 String 類型的 '1'，而只有 :number3 這種賦值才能傳遞數(shù)值類型的 1；
  • 可選項：
{
 // 屬性類型： String、Number、Boolean、Function、Object、Array，null-任意類型，
 // 可以使用數(shù)組多選
 type: null,

 // 是否必須被賦值：true、false
 required: false,

 // 默認值：可以是一般任意值或有返回值的函數(shù)
 default: '',

 // 自定義判斷函數(shù)：參數(shù) value 為調用時傳入的值，
 // 返回 true、false 來通知 vue 機制是否報錯
 validator: function(value){ return true } 
}

7. 組件內給實例發(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>

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

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

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

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

9. 組件內容節(jié)點的分發(fā)：

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

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

  • vue 默認在組件內定義了 <slot> 標簽，用于獲取組件被使用時的內容節(jié)點；
  • <slot> 標簽的內容為組件的默認內容節(jié)點；
  • 內容節(jié)點也可使用動態(tài)數(shù)據(jù)；

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>

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

  • 沒有聲明 name 屬性的 <slot> 標簽，是為組件的內容節(jié)點中沒有聲明 slot 屬性的標簽而占位；
  • 聲明了 name 屬性的 <slot> 標簽，是為組件的內容節(jié)點中與之相等 slot 屬性的標簽而占位；
  • 多個標簽應用了相同的 slot 屬性也會有效；

11. <slot> 標簽回傳數(shù)據(jù)給內容節(jié)點：

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

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

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

12. 動態(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>

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

  • <component> 標簽為 vue 保留的標簽，實際只是個占位符；
  • is 屬性可指定組件標簽名，也可綁定動態(tài)變量；

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>

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

  • 只要為組件指定 ref 屬性，實例中則會在 $refs 中訪問到組件的對象；

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

文章名稱：vue.js學習之UI組件開發(fā)教程
網(wǎng)站URL：http://www.chinadenli.net/article32/piiesc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、用戶體驗、服務器托管、網(wǎng)站內鏈、關鍵詞優(yōu)化、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設網(wǎng)站維護公司