目录

Vue.js动画
Vue.js 事件

Vue.js组件



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组件_https://bianchenghao6.com_【vue教程】_第1张

示例说明

在上面的示例中，我们在
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组件_https://bianchenghao6.com_【vue教程】_第2张

具有更多选项的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组件_https://bianchenghao6.com_【vue教程】_第3张

您可以看到输出显示了我们在Index.js文件的data属性中设置的分配名称" Panda"。我们还在div上分配了mouseover和mouseout事件。因此，在鼠标悬停时，您将看到组件的名称更改为Alex，并且在鼠标悬停时，其名称仍与Panda相同。

Vue.js组件_https://bianchenghao6.com_【vue教程】_第4张

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组件_https://bianchenghao6.com_【vue教程】_第5张

示例说明

在上面例如，您可以看到动态组件是通过使用以下语法创建的。 
 <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>'
       }
    }
 });

执行后，您可以看到模板在浏览器中显示"这是一个动态组件示例"。


Vue.js动画
Vue.js 事件