我的博客

兄弟组件之间数据共享的方案—EventBusEventBus的使用步骤EventBus的使用示例more。

组件之间的关系父向子传值子向父传值more。

了解生命周期和生命周期函数的概念初步了解组件创建的过程了解beforeCreate和Created生命周期函数的特点了解beforeMount和mounted生命周期函数组件运行阶段的生命周期函数组件销毁阶段的生命周期函数more数据定义data() {return {// 定义 books 数组，存储的是所有图书的列表数据。默认为空数组！books: []},数据使用。

浏览器无法直接解析Vue文件package.json中的’vue-template-compiler’将vue结尾的文件解析为js文件交给浏览器处理Count组件实例对象more。

scoped的使用及底层原理使用deep修改子组件中的样式more。

为Count组件添加自定义属性为自定义属性添加v-bind自定义属性props是只读的自定义属性default默认值自定义属性type值类型自定义属性required必填值moreprops 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！它的语法格式如下//组件的自定义属性props:['自定义属性A','自定义属性B','其他自定义属性...'],//组件的私有数据data(){return {}}}布局代码。

通过 components 注册的是私有子组件注册全局组件more。

说明：3.2 步骤2：使用 components 节点注册组件3.3 步骤3：以标签形式使用刚才注册的组件四 使用组件示例4.1 在src/components目录下如下组件文件4.2 在App.vue中使用Left.vue和Right.vue1-srcipt中导入2-布局文件中使用4.3 效果图

组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。每个 .vue 组件都由 3 部分构成，分别是：其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。vue 规定：每个组件对应的模板结构，需要定义到 节点中主意：vue 规定：开发者可以在 节点中封装组件的 JavaScript 业务逻辑 节点的基本结构如下.vue 组件中的 data

vue-cli—介绍并安装vue-clivue-cli—基于vue-cli创建vue项目vue-cli—项目预览效果vue-cli—项目目录结构vue-cli—vue项目运行过程vue-cli—组件的基本使用more单页面应用程序（英文名：Single Page Application）简称 SPA，顾名 思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能 与交互都在这唯一的一个页面内完成。例如这个 Demo 项目。

axios-使用axios发起基本的Get请求axios-结合async和await调用axiosaxios-使用解构赋值axios-基于axios.get和axios.post发起请求moreaxios(发音：艾克C奥斯)是前端圈最火的、专注于数据库请求的库在后面的Vue、React种都使用axios来请求数据中文官网地址：http://www.axios-js.com英文官网地址：https://www.npmjs.com/package/axios。

计算属性-概述计算属性-默认方式计算属性-改造more计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用计算属性示例代码data: {r: 0,g: 0,b: 0},show() {}},rgb() {}}});

侦听器-判断用户名是否被暂用侦听器-immediate选项侦听器-deep选项morewatch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

过滤器的基本用法使用Vue.filter定义全局过滤器使用全局过滤器格式化时间过滤器的其他用法过滤器的兼容性more在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器。

Vue基础用法-品牌列表案例(25)

列表渲染指令v-forv-for 中的索引使用 key 维护列表的状态key 的注意事项more。

条件渲染指令—v-if和v-showv-elsev-else-ifmore。

了解v-model指令的用法v-model的修饰符more。

什么是@keyup@keyup.esc示例@keyup.enter示例more@keyup(键盘事件)是按键松开，当指定的按键松开会触发的事件事件代码事件描述回车按键松开左键按键松开右键按键松开@keyup.up上键按键松开下键按键松开删除键松开@keyup.escesc键松开。

事件参数对象$event表示事件参数对象event事件修饰符more。

v-on指令的基础用法函数的简写形式通过this访问数据源中的数据绑定事件并传参v-on指令的简写形式more。

在vue提供的模板渲染语法中，除了支持绑定简单的数据外，还支持JavaScript表达式的运算{ {ok?more。

属性绑定指令介绍属性绑定指令示例more如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。用法示例：v-bind:placeholder=“tips”v-bind可以省略，:placeholder=“tips”

指令的概念内容渲染指令介绍more内容渲染指令用于辅助开发者渲染DOM元素的文本内容。v-text插值表达式v-html。

安装vue-devtools调试工具配置Chrome浏览器中的vue-devtools使用vue-devtools调试vue页面more。

Vue的下载及安装Vue使用示例more。

了解Vue是什么Vue得两个特性MVVMmore官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架3.x 版本的 vue 是未来企业级项目开发的趋势；2.x 版本的 vue 在未来（1 ~ 2年内）会被逐渐淘汰；

resolve的作用与配置使用resolve前后，文件路径的配置more。

由项目异常引出Source Map什么是Source MapSource Map的几种配置Source Map的最佳实践moreSource Map就是一个信息文件，里面存储着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调式。

配置webpack打包发布优化图片和js文件的存放路径配置和使用clean-webpack-plugin插件自动删除dist目录发布流程总结more一款webpack插件，用于删除和清理自动生成的dist文件夹中文件在package.json中自定义build指令，执行就会执行打包发布操作在配置项中指定图片和js的存放文件夹如果需要删除dist文件夹内容重新生成，借助clean-webpack-plugin插件。

通过装饰器注解问题导入babel-loaderbabel-loader的安装与配置babel-loader处理后的效果more。

导入图片显示示例及问题file-loader/url-loader的安装与配置file-loader中的limit选项more。

示例导入less文件修改样式less-loader的安装与配置less-loader打包处理less后的效果more。

Vue如何处理cssloader概述loader的安装与配置loader的调用过程说明more在实际开发过程中，webpack默认只能打包处理以.js后缀结尾的模块。其他非.js后缀结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。loader加载器的作用：协助webpack打包处理特定的文件模块。css-loader可以打包处理.css相关的文件less-loader可以打包处理.less相关的文件。

html-webpack-plugin插件介绍html-webpack-plugin插件安装与配置html-webpack-plugin插件的特性morewebpack中的HTML插件(类似于一个模板引擎插件)可以通过此插件自定制Index.html页面的内容。

可能出现的问题(这个属性在新版的webpack-dev-server中被移除了, 取而代之的是devServer.static)打包路径问题，无法找到。

webpack-dev-server介绍webpack-dev-server插件安装与配置webpack-dev-server原理介绍more通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。本文介绍webpack的插件webpack-dev-serverwebpack-dev-server生成的bundle.js在根目录下有一份(无实际文件)，放到内存中，没有放到物理磁盘中。

创建初始项目工程项目webpack配置webpack的mode选项配置项目的入口路径和输出文件more在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。const path = require('path') //导入node.js中专门操作路径的模块entry: path.join(__dirname, './src/index1.js'), //打包入口文件的路径output: {

什么是webpackwebpack安装webpack配置morewebpack是前端项目工程化的具体解决方案。