VUE学习：vue基础11————组件：组件的模板
提示：
本文为VUE栏目：VUE学习：vue基础11————组件：组件的模板
VUE学习：vue基础11————组件：组件的模板
- 前言
- 组件
- 组件的模板
-
- 模板化自定义组件
- 模板中的标签也必须只能有一个跟标签
- 使用script标签作为模板
- 组件中的data和methods
-
- 自定义组件
- 模板化定义组件
前言
本文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>