袁老師Vue筆記整理

# 袁老師Vue筆記整理 ## 视频共16個 ## 【学习须知】 01:44 --- ## 01_从Vue到前端 31:16 --- > 笔记是由markdown格式书写 > > 下载 [typora](https://www.typora.io/) 打开笔记 ## 什么是vue > 官网：https://cn.vuejs.org/ ----- 前置知识： - 完整的学习`vue`：`html + css`、`JavaScript`、`css3`、`HTML5`、`第三方库`、`网络通信`、`ES6+`、`webpack`、`模块化`、`包管理器`、`css预编译器` - 体验`vue`功能：`html + css`、`JavaScript` -------- **`vue`是前端的一种开发框架，它主要解决前端开发中的核心痛点——复杂的DOM操作** ------ `vue`拥有以下特点： - 渐进式 - 组件化 - 响应式 ------ `vue`的应用场景： - 前台的部分页面 - 中后台的全部页面 ------ `vue`的版本： - 目前的正式版本是`2.x` - `3.x`版本即将上线，对`2.x`是兼容的，要完全体验到`3.x`的优势，还需要学习`TypeScript` ### vue在前端的地位前端是连接终端设备与人的技术 <img src="http://mdrs.yuanjin.tech/img/20200902153656.png" alt="image-20200902153656704" style="zoom: 33%;" /> **`vue`是实现这些技术的其中一种方式** ------ 除了`vue`之外，还需要学习哪些前端知识？ `TypeScript`、`ThreeJS`、`WebGL`、`ECharts`、`NodeJS`、`Egg`、`Redis`、`Mongodb`、`Sequelize`、`Express`、`Koa`、`移动端`...... ### 学习准备 1. 安装`VSCode` > 官网：https://code.visualstudio.com/ 2. 安装`VSCode 相应插件` ※**注意**！要改用CodePen - Auto Rename Tag：能够自动更改结束标签 - Live Server：自动搭建本地服务器 - Prettier - Code formatter：代码美化 - Vetur：vue组件格式支持 - vscode-icons：美化文件图标 4. 加入组织 --- ## 02_Vue初体验 24:31 ### 起步使用`vue`的两种方式： - 在页面中引入`vue`的js文件 - 脚手架 - 官方脚手架`vue-cli` - 其他民间脚手架，如`webpack-simple` - 手动搭建 ### 体验vue开发 <img src="http://mdrs.yuanjin.tech/img/20200907104538.png" alt="image-20200907104538306" style="zoom:50%;" /> --- ## 03_Vue核心概念 55:58 ### ES6知识补充 - 速写属性 - 速写方法 - 模板字符串 ### 注入配置对象中的部分内容会被提取到vue实例中： - `data` - `methods` 该过程称之为**注入** 注入目的有两个： - 完成数据响应式 vue是怎么知道数据被更改了？ `vue2.0`是通过`Object.defineProperty`方法完成了数据响应式，`vue3.0`是通过`Class Proxy`完成的数据响应式 - 绑定`this` ### 虚拟DOM树 **为了提高渲染效率**，vue会把模板**编译**成为虚拟DOM树，然后再生成真实的DOM <img src="http://mdrs.yuanjin.tech/img/20200908030214.png" alt="image-20200908030214647" style="zoom:50%;" /> 当数据更改时，将重新编译成虚拟DOM树，然后对前后两棵树进行比对，仅将差异部分反映到真实DOM，这样既可最小程度的改动真实DOM，提升页面效率 <img src="http://mdrs.yuanjin.tech/img/20200908031642.png" alt="image-20200908031642346" style="zoom:50%;" /> 因此，对于`vue`而言，提升效率重点着眼于两个方面： - 减少新的虚拟DOM的生成 - 保证对比之后，只有必要的节点有变化。 `vue`提供了多种方式生成虚拟DOM树： 1. 在挂在的元素内部直接书写，此时将使用元素的`outerHTML`作为模板 2. 在`template`配置中书写 3. 在`render`配置中用函数直接创建虚拟节点树，此时，完全脱离模板，将省略编译步骤这些步骤从上到下，优先级逐渐提升 **注意：虚拟节点树必须是单根的** ### 挂载将生成的真实DOM树，放置到某个元素位置，称之为**挂载** 挂载的方式： 1. 通过`el:"css选择器"`进行配置 2. 通过`vue实例.$mount("css选择器")`进行配置 ### 完整流程 <img src="http://mdrs.yuanjin.tech/img/20200908051939.png" alt="image-20200908051939745" style="zoom:50%;" /> --- ## 04_模板语法和计算属性 56:12 ### 模板语法 ### 内容 `vue`中的元素内容使用`mustache`模板引擎进行解析 > mustache：https://github.com/janl/mustache.js ### 指令指令会影响元素的渲染行为，指令始终以`v-`开头基础指令： - v-for：循环渲染元素 - v-html：设置元素的`innerHTML`，该指令会导致元素的模板内容失效 - v-on：注册事件 - 该指令由于十分常用，因此提供了简写`@` - 事件支持一些指令修饰符，如`prevent` - 事件参数会自动传递 - v-bind：绑定动态属性 - 该指令由于十分常用，因此提供了简写`:` - v-show：控制元素可见度 - v-if、v-else-if、v-else：控制元素生成 - v-model：双向数据绑定，常用于表单元素 - 该指令是`v-on`和`v-bind`的复合版 > 进阶指令： > > - v-slot > - v-text > - v-pre > - v-cloak > - v-once > - 自定义指令 ### 特殊属性最重要的特殊属性：`key` 该属性可以干预`diff算法`，在同一层级，`key`值相同的节点会进行比对，`key`值不同的节点则不会 <img src="http://mdrs.yuanjin.tech/img/20200908124317.png" alt="image-20200908124317168" style="zoom:50%;" /> 在循环生成的节点中，`vue`强烈建议给予每个节点唯一且稳定的`key`值 <img src="http://mdrs.yuanjin.tech/img/20200908124819.png" alt="image-20200908124819385" style="zoom:50%;" /> > 其他特殊属性： > > - ref > - is > - slot > - slot-scope > - scope ### 计算属性 ```js computed: { // 仅访问器 prop(){ return ... } // 访问器 + 设置器 fullProp: { get(){ return ... }, set(val){ ... } } } ``` ### 计算属性和方法的区别： - 计算属性可以赋值，而方法不行 - 计算属性会进行缓存，如果依赖不变，则直接使用缓存结果，不会重新计算 - 凡是根据已有数据计算得到新数据的无参函数，都应该尽量写成计算属性，而不是方法 --- ## 05_组件核心概念 59:14 ### 知识补充 1. 箭头函数 - 任何可以书写匿名函数的位置均可以书写箭头函数 - 箭头函数将会绑定`this`为函数书写位置的`this`值 2. 模块化 - 没有模块化的世界：全局变量污染、难以管理的依赖 - 常见的模块化标准：CommonJS、ES6 Module、AMD、CMD、UMD ### 组件概念一个完整的网页是复杂的，如果将其作为一个整体来进行开发，将会遇到下面的困难 - 代码凌乱臃肿 - 不易协作 - 难以复用 vue推荐使用一种更加精细的控制方案——组件化开发所谓组件化，即把一个页面中区域功能细分，每一个区域成为一个组件，每个组件包含： - 功能（JS代码） - 内容（模板代码） - 样式（CSS代码） > 由于没有构建工具的支撑，CSS代码暂时无法放到组件中 ### 组件开发 ###### 创建组件组件是根据一个普通的配置对象创建的，所以要开发一个组件，只需要写一个配置对象即可该配置对象和vue实例的配置是**几乎一样**的 ```js //组件配置对象 var myComp = { data(){ return { // ... } }, computed:{ //... }, methods:{ //... }, template: `....` } ``` 值得注意的是，组件配置对象和vue实例有以下几点差异： - 无`el` - `data`必须是一个函数，该函数返回的对象作为数据 - 由于没有`el`配置，组件的虚拟DOM树必须定义在`template`或`render`中 #### 注册组件注册组件分为两种方式，一种是**全局注册**，一种是**局部注册** ### 全局注册一旦全局注册了一个组件，整个应用中任何地方都可以使用该组件 <img src="http://mdrs.yuanjin.tech/img/2020-02-18-10-24-44.png" style="zoom:50%;" /> 全局注册的方式是： ```js // 参数1：组件名称，将来在模板中使用组件时，会使用该名称 // 参数2：组件配置对象 // 该代码运行后，即可在模板中使用组件 Vue.component('my-comp', myComp) ``` 在模板中，可以使用组件了 ```html <my-comp />  <my-comp></my-comp> ``` > 但在一些工程化的大型项目中，很多组件都不需要全局使用。 > 比如一个登录组件，只有在登录的相关页面中使用，如果全局注册，将导致构建工具无法优化打包 > **因此，除非组件特别通用，否则不建议使用全局注册** ### 局部注册局部注册就是哪里要用到组件，就在哪里注册 <img src="http://mdrs.yuanjin.tech/img/2020-02-18-10-28-45.png" style="zoom:50%;" /> 局部注册的方式是，在要使用组件的组件或实例中加入一个配置： ```js // 这是另一个要使用my-comp的组件 var otherComp = { components:{ // 属性名为组件名称，模板中将使用该名称 // 属性值为组件配置对象 "my-comp": myComp }, template: ` <div>  <my-comp></my-comp> </div> `; } ``` #### 应用组件在模板中使用组件特别简单，把组件名当作HTML元素名使用即可。但要注意以下几点： 1. **组件必须有结束** 组件可以自结束，也可以用结束标记结束，但必须要有结束下面的组件使用是错误的： ```html <my-comp> ``` 2. **组件的命名** 无论你使用哪种方式注册组件，组件的命名需要遵循规范。组件可以使用`kebab-case 短横线命名法`，也可以使用`PascalCase 大驼峰命名法` 下面两种命名均是可以的 ```js var otherComp = { components:{ "my-comp": myComp, // 方式1 MyComp: myComp //方式2 } } ``` > 实际上，使用`小驼峰命名法 camelCase`也是可以识别的，只不过不符合官方要求的规范使用`PascalCase`方式命名还有一个额外的好处，即可以在模板中使用两种组件名 ```js var otherComp = { components:{ MyComp: myComp } } ``` 模板中： ```html  <my-comp /> <MyComp /> ``` 因此，在使用组件时，为了方便，往往使用以下代码： ```js var MyComp = { //组件配置 } var OtherComp = { components:{ MyComp // ES6速写属性 } } ``` > 注意，`PascalCase`命名不可以直接在html中使用，但可以在template配置中使用 > 想想为什么？ ### 组件树一个组件创建好后，往往会在各种地方使用它。它可能多次出现在vue实例中，也可能出现在其他组件中。于是就形成了一个组件树 <img src="http://mdrs.yuanjin.tech/img/2020-02-18-11-00-58.png" style="zoom:50%;" /> ### 向组件传递数据大部分组件要完成自身的功能，都需要一些额外的信息比如一个头像组件，需要告诉它头像的地址，这就需要在使用组件时向组件传递数据传递数据的方式有很多种，最常见的一种是使用**组件属性 component props** 首先在组件中申明可以接收哪些属性: ```js var MyComp = { props:["p1", "p2", "p3"], // 和vue实例一样，使用组件时也会创建组件的实例 // 而组件的属性会被提取到组件实例中，因此可以在模板中使用 template: ` <div> {{p1}}, {{p2}}, {{p3}} </div> ` } ``` 在使用组件时，向其传递属性： ```js var OtherComp = { components: { MyComp }, data(){ return { a:1 } }, template: ` <my-comp :p1="a" :p2="2" p3="3"/> ` } ``` **注意：在组件中，属性是只读的，绝不可以更改，这叫做单向数据流** <img src="/Users/yuanjin/Desktop/单向数据流.png" style="zoom:50%;" /> ### 工程结构 ### 见代码 --- ## 06_使用脚手架搭建工程 25:01 ### vue-cli的安装 `vue-cli`是一个脚手架工具，它集成了诸多前端技术，包括但不仅限于： - `webpack` - `babel` - `eslint` - `http-proxy-middleware` - `typescript` - `css pre-prosessor` - `css module` - .... 这些工具，他们大部分都要依赖两个东西： - node环境：很多工具的运行环境 - npm：包管理器，用于下载各种第三方库 > 目前，npm已和node集成，当安装node后，会自动安装npm ### 安装node 下载node：https://nodejs.org/zh-cn/ #### 验证安装打开终端，查看node和npm版本，验证是否安装成功: ```shell node -v npm -v ``` > 如果安装之前打开了终端，需要在安装后关闭终端，重新打开 #### 配置源地址默认情况下，`npm`安装包时会从国外的地址下载，速度很慢，容易导致安装失败，因此需要先配置`npm`的源地址使用下面的命令更改`npm`的源地址为淘宝源 ```shell npm config set registry http://registry.npm.taobao.org/ ``` 更改好了之后，查看源地址是否正确的被更改 ```shell npm config get registry ``` #### 安装vue-cli 使用下面的命令安装`vue-cli`工具 ```shell npm install -g @vue/cli ``` 安装好之后，检查`vue-cli`是否安装成功 ```shell vue --version ``` ### vue-cli的使用 #### 在终端中进入某个目录选择一个目录，该目录将放置你的工程文件夹在终端中进入该目录 #### 搭建工程使用`vue-cli`提供的命令搭建工程 ```shell vue create 工程名 ``` > 注意：工程名只能出现英文、数字和短横线 ### 理解工程结构 ### 视频描述 --- ## 07_开发通用组件 30:15 沒筆記 --- ## 08_自定义事件 18:19 沒筆記 --- ## 09_开发频道菜单 20:50 沒筆記 --- ## 10_获取频道数据 24:44 --- ### 远程获取数据： <img src="http://mdrs.yuanjin.tech/img/20200911131358.png" alt="image-20200911131358157" style="zoom:50%;" /> ### 跨域问题： <img src="http://mdrs.yuanjin.tech/img/20200911131438.png" alt="image-20200911131438944" style="zoom:50%;" /> 在**开发环境中**解决跨域问题： <img src="http://mdrs.yuanjin.tech/img/20200911131606.png" alt="image-20200911131606337" style="zoom:50%;" /> --- ## 11_完成频道列表组件 41:28 沒筆記 --- ## 12_继续完善频道列表 20:42 沒筆記 --- ## 13_搜索框组件 46:27 沒筆記 --- ## 14_侧边栏和页面组件 25:46 沒筆記 --- ## 15_尾声：学无止境 10:32 沒筆記