溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了vue組件定義，全局、局部組件，配合模板及動態組件功能。分享給大家供大家參考，具體如下：
一、定義一個組件
定義一個組件:
1. 全局組件
var Aaa=Vue.extend({
template:'<h4>我是標題3</h4>'
});
Vue.component('aaa',Aaa);
*組件里面放數據:
data必須是函數的形式，函數必須返回一個對象(json)
2. 局部組件
放到某個組件內部
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部組件
aaa:Aaa
}
});
1. 全局組件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <style> </style> </head> <body> <div id="box"> <aaa></aaa> </div> <script> var Aaa=Vue.extend({ template:'<h4>我是標題3</h4>' }); Vue.component('aaa',Aaa); var vm=new Vue({ el:'#box', data:{ bSign:true } }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script>
//另外一種寫法，全局
Vue.component('my-aaa',{
template:'<strong>好</strong>'
});
var vm=new Vue({
el:'#box'
});
</script>
</body>
</html>
組件里面放數據：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<script>
var Aaa=Vue.extend({
//組件里面放數據:data必須是函數的形式，函數必須返回一個對象(json)
data(){
return {
msg:'我是標題^^'
};
},
methods:{
change(){
this.msg='changed'
}
},
template:'<h4 @click="change">{{msg}}</h4>'
});
Vue.component('aaa',Aaa);//放在這里是全局
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
</script>
</body>
</html>
2. 局部組件
放到某個組件內部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
<br/>
<br/>
<my-aaa></my-aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h4>{{msg}}</h4>',
data(){
return {
msg:'ddddd'
}
}
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部組件
aaa:Aaa,
'my-aaa':Aaa//這里的my-aaa需要用引號
}
});
</script>
</body>
</html>
另外一種寫法，局部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'<h3 @click="change">標題2->{{msg}}</h3>'
}
}
});
</script>
</body>
</html>
二、配合模板
配合模板:
1. template:'<h3 @click="change">標題2->{{msg}}</h3>'
2. 單獨放到某個地方
a).
<script type="x-template" id="aaa">
<h3 @click="change">標題2->{{msg}}</h3>
</script>
b).
<template id="aaa">
<h2>標題1</h2>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<script type="x-template" id="aaa">
<h3 @click="change">標題2->{{msg}}</h3>
<ul>
<li>1111</li>
<li>222</li>
<li>3333</li>
<li>1111</li>
</ul>
</script>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
</script>
</body>
</html>
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<template id="aaa">
<h2 @click="change">{{msg}}</h2>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']
}
},
methods:{
change(){
this.msg='changed title';
}
},
template:'#aaa'
}
}
});
</script>
</body>
</html>
三、動態組件
動態組件:
<component :is="組件名稱"></component>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<input type="button" @click="a='aaa'" value="aaa組件">
<input type="button" @click="a='bbb'" value="bbb組件">
<component :is="a"></component>
<!--<component :is="組件名稱"></component>-->
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h3>我是aaa組件</h3>'
},
'bbb':{
template:'<h3>我是bbb組件</h3>'
}
}
});
</script>
</body>
</html>
運行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
