本文围绕Vue展开，介绍了其生命周期，包含初始化、运行中、销毁三个阶段及8个钩子函数，且钩子函数不能用箭头函数；还讲解了第三方库Swiper用于实现滑动操作，以及自定义指令的使用形式和钩子函数；最后介绍了Vue CLI，包括其版本、安装、使用方法及不同版本的目录结构。
一、生命周期
1. 什么是生命周期？
vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做（ 生命周期钩子函数/ 组件钩子 ）
2. 为什么要学习生命周期?
因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途
3. 这个生命周期是谁的生命周期？
组件
4. 项目中生命周期如何书写（ 功能 ）
Vue的生命周期分为三个阶段，分别为： 初始化，运行中， 销毁，一共8个钩子函数
注意： 生命周期钩子函数不允许写成箭头函数
初始化：
beforeCreate
1. 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
2. 数据没有获得，真实dom也没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行一次
created
1. 组件创建结束
2. 数据得到了，真实dom没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行了一次
beforeMount
1. 组件挂载前
2. 任务： 判断el 判断 template
如果el没有，那么我们需要手动挂载，如果有，那么判断template
如果template有，那么进行render函数
如果template没有，那么通过 outerHTML 手动书写模板
3. 数据可以获得，但是真实dom还没有渲染
4. 可以进行数据请求，也提供了一次数据修改的机会
5. 执行一次
mounted
1. 组件挂载结束
2. 数据获得了，真实dom也获得了
3. 可以进行数据请求，也就可以修改数据
4. 执行了一次
5. 可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）
二、swiper
作用： 用来实现移动端，pc端滑动操作
swiper是一个第三方的库
学习 swiper 官网文档 https://www.swiper.com.cn/
vue中swiper实现
1. 静态数据的第三方库实例化，我们写在mounted中
2. 动态数据的第三方库实例化，我们写在updated中
3. 优化：
1. 做判断条件
2. 异步队列
1. setTimout
2. nextTick
有的开发者，也会使用 vue-swiper 这个第三方的库来实现轮播
三、自定义指令
v-html
v-text
v-for
v-if
v-else-if
v-else
v-show
v-on
v-bind
v-model
以上指令可以不够用户使用，所以vue给开发者提供了自定义指令的方式
举例： 比如说 我想要有一个指令，来实现一个自动获得input焦点，或是一个轮播 。。。
有两种自定义指令的使用形式：
- 全局定义 ---- vue.directive()
- 局部定义
directives: {} - 指令的钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用 （ 指令绑定的元素被删除 ）。
- 自定义指令钩子的参数
el：指令所绑定的元素，可以用来直接操作 DOM 。- binding
：一个对象，包含以下属性： name：指令名，不包括v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
作业： 结合上午的swiper使用 + 下午的自定义指令，自定义一个叫做 v-banner 的指令来实现轮播
四、cli
- 什么是cli?
cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack - cli目前有哪些版本？
cli2 cli3
cli3对电脑的配置有一定要求 - cli如何使用？
- cli的安装
npm/cnpm/yarn 都可以使用 $ yarn add @vue/cli global这个是cli3的版本
如果我们还想使用cli2的脚手架，那么我们可以在安装一个包$ yarn add @vue/cli-init global
如果有的同学安装3失败了，
那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init$ cnpm i @vue/cli -g这个是cli3的版本
如果我们还想使用cli2的脚手架，那么我们可以在安装一个包$ cnpm i @vue/cli-init -g
如果还有问题：
那么你就不要使用cli3了，你可以单独安装cli2
`$ cnpm i vue-cli -g`
- 验证是否安装成功
命令行输入：$ vue看是否有东西输出，如果输出命令提示，证明安装成功 - 创建项目
cli3版本创建 - 命令创建 【 推荐 】
$ vue create project
- 手动选择配置
- 如果安装node-sass出问题，如何解决：
- 先切换成npm源 nrm use npm
- 使用cnpm 安装 cnpm i node-sass sass-loader -D
- 图形界面创建
$ vue ui
cli2 - 标准版
$ vue init webpack project - 简易版
$ vue init webpack-simple project - please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置
- default 默认配置
- Manually select features 手动选择配置
配置指的是配置webpack
babel 优雅降级 es6 —> es5
eslint js语法检测
CSS Pre-processors css 预处理语言 less sass/scss stylus
Linter / Formatter eslint / jslint
Unit Testing 单元测试
E2E Testing 端到端的测试
In dedicated config files 将所选的每一个选项用一个文件来保存（ 配置 ）
PWA (web app ) 在浏览器中使用的app
Save this as a preset for future projects? 将上面所选的配置保存下来，以备将来的项目使用
我们cli3 使用的包管理器器建议 是 yarn 大家一定要记得配置国内镜像源
4.分析几个版本的目录
cli3
目录
- node_modules 项目的依赖包
- cli3webpack配置放在node_modules中
- public 静态资源目录
- img
- js
- css
- favicon.ico 项目标题的logo
- index.html 根实例组件的模板，也是整个项目的容器
- src 源代码开发目录（ 也是开发者主要开发的目录文件夹 ）
- .gitignore git上传忽略文件配置
- babel.config.js 优雅降级配置文件 用来将es6 --> es5
- package.json 整个项目的依赖配置文件
- README.md 整个项目启动的说明性文件
- yarn.lock 真个项目的依赖性文件的信息
- postcss.config.js 项目css预处理的配置
- .browserslistrc 浏览器版本的支持
**cli2
build webpack配置
config webpack配置
node_modules
src
static 静态资源配置
js
css
img
.babelrc 优雅降级配置文件
.postcssrc css预处理配置文件
.editorconfig 编辑器配置文件
扫一扫
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
