1.组件的思想,其实是前端模块化/工程化的基础。 把前端页面分成一个个模块
基本步骤:定义组件 - 定义模板 - 将组件挂载到你要用的组件上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<v-header></v-header>
<v-nav></v-nav>
<v-header></v-header>
</div>
<!-- 定义模板:只能有一个根标签 通过id名把模板和组件联系起来 -->
<template id="header">
<div>
<h1>这是头部</h1>
<button @click="add()">按钮</button>
{{msg}}
<img src="https://mat1.gtimg.com/www/mobi/2017/image/logo-text-whitetext_v2.svg" alt="">
</div>
</template>
<template id="nav">
<h1>这是导航</h1>
</template>
<script src="js/vue.js"></script>
<script>
// 定义组件
var vheader={
// 如果模板已经写好。直接使用id名联系
template:'#header',
data(){
return{
msg:'hello'
}
},
methods:{
add(){
this.msg=this.msg+1
}
}
}
new Vue({
el:'#app',
// 挂载组件
components:{
'v-header':vheader,
// 挂载的时候,定义组件
'v-nav':{
template:`#nav`
}
}
})
</script>
</body>
</html>
2.动态组件
动态组件不同的是占位符是-- component动态组件,渲染的占位符是动态的。由msg的值决定 msg的值是什么占位符就是什么 :is=“变量” 变量的值是什么,占位符就是什么
<component :is="msg"></component>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button>按钮</button>
<button @click="change()">修改</button>
<!-- component动态组件,渲染的占位符是动态的。由msg的值决定 msg的值是什么占位符就是什么 -->
<!-- :is="变量" 变量的值是什么,占位符就是什么 -->
<component :is="msg"></component>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'v-header'
},
methods:{
change(){
if(this.msg=='v-header'){
this.msg='v-nav'
}else{
this.msg='v-header'
}
}
},
components:{
'v-header':{
template:'<h1>这是头部</h1>'
},
'v-nav':{
template:'<h1>这是nav</h1>'
}
}
})
</script>
</body>
</html>