① Vue基础篇
内容简介： 1）Vue指令 2）computed和watch 3）生命周期钩子 4）组件间的传参 5）插槽 6）修饰符 7）nextTick() 前端三大框架： Vue：尤雨溪开发 React：Facebook主导开发 Angular：谷歌主导开发 为什么选择Vue? 1.国内Vue的市场份额占比多 2.简单易上手，非常适合前端开发初学者学习 前置知识： 1.HTML、CSS和js基础 2.了解Node和npm 3.webpack（可选，vue-cli已经封装了打包功能） 使用Vue的吵或两种方式： 1.直接script标签引入vue.js文件 2.基于Node环境创建Vue项目（使用vue-cli初始化一个Vue项目） 前端框架与库的区别 • jquery 库 -> DOM(操作DOM) + 动画+ ajax请求 • 框架 -> 全方位功能 一、指令 指令（Directives）是带有 v- 前缀的特殊属性。 插值表达式和v-text指令被直接解析为字符串；元素绑定 v-html 指令后，解析了msg 变量值里面的html标签，输出真正的html元素。 v-model也可用在自定义组件上。 5.v-for（列表渲染） 使用v-for时应绑定key属性，key属性可以用来提升v-for渲染的效率 Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括： push() pop() shift() unshift() splice() sort() reverse() 由于 JavaScript 的限制，Vue 不能检测数组、对象的以下变化：1. 利用索引直接设置数组的某一项 2. 对象属性的添加或删除 二、computed和watch 三、生命周期钩子 什么是Vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。 总共分为8个阶段：创建前/后，挂载空裤前/后，更新前/后，销毁前/后。 1）beforeCreate 此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问。 2）created 此时可以读取data的值，并可以对其进行操作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。 在这个钩子函数中，我们可以进行http请求，把请求到的数据储存在data中。 3）模板编译，把data里面的数据和vue语法写的模板编译成HTML 4）beforeMount 将编译完成的HTML挂载到对应虚拟DOM，此时还未挂载到页面上 5）mounted 编译好的HTML已挂载到页面上 6）beforeUpdate和updated 数据更新时调用，通常使用计算属性或侦听器取而代之 7）beforeDestroy 销毁所有观察者、组件及事件监听 8）destroyed 组件已经完全销毁，组件中的数据、方法、计算属性、过滤器等都已不可用。 四、组件间的通信 1.父子组件间的通信 父子组件通信可以总结为props向下传递，事件向上传递。 单向数据流：父级 prop 的更新升亏伍会向下流动到子组件中，但反过来不行。 每个Vue实例都实现了事件接口：子组件使用 this.$emit(eventName,optionalPayload) 触发自定义事件。父组件在使用子组件的地方直接用v-on来监听子组件触发的事件。 父组件通过ref直接调用子组件中的方法。 子组件调用父组件中的方法： 1）子组件中通过 this.$parent.fatherMethod() 来调用父组件的方法 2）子组件用$emit向父组件触发一个事件，父组件监听这个事件 3）父组件通过props把方法传入子组件中（type: Function），在子组件里直接调用这个方法 2.兄弟组件间的通信 其中一种方法是让父组件充当两个子组件之间的中间件（中继）； 另一种就是使用EventBus（事件总线），它允许两个组件之间直接通信，而不需要涉及父组件： Vue原型上的方法： 五、插槽 3）作用域插槽 使用场景： 在使用ElementUI组件库的el-table组件时，表格的编辑和删除操作要用到作用域插槽。因为el-table组件，就是当前组件的子组件。通过作用域插槽很容易拿到当前表格行的索引和内容，这样就可以很方便地进行编辑、删除的操作。v-slot指令是Vue2.6之后，作用域插槽的新语法，旧语法（slot-scope）现在还保留，但3.0之后会移除。 六、修饰符 2.事件修饰符 vue提倡的是在方法中只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，所以提供了事件修饰符用于DOM的事件处理。 3.按键修饰符 七、nextTick() 定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（当数据更新了，在dom中渲染后，自动执行nextTick的回调） 应用场景：需要在视图更新之后，基于新的视图进行操作。
② vue初始化项目找不到文件/dist/build.js
刚初始化的项目是没有dist目录的。dist目录是你打包输出的目录，项目完成打包时生成的。build.js是在 /build/build.js
③ webpack 创建一个VUE项目
一、创建并初始化VUE项目 1.安装完VUE和nodejs后在指定文件夹根目录生成项目文件夹 在命令行衡毕内进入当前文仿粗件夹 输入 其他选项默认 生成的文件备拦镇夹 3.安装完毕运行 yarn start 未安装yarn的可直接运行 npm run dev 3.删除初始化多余项目 3.1删除components文件夹下的helloworld文件 3.2在app.vue中删除以下内容(如果报错请检查是否存在空格未删除) 4.让项目先跑起来 npm run dev *注在开发测试环境使用-D/–seve-dev；生产环境使用-S/–seve
④ vue 已经挂载的组件怎么初始化里面的data
vue将数据绑定到组件的原理如下： 1、当实例化一个Vue构造函数，会执行 Vue 的 init 方法，在 init 方法中主要执行三部分内容，一是初始化环境变量，而是处理 Vue 组件数据，三是解析挂载组件。以上三部分内容构成了 Vue 的整个执行过程。
