<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
注册的组件 可以拥有属于自己的data data必须是一个函数 并且需要有返回值
自定义组件可以拥有除了el配置项以外 new Vue所有的属性
-->
<div id="app">
<times></times>
<times></times>
<times></times>
<times></times>
</div>
</body>
<script src="vue.min.js"></script>
<script>
// 自定义组件
Vue.component("times", {
data() {
return {
num: 0
}
},
template: `
<button @click="add">点击了{{num}}次</button>
`,
methods: {
add() {
this.num += 1
}
}
})
// 组件 根组件
new Vue({
el: "#app",
data: {
num: 100
}
})
</script>
</html>使用vue组件来封装计次器
最新推荐文章于 2024-10-02 15:18:09 发布
扫一扫
782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
