提示:
本文为VUE栏目:VUE学习:vue基础11————组件:组件的模板
VUE学习:vue基础11————组件:组件的模板
前言
本文vue框架中组件相关。
提示:以下是本篇文章正文内容,下面案例可供参考
组件
组件的模板
模板化自定义组件
<body>
<div id="app">
<test1></test1>
</div>
<template id="t1">
<h3>我是模板化的自定义组件</h3>
</template>
</body>
<script>
Vue.component('test1',Vue.extend({
template:'#t1',
}));
let vm = new Vue({
/*全局组件中使用模板*/
el: "#app",
data: {},
methods: {},
components:{
}
});
</script>
模板中的标签也必须只能有一个跟标签
<body>
<div id="app">
<test2></test2>
</div>
<template id="t2">
<div>
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<ol>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ol>
</div>
</template>
</body>
<script>
let vm = new Vue({
/*全局组件中使用模板*/
el: "#app",
data: {},
methods: {},
components:{
test2:{
template: '#t2'
},
}
});
</script>
使用script标签作为模板
使用script标签作为模板必须指定id和type的值;x-template
<body>
<div id="app">
<test3></test3>
</div>
</body>
<script id="t3" type="x-template">
<div>
<p>script标签中的模板内容1</p>
<p>script标签中的模板内容2</p>
<p>script标签中的模板内容3</p>
</div>
</script>
<script>
let vm = new Vue({
/*全局组件中使用模板*/
el: "#app",
data: {},
methods: {},
components:{
test3:{
template: '#t3'
}
}
});
</script>
组件中的data和methods
自定义组件
自定义组件中的data属性必须是一个函数类型,并且这个函数一定要返回一个对象类型
<body>
<div id="app">
<cf></cf>
</div>
<template id="t1">
<p @click="cf">{{msg}}</p>
</template>
</body>
<script>
Vue.component('cf',Vue.extend({
template:'#t1',
/*自定义组件中的data属性必须是一个函数类型,并且这个函数一定要返回一个对象类型*/
data:function () {
return{
msg:"三亿鼠标的梦想"
}
},
methods:{
cf(){
this.msg="黑色小镇"
}
}
}));
let vm = new Vue({
el: "#app",
data: {},
methods: {},
});
</script>
模板化定义组件
<body>
<div id="app">
<cf2></cf2>
</div>
<template id="t1">
<p @click="cf">{{msg}}</p>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {},
components:{
cf2:{
template: '#t1',
data(){
return{
msg:"火麒麟"
}
},
methods:{
cf(){
this.msg='Ak-47';
}
}
}
}
});
</script>