代码拉取完成，页面将自动刷新
├─README.md ├─babel.config.js ├─jsconfig.json ├─output.js ├─package-lock.json ├─package.json ├─vue.config.js ├─src | ├─App.vue | ├─main.js | ├─components | | ├─school-item.vue | | └student-item.vue | ├─assets | | └logo.png ├─public | ├─favicon.ico | └index.html
使用 vue inspect > output.js 可以查看vue 脚手架的默认配置 使用 vue.config.js 对脚手架个性化定制
1.被用来给元素或子组件注册引用信息（Id 的替代者） 2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（VueComponent） 3.使用方式
功能：让组件接收外部传过来的数据 1) 传递数据 2) 接收数据 第一种方法： props: ['name'] 第二种方法：(限制类型) props:{ name: String } 第三种方法：（限制类型，必要性限制，默认值） props:{ name: { type: String, required: true, default: '' } } 注：props是只读的，vue底层会监测你对props的修改，如果进行了修改，就会发出警告， 若需要修改，那行请在data中定义一个其它变量引用该props的值，进行修改
功能：可以把多个组件共用的配置提取成一个混入对象 使用方法： 第一步定义混合： 例如： { data(){}, methods:{} } 第二步使用混入，例如： 1) 全局混入，Vue.mixin(xxxx) 2) 局部混入，mixin: [xxx]
功能：用于增强vue
本质：包含install方法的一个对象，install 的第一个参数是vue,第二个以后的参数是插件使用者传递的数据。
定义插件：
对象.install = function(Vue, options){
//1.添加全局过滤器
Vue.filter()
// 2.添加全局指令
Vue.directive()
//3.配置全局混入()
Vue.mixin()
// 4.添加实例方法
Vue.prototype.$mymethod = function(){}
Vue.prototype.$myProperty = xxxx
}
使用插件： Vue.use()
作用：让样式在局部生效，防止冲突
<style scoped> ## 总结TodoList * 组件化编码流程 1）拆分静态组件：组件要按照功能点拆分，命名不要与HTML元素冲突 2）实现动态组件：考虑好数据的存储位置，数据是一个组件在用，还是一些组件在用 3）实现交互：从绑定事件开始 * props适用于： 1）父组件 =》 子组件 通信 2）子组件 =》 父组件 通信（要求父先给子一个函数） * 使用v-model时要切记，v-model绑定的值不能是props传过来的值，因为PROPS 是不可以修改的 * props 传过来的若是对象类型的值，修改对象中的属性时VUe不会报错，但不推荐 ## 组件的自定义事件 1.一种组件间通信的方式，适用于 子组件向 父组件传递 2.使用场景：A是父组件，B是子组件，B给A传数据，好么就要在A中给B绑定自定义事件（事件的回调在A中） 3.绑定自定义事件 1）第一种：在父组件中： 2）第二种：在父组件中： ``` export default { ... mounted:{ this.$refs.xxx.$on('customClick', this.test); } } ``` 4.触发自定义事件：this.$emit('customClick', 数据) 5.解绑自定义事件this.$off('customClick') 6.组件上也可以绑定原生DOM事件，需要使用native修饰符 7.注意：通过 ``` this.$refs.xxx.$on('customClick',回调) ``` 绑定自定义事件时，回调要么配置在methods中，要么用匿名函数，原因是this 在匿名函数中是没有数据的。this会向上找数据 ## 全局事件总线 (GlobalEventBus) 1.一种组件间的通信方式，适用于任何组件间通信 2.安装全局事件总线： ``` new Vue({ .... beforeCreate(){ Vue.prototype.$bus = this } }) ``` 3.使用事件总线 1）接收数据：A组件接收数据，则在A组件中组$bus绑定自定义事件，事件的回调留在A组件上 2）提供数据：this.$bus.$emit('xxxx',数据) 4.在beforeDestroy()钩子中，用$off解绑当前组件所用到的事件. ## 消息订阅与发布 1.一种组件间通信的方式。适用于任何组件间的通信 2.使用步骤 1）安装pubsub-js 2)引入 import pubsub from 'pubsub-js' 3)接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身 mounted(){ this.pid = pubsub.subscribe('hello',()=>{ }) } 4)提供数据：pubsub.publish('hello',666) 5)使用完最好销毁该订阅,在beforeDestroy 方法中 beforeDestroy(){ pubsub.unsubscribe(this.pid); }此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。