17 组件化开发之定义局部组件
组件是什么?有什么用
扩展 HTML 元素,封装可重用的代码,目的是复用
-例如:有一个轮播,可以在很多页面中使用,一个轮播有js,css,html
-组件把js,css,html放到一起,有逻辑,有样式,有html
2.局部组件的定义和使用
定义局部组件:components
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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>Title</title> <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>