首先先来看下如何定义一个组件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<counter></counter>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.component("counter",{
template:"<div>" +
"<button @click='num++'>" +
"+1" +
"</button>" +
"<br>" +
"{{num}}" +
"</div>",
data(){
return {
num:0
}
}
})
const app = new Vue({
el:"#app",
})
</script>
</html>
这里在定义模板的时候,最外层只能只能定义一个标签(就不可以同级定义两个div),使用的时候,直接加到div里面就可以了。
上面这个就是显示的全局组件,再看看局部组件是如何定义的:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<counter></counter>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const cl = {
template:"<div>" +
"<button @click='num--'>" +
"减1" +
"</button>" +
"<br>" +
"{{num}}" +
"</div>",
data(){
return {
num:100
}
}
}
const app = new Vue({
el:"#app",
components:{
counter:cl
}
})
</script>
</html>