VUE教程

Vue.js组件

Vue.js组件是Vue.js最重要的功能之一,用于创建可在 HTML 。组件是具有名称的可重复使用的Vue.js实例。我们可以将组件用作根 Vue.js实例中的自定义元素。
以下是创建组件的语法。
语法:
Vue.component('nameofthecomponent',{ // options});
让我们创建一个组件以更好地了解它如何与 Vue.js 一起使用。请参见以下示例:
Index.html文件:
<html>
   <head>
      <title>Vue.js Component</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test2">
         <testcomponent></testcomponent>
      </div>
      <script src="index.js"></script>
   </body>
</html>
Index.js文件:
Vue.component('testcomponent',{
   template : '<div><h1>This is a component example</h1></div>'
});
var vm = new Vue({
   el: '#component_test1'
});
var vm1 = new Vue({
   el: '#component_test2'
});
我们使用一个简单的CSS文件使输出更具吸引力。
Index.css文件:
html, body {
    margin: 5px;
    padding: 0;
}
程序执行后,您将看到以下输出:
输出:
This is a component example
This is a component example
Vue.js Component

示例说明

在上面的示例中,我们在 Index.html文件中创建了两个ID为 component_test1 component_test2 的div。一旦创建了组件,组件的名称将成为自定义元素,我们可以在创建的Vue实例元素中使用该自定义元素,即在div内使用ids component_test1和component_test2。在这里,我们将测试组件用作组件的名称,并将相同的名称用作div中的自定义元素。
<div id = "component_test1">
   <testcomponent></testcomponent>
</div>
<div id = "component_test2">
   <testcomponent></testcomponent>
</div>
Index .js文件中,我们创建了两个具有各自div ID的Vue.js实例。
var vm = new Vue({
   el: '#component_test1'
});
var vm1 = new Vue({
   el: '#component_test2'
我们创建了一个用于两个视图实例的通用组件。
Vue.component('testcomponent',{
   template : '<div><h1>This is a component example</h1></div>'

组件的本地注册

我们可以使用Index.js文件中的以下代码直接将组件作为vue.js实例的一部分。此方法称为本地注册。在这里,组件将仅是创建的vue实例的一部分。
var vm = new Vue({
   el: '#component_test1',
   components:{
      'testcomponent': {
        template : '<div><h1>This is a component example</h1></div>'
      }
   }
});
程序执行后,您将看到以下输出:
输出:
Vue.js组件

具有更多选项的Vue.js组件

我们可以添加更多选项,例如数据和方法Vue.js组件。就像我们向Vue.js实例添加数据和方法一样。请参见以下示例:
Index.html文件:
<html>
   <head>
      <title>Vue.js Component</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test2">
         <testcomponent></testcomponent>
      </div>
      <script src="index.js"></script>
   </body>
</html>
Index.js文件:
Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>This Custom Component is created by <span id = "name">{{name}}</span></h1></div>',
   data: function() {
      return {
         name : "Panda"
      }
   },
   methods:{
      changename : function() {
         this.name = "Alex";
      },
      originalname: function() {
         this.name = "Panda";
      }
   }
});
var vm = new Vue({
   el: '#component_test1'
});
var vm1 = new Vue({
   el: '#component_test2'
});
在上面的Index.js文件中,我们以返回对象的函数的形式添加了数据。该对象具有名称属性,该属性已分配值"Panda"。请参见示例中使用的以下模板。
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>This Custom Component is created by <span id = "name">{{name}}</span></h1></div>',
   data: function() {
      return {
         name : "Panda"
      }
在这里,我们将数据用作组件中的函数,并且也使用与直接Vue实例相同的方式使用其属性。在这里,我们使用了两种方法, 更改名称原始名称。在changename中,我们更改了name属性,而在originalname中,我们将其重置为原始名称。
我们还在div上添加了两个事件: mouseover mouseout。这里,mouseover事件用于调用changename方法,mouseout事件用于调用originalname方法。
现在,执行上述程序以查看输出。程序执行后,您将看到以下输出:
输出:
Vue.js Component
您可以看到输出显示了我们在Index.js文件的data属性中设置的分配名称" Panda"。我们还在div上分配了mouseover和mouseout事件。因此,在鼠标悬停时,您将看到组件的名称更改为Alex,并且在鼠标悬停时,其名称仍与Panda相同。
Vue.js Component

Vue.js动态组件

动态组件是指在构建时未在应用程序中定义位置的组件。我们不在任何Vue.js模板中定义它。取而代之的是,在运行时实例化动态组件并将其放置在应用程序中。在Vue.js中,使用关键字 创建一个动态组件,并使用属性对其进行绑定。让我们举个例子来清楚地理解它。
Index.html文件:
<html>
   <head>
      <title>Vue.js Component</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/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:Blue;">This is a Dynamic Component Example</span></div>'
               }
            }
         });
      </script>
      <script src="index.js"></script>
   </body>
</html>
Index.js文件:
var vm = new Vue({
   el: '#databinding',
   data: {
      view: 'component1'
   },
   components: {
      'component1': {
         template: '<div><span style = "font-size:25;color:Blue;">This is a Dynamic Component Example</span></div>'
      }
   }
});
我们使用一个简单的CSS文件使输出更具吸引力。
Index.css文件:
html, body {
    margin: 5px;
    padding: 0;
}
程序执行后,您将看到以下输出:
输出:
这是一个动态组件示例
Vue.js Component

示例说明

在上面例如,您可以看到动态组件是通过使用以下语法创建的。
<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>'
      }
   }
});
执行后,您可以看到模板在浏览器中显示"这是一个动态组件示例"。

昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4