组件基础
一、组件是什么?
组件系统是VUE的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎每一种类型的应用界面都可以抽象为一个组件树。
组件的重点就是可复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message }} {{message + message}}
<div :id="message"></div>
<ul>
<!-- <li v-for = "item in list">
<span v-if = "!item.del">
{{item.title}}
</span>
<span v-else style="text-decoration: red line-through;">
{{item.title}}
</span>
<button v-show = "!item.del">删除</button>
</li> -->
<todo-item v-for = "item in list" :title="item.title" :del="item.del"></todo-item>
</ul>
<!-- <todo-iteam v-for = "item in list" :title="item.title" :del="item.del"></todo-iteam> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</body>
<script>
Vue.component('todo-item',{
//定义属性声明
props: {
title:String,
del: {
type:Boolean,
default:false,
},
},
template: `
<li >
<span v-if = "!del">
{{title}}
</span>
<span v-else style="text-decoration: red line-through;">
{{title}}
</span>
<button v-show = "!del">删除</button>
</li>
` //html的模板
,
data: function () {
return {}
},
methods: {
},
})
var vm = new Vue({
el:'#app',
data:{
message:'hello world',
list:[{
title: '课程1',
del: false
},
{
title: '课程2',
del: true
},
],
}
})
</script>
</html>
另外一种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message }} {{message + message}}
<div :id="message"></div>
<!-- <ul>
<todo-item v-for = "item in list" :title="item.title" :del="item.del"></todo-item>
</ul> -->
<!-- <todo-iteam v-for = "item in list" :title="item.title" :del="item.del"></todo-iteam> -->
<todo-list></todo-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</body>
<script>
Vue.component('todo-item',{
//定义属性声明
props: {
title:String,
del: {
type:Boolean,
default:false,
},
},
template: `
<li >
<span v-if = "!del">
{{title}}
</span>
<span v-else style="text-decoration: red line-through;">
{{title}}
</span>
<button v-show = "!del">删除</button>
</li>
` //html的模板
,
data: function () {
return {}
},
methods: {
},
})
Vue.component('todo-list',{
template: `
<ul>
<todo-item v-for = "item in list" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
data: function(){
return {
list:[{
title: '课程1',
del: false
},
{
title: '课程2',
del: true
}
],
}
}
})
var vm = new Vue({
el:'#app',
data:{
message:'hello world',
}
})
</script>
</html>