开发学院

您的位置:首页>教程>正文

教程正文

VueJS 组件

VueJS 组件

  组件是VueJS的重要功能之一,组件是可以在HTML中重用的自定义元素。

  通过例子来创建一个组件,这将更好地理解组件如何与VueJS一起工作。

例子

  创建一个html文件: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>

  创建一个js文件: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_test和component_test1的div。 在上面的vue_component.js 文件中,使用div的id创建了两个Vue实例。并创建了一个公共组件(testcomponent),用于两个视图实例。

  要创建组件,请遵循以下语法。

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

  当创建了一个组件,组件的名称就成为了自定义元素,并且可以在创建的Vue实例元素中使用相同的元素,即在带有component_test和component_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>'
});

  在执行时,同样会在浏览器中体现出来。效果如下图所示:

 

global_component.jpg

  这些组件被赋予了自定义元素标签,即<testcomponent> </testcomponent>。 但是,当我们在浏览器中检查相同的内容时,不会注意到模板中存在的纯HTML中的自定义标记,如以下屏幕截图所示:

testcomponent.jpg

  我们也可以直接将组件作为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实例一样使用它的属性。 另外,还有两个方法,即changename和originalname。 在更改名称中更改name属性,而在原始名称中,将其重置为原始名称。

  我们还在div上添加了两个事件:,mouseover和mouseout。 事件的细节将在事件章节中讨论。所以现在,mouseover调用changename方法,而mouseout调用originalname方法。

  相同的显示在下面的浏览器中显示 :

 

originalname.jpg

  在上面的浏览器中所看到的,它显示了在data属性中分配的名字,这是同一个名字。 我们还在div上分配了一个mouseover事件,并且还有一个mouseout事件。看看当触发mouseover和mouseout时会发生什么效果?如下图所示 -

mouseover.jpg

动态组件

  动态组件是使用关键字(标签)<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>

  在浏览器中打开,输出效果如下:

 

dynamic_component.jpg

 动态组件是使用以下语法创建的。

<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>'
               }
            }
         });

  执行时,模板动态组件将显示在浏览器中。