VueJS组件
Vue组件 是创建自定义元素的VueJS的重要功能之一，可在HTML中重用。
让我们来看一个示例并创建一个组件，这将使你更好地了解组件如何与VueJS一起使用。
<html> <head> <title>VueJs Instance</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><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
在.html文件中，我们创建了两个ID为的div component_test and component_test1 . In the .js 上面显示的文件中，使用div ID创建了两个Vue实例。我们创建了一个可与两个视图实例一起使用的通用组件。
要创建组件，请遵循以下语法。
Vue.component('nameofthecomponent',{ // 选项});
创建组件后，该组件的名称将成为custom元素，并且可以在创建的Vue实例元素中使用相同的名称，即在具有ID的div内 component_test and component_test1 .
In the .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>This is coming from component</h1></div>'
});
在执行时，相同的内容将反映在浏览器中。
组件具有自定义元素标签，即
我们还直接将组件作为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 Instance</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 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'
});
In the .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。事件的详细信息将在“事件”一章中进行讨论。因此，目前，鼠标悬停调用 更换名字 方法和mouseout调用 原名 method.
在以下浏览器中显示相同的显示。
从上面的浏览器中可以看到，它显示在data属性中分配的名称，即相同的名称。我们还在div上分配了mouseover事件，同时还分配了mouseout。让我们看看将鼠标悬停和移出鼠标时会发生什么。
在鼠标悬停时，我们看到第一个组件的名称更改为Ben，但是，第二个组件保持原样。这是因为数据组件是一个函数，并且它返回一个对象。因此，在一个地方更改时，在其他情况下不会被覆盖。
动态组件
动态组件是使用关键字创建的
<html>
<head>
<title>VueJs Instance</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;">Dynamic Component</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>'
}
}
});
执行后，模板 动态组件 在浏览器中显示。