我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！

通过上一节的学习,我们知道了如何将数据从父组件中传递到子组件中, 除了除了将数据作为props传入到组件中,Vue还允许传入HTML, Vue 实现了一套内容分发的 API

Bus/总线/发布订阅模式用于解决平级组件或者跨级组件之间的通信,因为如果全部用父子组件通信,有的不是父子组件就很繁琐,所以我们利用一个公共的vue实例订阅和发布事件来达到不是父子组件间的通信

原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理

梳理vue2 中 子组件向父组件传参方式. 通过自定义事件, 在父组件使用子组件的组件标签上绑定自定义事件. 子组件内触发这个定义事件, 并通过事件参数向父组件传递参数

本章主要用于介绍组件嵌套,以及嵌套形成的父组件向子组件传参.子组件如何通过pops 接收父组件数据, 以及接收数据处理详情

Vue组件名推荐使用驼峰命名 现在我们来看看为什么在Vue中推荐注册组件时使用驼峰写法, 推荐使用驼峰写法也是和局部组件有关系

组件系统是 Vue 的另一个重要概念,它是一种抽象的概念，类似于积木中的一块块小积木,通过这些小积木拼接成一个大的模型.

通过前面几节的学习，我们已经对vue有了初步的了解，大致了解了vue可以帮我们干什么，那么接下来我们就来看看vue的生命周期和它常用的钩子函数,

通过认识vue2 中computed, watch, methods 之间的区别, 进而在工作中合理的选择不同的选项进行使用.

过滤器是唯一不能使用this来访问数据或者其他方法的地方,这一点是故意设计成这样的, 因为过滤器应该是一个纯函数, 也就是对于同样的输入每次都返回同样的输出,而不涉及任何外部数据, 如果想访问外部数据可以通过参数传递.我们在回顾到目前为止我们所学的知识, 有什么方方案可以很好的将逻辑抽离出来吗, 计算属性和侦听器显然不合适,因为都需要检测依赖数据的变化, 有多少数据就需要多少的计算属性,和多少的侦听器, 反而不美。注册的全局过滤器,就可以在vue任何地方都可以使用。

侦听器可以监听data对象属性或者计算属性的变化 watch是观察属性的变化 所以watch的属性名必须要与观察人的名字保持一致; 只有观察的值发生了变化才会触发,

其实我们发现这样可以达到复用的目的, 但是如果我们测试就会发现,函数在每一次调用的时候都会执行, 都会重新计算, 如果调用100次,函数就会执行100次, 对于性能不是特别好, 因为每一次的结果都是一样的。当我们点击改变数据按钮的时候, 数据发生变化, 数据一旦发生变化,就会自动触发依赖这个数据的计算属性的方法, 通过计算得到的结果将会覆盖原来属性的结果, 也就会重现渲染页面结果。其实想想就能理解, 对象的属性, 获取的时候不就是get 当你改变对象属性的值,不就是重新赋值了嘛,也就是set啊,

事件修饰符 在事件处理函数中,我们可能需要经常处理诸如阻止默认事件或阻止事件冒泡等事情,事件修饰符可以帮助我们解决此类问题

key:1 id: 1 index: 1 name: “梨子” key:4 id: 4 index: 1 name: “这是新增的水果”key:2 id: 2 index: 3 name: “西瓜” key:1 id: 1 index: 2 name: “梨子”key:0 id: 0 index: 0 name: “苹果” key:0 id: 0 index: 0 name: “苹果”

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做,直到条件第一次变为真时，才会开始渲染条件块。v-show就简单得多,不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

v-model属性的值是一个数据的变量,如果数据的值发生变化,会影响input的值,input的值的变化同时影响数据的变化。如果标签没有value,则选中多选按钮时,则数组里收集表单的值为null, 未选中,收集的值为空。如果v-model,绑定的是一个字符串,咱们绑定的值,会转成布尔值,如果有value属性,那么选中取出的是value的值,未选中则为空。对于不能输入内容的表单,比如多选按钮,如果只有一个,或者有多个,属性, 两个单选按钮也依然是互斥的,因为双向绑定的是通过一个数据。

通过一偏文章带你梳理完`vue2`事件绑定的细节, 理解`v-on` 指令的使用, 理解事件对象的获取, 以及事件处理函数中关于this 执行问题的描述.

上一小节的学习,让我们理解以v开头的指令后面跟的将是表达式,同样标签也有一些合法的标签属性.如果想将这些属性的值变为表达式,我们可以使用Vue提供的v-bind:指令.因为动态属性style的值是一个对象,因此 我们可以把对象提取出来直接作为vue 数据data属性值,那么我们就可以直接绑定一个对象就可以了。动态绑定class 就是使用v-bind指令来绑定, 一但使用v-bind指令后,class属性的值不在是一个字符串,而是一个表达式,但是一旦使用了动态绑定, `style`属性的值将变成JS表达式,

虽然上面三种方法都可以将数据渲染到页面上，但是工作中我最常用的是{{}}最被常用但是在加载的时候会出现闪烁问题(指令篇章v-cloak会讲解解决方法)，无法将html格式数据渲染，只能当字符串展示v-text虽然没有数据加载闪烁问题，但是会将标签中间的数据覆盖，也不能渲染html格式数据。v-html谨慎使用会出现xss攻击的风险。

vue 选项对象中有一个叫methods的属性.这个属性里面专门来存放一些函数,用来给别人调用

同样的如果采用替换原对象,通过字面量的方式替换,会发现如果我原对象已有多个属性,在通过替换原对象的方式触发响应式的时候,需要不断重写原对象的属性, 就很繁琐.通过示例,我们有发现不会触发响应系统的数据属性跟具有响应系统的属性一起改变,也会到处页面的重新渲染, 因为有人触发了响应系统,如果你稍后还是单独改变。但是我们后添加的对象的数据不是响应式, Vue不会根据这些数据的变化来改变对应的视图,所以当你单独新增一个属性是不会触发响应系统,这就会阻止修改现有的属性， 数据没发改变,也就不会触发Vue的响应系统。

虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行操作,那么该如何处理呢,Vue 接管的DOM元素之外的元素使用ref是获取不了的,值是undefined。就是Vue实例化对象,未来可能会用它来搞很多事情,但是最常用到它的时候,是通过。这里面很多属性,我们暂时不用去关心他,因为随着学习的深入,慢慢都会学习到的.插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在这里写逻辑计算。这个数据,一旦数据发生变化,就会触发Vue的响应式, 继而改变视图显示。

vue.js是一套渐进式JavaScript框架,vue是一款友好的,多途径且高性能的JavaScript框架,可维护和测试更强的代码作用: 动态构建用户界面和其他前端框架的关联。