Vue

webpack中图片的配置 使用file-loader加载背景图片并没有起作用的一个重要原因是：我们将图片复制到指定文件夹dist中,并且使用hash重新生成一个名字，防止重复 我们在css文件中写入

webpack中CSS的配置 什么是loader loader是webpack中一个非常核心的概念 webpack用来做什么呢？ 在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，

webpack的配置 入口和出口 我们考虑一下，如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？ 当然可以，就

webpack的基本使用 准备工作 我们创建如下文件和文件夹： 文件和文件夹解析： dist文件夹：用于存放之后打包的文件 src文件夹：用于存放我们写的源文件 main.js：项目的入口文件。具体内

webpack的安装 安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm 安装node.js见博客windows安装node.js webpack和node.js、

Webpack简介 webpack官网 webpack中文网站 什么是webpack？ 这个webpack还真不是一两句话可以说清楚的。 我们先看看官方的解释： At its core, webpac

模块化开发ES6 export基本使用 export指令用于导出变量，比如下面的代码： 上面的代码还有另外一种写法: 实战代码 对aaa.js的代码进行模块化封装 在bbb.js中进行导入aaa中的变

模块化开发 JavaScript原始功能 在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的 那个时候的代码是怎么写的呢？直接将代码写在<script

作用域插槽 作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰 这里，我们用一句话对其做一个总结，然后我们在后续的案例中来体会： 父组件替换插槽的标签，但是内容由子组件来提供 我们先

具名插槽slot 当子组件的功能复杂时，子组件的插槽可能并非是一个 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢

slot插槽 slot翻译为插槽： 在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽 插槽的目的是让我们原来的设备具备更多的扩展性 比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键

非父子组件通信 刚才我们讨论的都是父子组件间的通信，那如果是非父子关系呢? 非父子组件关系包括多个层级的组件，也包括兄弟组件的关系。 在Vue1.x的时候，可以通过$dispatch和$broadca

父子组件的访问方式： $parent 如果我们想在子组件中直接访问父组件，可以通过$parent 注意事项： 尽管在Vue开发中，我们允许通过$parent来访问父组件，但是在真实开发中尽量不要这样做

父子组件的访问方式： $children 有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。 父组件访问子组件：使用$children或$refs 子组件访问父组件：使

父子组件通信中v-model的问题 在子组件中我们将v-model绑定我们的子组件中的数据，但是我们子组件中的数据是通过父组件传递过来的，这样我们在通过input的v-model进行数据的更改的话，我

子级向父级传递 props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。 我们应该如何处理呢？这个时候，我们需要使用自定义事件来完成。 什么时候需要自定义事件呢？ 当

组件通信-父传子(props中的驼峰标识) 使用驼峰表示会造成一些错误 正确的方式在我们的父组件中使用的时候，我们需要将在父组件中的驼峰表示改变成-进行相连的形式 效果如图所示

父子组件的通信-父向子提供数据 需求理解：我们的整个页面的构成基本上就是一个大的组件，在大组件中不断进行详细的划分成中组件，部分中组件还是由不同的子组件进行组合得到的，在我们的请求数据的时候，一般是最

组件可以访问Vue实例数据 组件是一个单独功能模块的封装： 这个模块有属于自己的HTML模板，也应该有属性自己的数据data 组件中的数据是保存在哪里呢？顶层的Vue实例中吗？ 我们先来测试一下，组件

注册组件的语法糖 在上面注册组件的方式，可能会有些繁琐。 Vue为了简化这个过程，提供了注册的语法糖 主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替 语法糖注册全局组件