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
示例说明
在上面的示例中,我们在
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实例添加数据和方法一样。请参见以下示例:
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方法。
现在,执行上述程序以查看输出。程序执行后,您将看到以下输出:
输出:
您可以看到输出显示了我们在Index.js文件的data属性中设置的分配名称" Panda"。我们还在div上分配了mouseover和mouseout事件。因此,在鼠标悬停时,您将看到组件的名称更改为Alex,并且在鼠标悬停时,其名称仍与Panda相同。
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;
}
程序执行后,您将看到以下输出:
输出:
这是一个动态组件示例
示例说明
在上面例如,您可以看到动态组件是通过使用以下语法创建的。
<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>'
}
}
});
执行后,您可以看到模板在浏览器中显示"这是一个动态组件示例"。