1.在script标签中注册组件
<!DOCTYPE html>
<html >
<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>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<greet></greet>
</div>
<script>
Vue.component('greet',{
template:'<p>{{name}} :介绍一下我的女朋友@关晓彤</p>',
data:function(){
return {
name : '鹿晗',
}
}
})
let vm = new Vue({
el: "#app",
data:{
a:1,
},
created(){
console.log('this = ',this);
}
});
</script>
<style scoped>
</style>
</body>
</html>
2.使用template标签注册组件
<!DOCTYPE html>
<html >
<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>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<greet></greet>
</div>
<template id="myComponent">
<p>{{name}} :介绍一下我的女朋友@关晓彤</p>
</template>
<script>
Vue.component('greet', {
template: '#myComponent',
data: function () {
return {
name: '鹿晗',
}
}
})
let vm = new Vue({
el: "#app",
data: {},
});
</script>
</body>
</html>
3.单文件组件
在components中自定义自己的组件 Hello.vue
<template>
<p>{{name}} :介绍一下我的女朋友@关晓彤</p>
</template>
<script>
export default {
name: 'hello',
data () {
return {
name: '鹿晗'
}
}
}
</script>
app.vue
<!-- 展示模板 -->
<template>
<div id="app">
<hello></hello>
</div>
</template>
<script>
// 导入组件
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
4.结果展示
![vue项目：npm打包-S和-D区别：[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)