17 组件化开发之定义局部组件
组件是什么？有什么用
扩展 HTML 元素，封装可重用的代码，目的是复用
-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
-组件把js，css，html放到一起，有逻辑，有样式，有html
2.局部组件的定义和使用
定义局部组件：components
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div class="app">
<children>children>
<p>换个行p>
<p>换个行p>
<p>换个行{{name}}p>
<children>children>
div>
body>
<script>
var vm = new Vue({
el: '.app',
data: {
name:'彭于晏'
},
components:{
'children':{
template:`
<div>
<h1 style="background: red">{{name}}</h1>
<hr>
<button @click="handleClick">点我看美女</button>
</div>
`,
data(){
return {
name:'lqz'
}
},
created(){
console.log("我创建了")
},
methods:{
handleClick(){
alert('我弹出来了')
}
}
}},
})
script>
html>
3.全局组件的定义和使用
定义全局组件
Vue.component
注意：
- 没有代码提示，语法检查，目前这么用
- 后面会使用webpack打包，直接定义成 xx.vue文件，通过webpack打包
- 组件名字global（可随便起）
- 组件模板template，HTML标签必须在div里面
- data是一个方法（函数）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div class="app">
<h1>局部组件h1>
<children>children>
<br>
<br>
<br>
<hr>
<h1>全局组件h1>
<child>child>
div>
body>
<script>
// 全局组件
Vue.component('child', {
template: `
<div>
<button @click="handleClick">返回</button>
我是NavBar{{aa}}
<button style="background: red">主页</button>
</div>
`,
data() {
return {
aa: '我是aa'
}
},
methods: {
handleClick() {
alert("返回了")
}
}
})
var vm = new Vue({
el: '.app',
data: {
name: '彭于晏'
},
components: {
'children': {
template: `
<div>
<h1 style="background: red">{{name}}</h1>
<child></child>
<hr>
<button @click="handleClick">点我看美女</button>
</div>
`,
data() {
return {
name: 'lqz'
}
},
created() {
console.log("我创建了")
},
methods: {
handleClick() {
alert('我弹出来了')
}
},
}
},
})
script>
html>