Vue总结知识

组件化跟模块化:
模块化:是从代码的角度分析问题,吧可复用的模块抽离为单独的模块commonJS就是模块化
作用:提高了代码的复用率,提供模块作用域的概念,防止全局变量污染,方便了程序员之间互相调用

组件化使用页面UI的角度进行分析问题;
吧页面中可复用的UI结构,抽离为单独的组件,
组件的好处,方便了UI结构的服用,随着项目的深入开发,手里的组件越来越多,开发更加方便

Vue中如何定义组件:
过滤器:vue.filter(‘过滤器的名字’,function(originVal){

return 一个值
}

定义一个全局组件:
Vue.component(‘前缀-组件名称’,{配置对象 template,data,methods,一系列的生命周期函数})

定义私有组件:
全局的都不带S,私有的代S
在methods后面定义
components:{
私有组件:
“”:{}键值对的方式
‘my-com’:{
template:‘

111

’
}

组件中的data必须定义一data方法返回一个对象
data() {

return{ 组件中的数据放在return中}

}

组件中methods方法定义
filters跟实例中是一样的都是一样的

组件跟实例的相同点跟不同点:
组件中定义data必须是一个function并return 一个对象
而Vue实例中data既可以是对象也可以是方法
组件中通过template属性来指定组件的ui结构,而Vue实例中通过el属性来指定实例控制的区域,但实例也可以用template来指定实例控制的区域

相同点:
都有自己的私有过滤器,methods方法

组件之间的传值: 父向子传递普通数据用的是属性绑定机制,如果传递的是方法则使用事件绑定机制

父向子传值: 必须prop:[]接收
父向子传值简单的数据用的是属性绑定机制:
父向子传值的时候自定义属性必须小写
父向子传递对象:

子向父传值:用的是事件绑定机制v-on 子向父传递本质上就是方法的调用,通过父向子传递的方法在合适的时候给父组件传递参数

兄弟之间的传递:
使用EventBus
1 先new一个空的实例
2

发送数据的一方需要使用bus.$emit(‘方法名’,‘传递的参数’)来触发一个方法的调用

接收数据的一方,需要在created生命周期函数中,使用bus.$on(‘方法名’,function(‘方法名’,function(传递的数据){})

data跟props的对比:
data 1data中存放的数据值私有数据,其他组件无法访问,data中的数据是可读可写的

props 用来接收外界传过来的数据
props是只读不可写的,如果组件接收的值需要重新修改,需要在data上重新定义和接收

项目分析:
build跟config是webpack配置文件
src源代码目录

status:静态资源

babelrc
.editorconfig 编辑器的配置文件
eslintignore 忽略文件
package所有文件