VueJS元件


Vue元件是VueJS的重要功能之一,可以建立可以在HTML中重用的自定義元素。

下面通過一個例子來建立一個元件,這將更好地理解元件如何與VueJS一起工作。

範例一

建立一個檔案:component-example1.html ,程式碼如下 -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs元件範例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

檔案:vue_component.js , 內容如下 -

Vue.component('testcomponent',{
   template : '<div><h2>這是元件中的內容~</h2></div>'
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

component-example1.html檔案中,建立了兩個ID為component_testcomponent_test1div。 在上面的vue_component.js 檔案中,使用divid建立了兩個Vue範例。並建立了一個公共元件(testcomponent),用於兩個檢視範例。

要建立元件,請遵循以下語法。

Vue.component('nameofthecomponent',{ // options});

當建立了一個元件,元件的名稱就成為了自定義元素,並且可以在建立的Vue範例元素中使用相同的元素,即在帶有component_testcomponent_test1的div中。

vue_component.js 檔案中,我們使用了 testcomponent 作為元件的名稱,並使用相同的名稱作為div中的自定義元素。

範例

<div id = "component_test">
   <testcomponent></testcomponent>
</div>
<div id = "component_test1">
   <testcomponent></testcomponent>
</div>

vue_component.js 檔案中建立的元件中,新增了一個已經分配了HTML程式碼的模板。 這是一種註冊全域性元件的方法,可以將其作為任何vue範例的一部分,如以下指令碼所示。

Vue.component('testcomponent',{
   template : '<div><h2>這是元件中的內容~</h2></div>'
});

在執行時,同樣會在瀏覽器中體現出來。效果如下圖所示 -

這些元件被賦予了自定義元素標籤,即<testcomponent> </testcomponent>。 但是,當我們在瀏覽器中檢查相同的內容時,不會注意到模板中存在的純HTML中的自定義標記,如以下螢幕截圖所示-

還可以直接將元件作為vue範例的一部分,如以下指令碼所示。

var vm = new Vue({
   el: '#component_test',
   components:{
      'testcomponent': {
         template : '<div><h2>這是元件中的內容~</h2></div>'
      }
   }
});

這被稱為區域性註冊,元件將只是建立vue範例的一部分。

到目前為止,我們了解了具有基本選項的基本組成部分。 現在,讓我們新增更多的選項,如資料和方法。 就像Vue範例有資料和方法一樣,元件也是一樣的。 因此,我們將擴充套件前面學過的資料和方法的程式碼。

範例二

建立一個檔案:component-example2.html ,程式碼如下 -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs元件範例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component2.js"></script>
   </body>
</html>

建立一個檔案:vue_component2.js ,程式碼如下 -

Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h2>Custom Component created by <span id = "name">{{name}}</span></h2></div>',
   data: function() {
      return {
         name : "Maxsu"
      }
   },
   methods:{
      changename : function() {
         this.name = "Kobe Bryant";
      },
      originalname: function() {
         this.name = "Linsa";
      }
   }
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

在上面的vue_component2.js 檔案中,我們新增了一個函式,它返回一個物件。 該物件具有名稱屬性,該屬性被分配值為"Maxsu"。這在以下模板中使用。

template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h2>Custom Component created by <span id = "name">{{name}}</span></h2></div>',

儘管資料是元件中的一個函式,但是可以像使用Vue範例一樣使用它的屬性。 另外,還有兩個方法,即changenameoriginalname。 在更改名稱中更改name屬性,而在原始名稱中,將其重置為原始名稱。

我們還在div上新增了兩個事件:,mouseovermouseout。 事件的細節將在事件章節中討論。所以現在,mouseover呼叫changename方法,而mouseout呼叫originalname方法。

相同的顯示在下面的瀏覽器中顯示 -

在上面的瀏覽器中所看到的,它顯示了在data屬性中分配的名字,這是同一個名字。 我們還在div上分配了一個mouseover事件,並且還有一個mouseout事件。看看當觸發mouseovermouseout時會發生什麼效果?如下圖所示 -

動態元件

動態元件是使用關鍵字(標籤)<component> </component>建立的,並且使用如下例所示的屬性系結。

範例

建立一個檔案:dynamic-components.html -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs動態元件範例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <component v-bind:is = "view"></component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-size:25;color:red;">VueJs動態元件內容~</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

在瀏覽器中開啟,輸出效果如下 -

動態元件是使用以下語法建立的。

<component v-bind:is = "view"></component>

它有使用v-bind:is = "view"指令並為其分配值檢視。檢視在Vue範例中定義如下。

var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-size:25;color:red;">VueJs動態元件內容~</span></div>'
               }
            }
         });

執行時,模板動態元件將顯示在瀏覽器中。