vue2.0入门及实战开发(三)

1：准备好配置文件package.json（包描述文件&&封装简易的命令）
webpack.config.js文件，打包的配置文件

2：创建index.html，单页应用程序的页面

3：创建main.js，入口文件

4：引入vue和相关的文件xxx.vue

5：new Vue(options)

6：options.(选项)：data methods components props

7：实例
在组件内(xxx.vue)中的this
new Vue()
事件： this.$on(事件名，回调函数(参数))
       this.$emit(事件名，数据)
       this.$once(事件名，回调函数(参数)) 就触发一次
       this.$off(事件名)  取消事件

8：全局
Vue.component('组件名',组件对象)

connector.js
import Vue from 'vue'
var connector=new Vue();
export default connector;


<button @click="listen">听电话</button>
引入连接器
import connect from './connector.js'

export default{
   methods:{
      listen(){
         connect.$on('phone',function(msg){
接收数据，第一个参数是数据的名字，与发送时的名字对应，
第二个参数是一个方法，要对数据的操作         

              console.log(msg);
         });
     }
  }
}

<button @click="call">打电话</button>


import connect from '../connector.js'
export default{
    methods:{
      call(){
发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收
第二个参数是这个数据现在的位置；       
         connect.$emit('phone','6分钟');  
      }
   }
}


注意：this.$on()和this.$emit()的用法区别



引入子组件对象，注册子组件对象
import sub from './components/sub.vue';

Vue.component('subVue',sub);

总结：
看文档的对象分类
1：全局的代表Vue.的
2：实例的代表this.或者new Vue().
3：选项代表new Vue()的参数或者export default里边的属性

通过new Vue()这样的一个对象，来$on('事件名',fn(prop1,pro2))
另一个组件引入同一个vuebus，来$emit('事件名',prop1,prop2)

总结：

    var Event = new Vue();　　　　　　
相当于又new了一个vue实例，Event中含有vue的全部方法；

　　Event.$emit('msg',this.msg);　　　   
发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，
第二个参数是这个数据现在的位置；

　　Event.$on('msg',function(msg){　　
接收数据，第一个参数是数据的名字，与发送时的名字对应，
二个参数是一个方法，要对数据的操作

　　　　/这里是对数据的操作
　　})

　
视频网址：http://yun.itheima.com/search?keys=Vue