DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> vue.js初學入門教程(2)
vue.js初學入門教程(2)
編輯:關於JavaScript     

接著上一篇vue慢速入門教程學習。

4.組件使用基礎

什麼是組件?組件可以理解為可重用的自定義HTML。
可以使用一堆組件來構造大型應用,任意類型的應用界面都可以抽象為一個組件樹:


可以把組件代碼按照template、style、script的拆分方式,放置到對應的.vue文件中。
組件預定義選項中最核心的幾個:

模板(template)、初始數據(data)、接受的外部參數(props)、方法(methods)、生命周期鉤子函數(lifecycle hooks)。

4.1 基本步驟

使用組件首先需要創建構造器:

var MyComponent = Vue.extend({
 // 選項...
})

要把這個構造器用作組件,需要用 Vue.component(tag, constructor) 注冊 :

// 全局注冊組件,tag 為 my-component
Vue.component('my-component', MyComponent)

然後使用:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="xxx">
   <my-component></my-component>
  </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
  var myComponent = Vue.extend({
   template: '<p>9898不得了!</p>'
  });
  Vue.component('my-component', myComponent);
  new Vue({
   el: '#xxx'
  });
 </script>
</html>

其中,

Vue.component('my-component', MyComponent)這種是全局注冊,第一個參數是注冊組件的名稱,第二個參數是組件的構造函數;

選項對象的template屬性用於定義組件要渲染的HTML;

組件的模板替換了自定義元素,自定義元素的作用只是作為一個掛載點。組件掛載在vue實例上才會生效。

對於自定義標簽名字,Vue.js 不強制要求遵循 W3C 規則(小寫,並且包含一個短槓),為了避免不必要的事端盡管遵循這個規則。 

4.2 局部注冊

用實例選項 components 注冊:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="xxx">
   <my-component></my-component>
  </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
  var myComponent = Vue.extend({
   template: '<p>9898不得了!</p>'
  });
//  Vue.component('my-component', myComponent);
  new Vue({
   el: '#xxx',
   components: {
    'my-component': myComponent
   }
  });
 </script>
</html>

也可以在組件中定義並使用其他組件:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="example">
   <xx-component></xx-component>
  </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
  var Child = Vue.extend({
   template: '<div>i am zai</div>',
   replace: true
  })
  var Parent = Vue.extend({
   template: '<p>i am baba</p><br/><wa></wa>',
   components: {
    // <xx-component>只能用在父組件模板內
    'wa': Child
   }
  })
  // 創建根實例
  new Vue({
   el: '#example',
   components: {
    'xx-component': Parent
   }
  })
 </script>
</html>

其中,子組件只能在父組件的template中使用

另外,有簡化的寫法,Vue在背後會自動地調用Vue.extend():

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="xxx">
   <my-component-continue></my-component-continue>
  </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
  // 局部注冊的簡化寫法
  var vm2 = new Vue({
   el: '#xxx',
   components: {
    'my-component': {
     template: '<div>9898不得了!</div>'
    },
    'my-component-continue': {
     template: '<div>糧食大豐收!</div>'
    }
   }
  })
 </script>
</html>

4.3 組件選項問題

在定義組件的選項時,data和el選項必須使用函數。

如果data選項指向某個對象,這意味著所有的組件實例共用一個data。
所以應當使用一個函數作為 data 選項,讓這個函數返回一個新對象:

Vue.component('my-component', {
 data: function(){

  return {a : 1}

 }

})

同理,el 選項用在 Vue.extend() 中時也須是一個函數。 

5.數據傳遞

Vue.js組件之間有三種數據傳遞方式:

props
組件通信
slot

5.1 props

  “props”是組件數據的一個字段,期望從父組件傳下來數據。因為組件實例的作用域是孤立的,所以子組件需要顯式地用props選項來獲取父組件的數據。

  Props選項可以是字面量、表達式、綁定修飾符。

5.1.1 字面量

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <child msg="hello!"></child>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   Vue.component('child', {
    // 聲明 props
    props: ['msg'],
    // prop 可以用在模板內
    // 可以用 `this.msg` 設置
    template: '<span>{{ msg }}你困嗎</span>'
   })
   new Vue({
    el: 'body'
   })
  </script>
 </body>
</html>

HTML 特性不區分大小寫。名字形式為 camelCase 的 prop 用作特性時,需要轉為 kebab-case(短橫線隔開):

Vue.component('child', {
 // camelCase in JavaScript
 props: ['myMessage'],
 template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child> 

5.1.2 動態

類似於用 v-bind 綁定 HTML 特性到一個表達式,也可以用 v-bind 綁定動態 Props 到父組件的數據。每當父組件的數據變化時,也會傳導給子組件。比如醬:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div>
   <input v-model="parentMsg">
   <br>
   <child :my-message="parentMsg"></child>
  </div>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   Vue.component('child', {
    props: ['myMessage'],
    template: '<span>{{ myMessage }}你困嗎</span>'
   })
   new Vue({
    el: 'body',
    data:{
     parentMsg:''
    }
   })
  </script>
 </body>
</html>

當我在input裡面輸入哈哈的時候:

5.1.3 綁定類型

可以使用綁定修飾符:

.sync,雙向綁定
.once,單次綁定

<!-- 默認為單向綁定 -->
<child :msg="parentMsg"></child>

<!-- 雙向綁定 -->
<child :msg.sync="parentMsg"></child>

<!-- 單次綁定 -->
<child :msg.once="parentMsg"></child>

prop 默認是單向綁定:當父組件的屬性變化時,將傳導給子組件,但是反過來不會。

不過需要注意的是:如果 prop 是一個對象或數組,是按引用傳遞。在子組件內修改它會影響父組件的狀態,不管是使用哪種綁定類型。

示例:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="app">

   <table>
    <tr>
     <th colspan="3">父組件數據</td>
    </tr>
    <tr>
     <td>name</td>
     <td>{{ name }}</td>
     <td><input type="text" v-model="name" /></td>
    </tr>
    <tr>
     <td>age</td>
     <td>{{ age }}</td>
     <td><input type="text" v-model="age" /></td>
    </tr>
   </table>
  
   <my-component v-bind:my-name.sync="name" v-bind:my-age="age"></my-component>
  </div>
  
  <template id="myComponent">
   <table>
    <tr>
     <th colspan="3">子組件數據</td>
    </tr>
    <tr>
     <td>my name</td>
     <td>{{ myName }}</td>
     <td><input type="text" v-model="myName" /></td>
    </tr>
    <tr>
     <td>my age</td>
     <td>{{ myAge }}</td>
     <td><input type="text" v-model="myAge" /></td>
    </tr>
   </table>
  </template>
  <script src="js/vue.js"></script>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     name: 'k',
     age: 24
    },
    components: {
     'my-component': {
      template: '#myComponent',
      props: ['myName', 'myAge']
     }
    }
   })
  </script>
 </body>
</html>

上面這段設置了名字雙向,年齡單向:

以下是一個大神的綜合示例:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="app">

   <table>
    <tr>
     <th colspan="3">父組件數據</td>
    </tr>
    <tr>
     <td>name</td>
     <td>{{ name }}</td>
     <td><input type="text" v-model="name" /></td>
    </tr>
    <tr>
     <td>age</td>
     <td>{{ age }}</td>
     <td><input type="text" v-model="age" /></td>
    </tr>
   </table>
  
   <my-component v-bind:my-name.sync="name" v-bind:my-age="age"></my-component>
  </div>
  
  <template id="myComponent">
   <table>
    <tr>
     <th colspan="3">子組件數據</td>
    </tr>
    <tr>
     <td>my name</td>
     <td>{{ myName }}</td>
     <td><input type="text" v-model="myName" /></td>
    </tr>
    <tr>
     <td>my age</td>
     <td>{{ myAge }}</td>
     <td><input type="text" v-model="myAge" /></td>
    </tr>
   </table>
  </template>
  <script src="js/vue.js"></script>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     name: 'k',
     age: 24
    },
    components: {
     'my-component': {
      template: '#myComponent',
      props: ['myName', 'myAge']
     }
    }
   })
  </script>
 </body>
</html>


  

可以檢索:

其中,{{ col | capitalize}}過濾,首字母大寫。

<tr v-for="entry in data | filterBy filterKey">

  <td v-for="col in columns">

    {{entry[col]}}

  </td>

</tr>

過濾搜索關鍵詞;

雙循環,tr循環data條數,4行,entry表示每行;td循環columns數量,3列,col表示每列,entry[col]取具體數據。

props: {
  data: Array,
  columns: Array,
  filterKey: String

}

驗證:父組件傳遞過來的data和columns必須是Array類型,filterKey必須是字符串類型。

驗證要求示例:

Vue.component('example', {
 props: {
 // 基礎類型檢測 (`null` 意思是任何類型都可以)
 propA: Number,
 // 多種類型 (1.0.21+)
 propM: [String, Number],
 // 必需且是字符串
 propB: {
  type: String,
  required: true
 },
 // 數字,有默認值
 propC: {
  type: Number,
  default: 100
 },
 // 對象/數組的默認值應當由一個函數返回
 propD: {
  type: Object,
  default: function () {
  return { msg: 'hello' }
  }
 },
 // 指定這個 prop 為雙向綁定
 // 如果綁定類型不對將拋出一條警告
 propE: {
  twoWay: true
 },
 // 自定義驗證函數
 propF: {
  validator: function (value) {
  return value > 10
  }
 },
 // 轉換函數(1.0.12 新增)
 // 在設置值之前轉換值
 propG: {
  coerce: function (val) {
  return val + '' // 將值轉換為字符串
  }
 },
 propH: {
  coerce: function (val) {
  return JSON.parse(val) // 將 JSON 字符串轉換為對象
  }
 }
 }
})

Stringtype 可以是下面原生構造器:

Number
Boolean
Function
Object
Array

type 也可以是一個自定義構造器,使用 instanceof 檢測。

當 prop 驗證失敗時,Vue 將拒絕在子組件上設置此值,如果使用的是開發版本會拋出一條警告。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

參考:Vue.js——60分鐘組件快速入門(上篇)

  《vue.js權威指南》

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved