全局组件 直接上代码实例
比如我设置一个按钮 单次点击的时候 反馈不同的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 使用自定义组件 -->
<div id="app">
<btn></btn>
<btn></btn>
</div>
<!-- 引入 Vue.js 库 -->
<script src="../day01/js/vue.js"></script>
<script>
// 定义自定义组件
Vue.component('btn', {
template: '<button v-on:click="ck">点击了{{num}}次</button>',
data: function () {
return {
num: 0 // 组件内部的数据
}
},
methods: {
ck: function () {
console.log(this.num + 1),
this.num++; // 点击按钮时增加 num 的值
}
}
});
let app = new Vue({
el: '#app'
});
</script>
</body>
</html>
局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<reg></reg>
</div>
<!-- 使用 CDN 链接引入 Vue.js -->
<script src="../day01/js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
components: {
reg: {
data() {
return {
num: 1
};
},
// 使用引号包裹模板字符串
template: '<div><button>注册组件{{num}}</button></div>'
}
}
});
</script>
</body>
</html>
评论 (0)