Vue组件初使用
vue组件的入门使用
一、基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件初体验</title>
</head>
<body>
<div id="app">
<p>调用全局注册的按钮</p>
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script src="js/vue.js"></script>
<script>
//1、创建一个Vue实例
const app = Vue.createApp({
data(){
return{
msg:'基础模板'
}
}
})
//2、注册一个全局组件(必须在挂在之前)
app.component('button-counter',{
data(){
return{
count:0
}
},
template:`
<button v-on:click="count++">你点击了按钮{
{
count}}次</button>
`
});
//3、挂载Vue实例
app.mount("#app");
</script>
</body>
</html>
组件效果
二、组件笔记
<script>
//1、创建一个Vue实例
const app = Vue.createApp({
data(){
return{
msg:'基础模板'
}
}
})
//2、注册一个全局组件(必须在挂在之前)
app.component('ButtonCounter',{
data(){
return{
count:0
}
},
template:`
<button v-on:click="count++">你点击了按钮{
{
count}}次</button>
`
});
//3、挂载Vue实例
app.mount("#app");
</script>
这里需要在挂载Vue实例前注册组件
三、命名方法
在命名时用
<button-counter></button-counter>
这个标签为例子
一般有两种命名方法
1、法一
用 - 隔在中间
2、法二
单词首字母大写拼在一起
ButtonCounter
3、使用
两种命名法都是这样使用<button-counter></button-counter>
只有在项目工程化才可以<ButtonCounter></ButtonCounter>这样使用法二命名的组件