Example1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <button-counter>点击</button-counter> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> /* 组件注册注意事项 如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是 在普通的标签模板中，必须使用短横线的方式使用组件 */ Vue.component('HelloWorld', { data: function() { return { msg: 'HelloWorld' } }, template: '<div>{{msg}}</div>' }); Vue.component('button-counter', { data: function() { return { count: 0 } }, template: ` <div> <button @click="handle">点击了{{count}}次</button> <button>测试123</button> <HelloWorld></HelloWorld> </div> `, methods: { handle: function() { this.count += 2; } } }) var vm = new Vue({ el: '#app', data: { }, methods: { } }) </script> </body> </html> 组件编写方式与Vue实例的区别 /* 1. 自定义组件需要有一个root element 2. 父子组件的data是无法共享的 3. 组件可以有data,methods,computed.., 但是data必须是一个函数 */ Vue调试(Devtools)工具用法地址
https://github.com/vuejs/vue-devtools
/* */ 安装下载包并打包
git clone https://github.com/vuejs/vue-devtools.git cd vue-devtools yarn install && yarn build谷歌浏览器打开开发者模式,加载打包后的shell-chrome目录
组件间数据交互 父组件向子组件传值1. 组件内部通过props接受传递过来的值
Vue.component('menu-item',{ props: ['title'], template: '<div>{{ title }}</div>div>' </div> })2. 父组件通过属性将值传递给子组件
<menu-item title="来自父组件的数据"></menu-item> <menu-item :title="title"></menu-item>Example1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <div>{{pmsg}}</div> <menu-item title='来自父组件的值'></menu-item> <menu-item :title='ptitle' content='hello'></menu-item> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> /* 父组件向子组件传值-基本使用 */ Vue.component('menu-item', { props: ['title', 'content'], data: function() { return { msg: '子组件本身的数据' } }, template: '<div>{{msg + "----" + title + "-----" + content}}</div>' }); var vm = new Vue({ el: '#app', data: { pmsg: '父组件中内容', ptitle: '动态绑定属性' } }); </script> </body> </html> 子组件向父组件传值 /* 1. 子组件通过自定义事件向父组件传递信息 <button v-on:click='$emit("enlarge-text")'>扩大字体</button> 2. 父组件监听子组件的事件 <menu-item v-on:enlarge-text='fontSize += 0.1'></menu-item> */Example1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div> <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> /* 子组件向父组件传值-携带参数 */ Vue.component('menu-item', { props: ['parr'], template: ` <div> <ul> <li :key='index' v-for='(item,index) in parr'>{{item}}</li> </ul> <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button> <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button> </div> ` }); var vm = new Vue({ el: '#app', data: { pmsg: '父组件中内容', parr: ['apple', 'orange', 'banana'], fontSize: 10 }, methods: { handle: function (val) { // 扩大字体大小 this.fontSize += val; } } }); </script> </body> </html> 非父子组件间传值 /* 1. 单独的事件中心管理组件间通信 var eventHub = new Vue() 2. 监听事件与销毁事件 eventHub.$on('add-todo',addTodo) eventHub.$off('add-todo') 3. 触发时间 eventHub.$emit('add-todo',id) */