05|组件基础及组件注册
2022/2/27 23:27:16
本文主要是介绍05|组件基础及组件注册，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
文章目录
- 1.组件的定义
- 组件的名称
- 组件的配置
- data：通过函数返回数据对象，以保证每个组件实例使用的数据对象是独立的
- methods
- template：模板字符串
- props：属性声明（可以给默认值）
- 2.实例
1.组件的定义
组件的名称
组件的配置
data：通过函数返回数据对象，以保证每个组件实例使用的数据对象是独立的
methods
template：模板字符串
props：属性声明（可以给默认值）
2.实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id='app'>
{{message}} {{message + message}}
<div :id="message"></div>
<todo-list></todo-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: '' +
'<li>\n' +
'<span v-if="del">{{title}}</span>\n' +
'<span v-else style="text-decoration: line-through">{{title}}</span>\n' +
'<button v-show="!del">删除</button>\n' +
'</li>',
data: function () {
return {}
},
methods: {
}
})
Vue.component("todo-list", {
template: '' +
'<ul>\n' +
'<todo-item v-for="item in list" data-test="dd" :title="item.title" :del="item.del"></todo-item>\n' +
'</ul>',
data: function () {
return {
list: [
{
title: '课程1',
del: false
},
{
title: '课程2',
del: true
}
]
}
}
})
var vm = new Vue({
el: '#app',
data: {
message: 'hello world',
list: [
{
title: '课程1',
del: false
},
{
title: '课程2',
del: true
}
]
}
})
</script>
</body>
</html>
这篇关于05|组件基础及组件注册的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
