组件可以复用，注意全局组件最好使用my-component-name 命名，在VScode上遇过坑
一、Vue对象
若Vue对象中有template，那么template的优先级高于，原本的视图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> </div> <script src="./js/vue.js"></script> <script> new Vue({ el: "#app", data(){ return { msg: "点我", } }, template: ` <div> <button>{{msg}}</button> </div> ` }) </script> </body> </html>
二、局部组件
注意：
1、单词拼写
2、子组件是 组件名 = {}
3、声明、挂载、引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- <button>{{msg}}</button> --> </div> <script src="./js/vue.js"></script> <script> // Vue(父)->App(子) //1. 声明子组件 let App = { data(){ return { text:"咬我", } }, template: `<p>{{text}}</p>`, } new Vue({ el: "#app", data(){ return { msg: "点我", } }, // 若 Vue对象有template，则template优先级高 // 3.引用子组件 template: ` <div> <button>{{msg}}</button> <App></App> </div> `, // 2.挂载子组件 components:{ App, } }) </script> </body> </html>
一、全局组件
注意：全局组件不用挂载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<my-button></my-button>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.component("my-button", {
data(){
return {
}
},
template: '<button>点击</button>'
})
var app = new Vue({
el: "#app",
data: {
msg: "组件",
},
methods: {},
computed:{},
})
</script>
</body>
</html>
二、模块系统
<template>
<div id="app">
<h3>{{msg}}</h3>
<Vhead></Vhead>
<Vcontent></Vcontent>
<Vfoot></Vfoot>
</div>
</template>
<script>
import Vhead from "./components/Vhead"
import Vcontent from "./components/Vcontent"
import Vfoot from "./components/Vfoot"
export default {
name: "App",
data(){
return{
msg: "第一个Vue项目",
}
},
methods: {},
computed: {},
components:{
Vhead,
Vcontent,
Vfoot,
},
}
</script>
<style scoped>
</style>