<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div class="app">
<!-- v-text: vue指令 本质是：自定义属性，data-v-text dataset -->
<!-- <div v-text="hello"></div> -->
<!-- vue组件：自定义标签 -->
<!-- BtnCounter:驼峰，因为html不区分大小写,所以要转成蛇形 -->
<!-- BtnCounter -> btn-counter -->
<btn-counter></btn-counter>
</div>
<template id="counter">
<button @click="count++">点赞：{{count}}</button>
</template>
<script>
//1. vue实例
const app = Vue.createApp({})
//2.注册组件: 名称， 模板， 数据
app.component('BtnCounter', {
//模板, Html代码
template: `#counter`,
//数据,data方法
data() {
return {
count: 0
}
}
})
// 3.挂载vue实例绑定关联起来
app.mount('.app')
</script>
</body>
</html>
此处评论已关闭