VueJS-组件


Vue组件
VueJS的重要功能之一,它创建了自定义元素,这些元素可以在HTML中重用。

让我们来看一个示例并创建一个组件,这将使人们更好地了解组件如何与VueJS一起工作。

<html>
   <head>
    <title>VueJs - Web176教程网/https://www.web176.com</title>
    <script type = "text/javascript" src = "/demo/vue/vue2.min.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
               template : '<div><h1>Web176教程网</h1></div>'
            });
            var vm = new Vue({
               el: '#component_test'
            });
            var vm1 = new Vue({
               el: '#component_test1'
            });
      </script>
   </body>
</html>

在.html文件中,我们创建了两个id为component_testcomponent_test1的div 。在上面显示的.js文件中,使用div ID创建了两个Vue实例。我们创建了一个可与两个视图实例一起使用的通用组件。

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

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

创建组件后,该组件的名称将成为custom元素,并且可以在创建的Vue实例元素中使用相同的名称,即在div内使用ids component_testcomponent_test1

.js文件中,我们使用了一个测试组件作为组件的名称,而同一个名称用作divs中的自定义元素。

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

.js文件中创建的组件中,我们添加了一个模板,并为其分配了HTML代码。这是注册全局组件的一种方法,可以将其作为任何vue实例的一部分,如以下脚本所示。

Vue.component('testcomponent',{
   template : '<div><h1>Web176教程网</h1></div>'
});

在执行时,相同的内容将反映在浏览器中。

VueJS-组件

组件具有自定义元素标签,即<testcomponent> </ testcomponent>。但是,当我们在浏览器中进行检查时,我们不会注意到模板中存在纯HTML格式的自定义标签。

我们还直接将组件作为vue实例的一部分,如以下脚本所示。

var vm = new Vue({
   el: '#component_test',
   components:{
      'testcomponent': {
         template : '<div><h1>This is coming from component</h1></div>'
      }
   }
});

组件将仅是创建的vue实例的一部分。

到目前为止,我们已经看到了具有基本选项的基本组件。现在,让我们添加一些其他选项,例如数据和方法。正如Vue实例具有数据和方法一样,组件也共享相同的数据和方法。因此,我们将扩展已经在数据和方法中看到的代码。

<html>
   <head>
    <title>VueJs - Web176教程网/https://www.web176.com</title>
    <script type = "text/javascript" src = "/demo/vue/vue2.min.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript">
         Vue.component('testcomponent',{
         template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
         data: function() {
            return {
               name : "Ria"
            }
         },
         methods:{
            changename : function() {
               this.name = "Ben";
            },
            originalname: function() {
               this.name = "Ria";
            }
         }
      });
      var vm = new Vue({
         el: '#component_test'
      });
      var vm1 = new Vue({
         el: '#component_test1'
      });
      </script>
   </body>
</html>

在上面的.js文件中,我们添加了作为函数的数据,该函数返回一个对象。该对象具有名称属性,该属性分配了值“ Ria”。在下面的模板中使用它。

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

尽管将数据作为组件中的函数,但我们可以像使用直接Vue实例一样使用其属性。另外,添加了两种方法,changename和originalname。在changename中,我们正在更改name属性,而在originalname中,我们将其重置为原始名称。

我们还在div上添加了两个事件,mouseover和mouseout。事件的详细信息将在“事件”一章中进行讨论。因此,目前,mouseover调用changename方法,mouseout调用originalname方法。

从DEMO中预览效果中可以看到,它显示在data属性中分配的名称,即相同的名称。我们还在div上分配了mouseover事件,同时还分配了mouseout。让我们看看将鼠标悬停和移出鼠标时会发生什么。

鼠标悬停时,我们看到第一个组件的名称更改为Ben,但是,第二个组件保持原样。这是因为数据组件是一个函数,并且它返回一个对象。因此,在一个地方更改时,在其他情况下不会被覆盖。

动态组件

动态组件是使用关键字<component> </ component>创建的,并使用以下示例所示的属性对其进行绑定。

<html>
   <head>
    <title>VueJs - Web176教程网/https://www.web176.com</title>
    <script type = "text/javascript" src = "/demo/vue/vue2.min.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;">Web176教程网</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;">Dynamic Component</span></div>'
      }
   }
});

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

作者:terry,如若转载,请注明出处:https://www.web176.com/vuejs/1054.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2020年11月5日 上午11:34
下一篇 2020年11月5日 下午5:36

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注