vue2

前端工程化：

　　前端工程化是指：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

　　四个化：

　　　　模块化：js的模块化，css的模块化，资源的模块化

　　　　组件化：复用现有的UI结构、样式、行为

　　　　规范化：目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理

　　　　自动化：自动化构建、自动部署、自动化测试

　　前端工程化的解决方案（目前主流）：

　　1，webpack   2，parcel 

 

webpack：

　　主要功能：

　　　　1，提供友好的模块化开发支持

　　　　2，代码压缩混淆

　　　　3，处理浏览器端javascript的兼容性、性能优化等

　　webpack插件安装：

　　　　1，webpack-dev-server：每当修改了源代码时候，进行保存后，会自动进行项目的打包和构建

　　　　2，html-webpack-plugin：1、自动将生产的index.html放到更目录中（内存中）  2、在生成的index.html中注入打包的bundle.js文件

　　　　3，webpack-cli

　　　　4，css-loader：由于webpack只能打包后缀名为.js的文件，而此插件可以打包处理后缀名为.css的文件

　　　　5，style-loader：同上

　　　　6，less-loader：打包处理后缀名为.less的文件

    　　　7，file-loader

　　　　8，url-loade：打包处理图片

　　　　9，babel-loader：由于webpack只能打包处理部分高级的后缀名为.js的文件，而此插件可以打包处理高级后缀名为.js的文件

　　　　10，@babel/core

　　　　11，@babel/plugin-proposal-decorators：此插件为babel-loader的插件

　　@：

　　　　1，在src中文件的层级关系，用@（绝对地址）来表示

　　　　2，在webpack.config.js中配置@对应的目录。通常对应src这一层目录。

vue2：

　　定义：是一套用于构建用户界面的前端框架

　　特性：

　　　　1，数据驱动视图 ：在使用vue的界面中，vue会监听数据的变化，从而自动重新渲染页面的结构（数据驱动视图是单向的数据绑定）

　　        2，双向数据绑定：可以辅助开发者在不操作DOM的前提下，自动把用户的填写的内容同步到数据源中，（只有表单元素才能使用v-model，否则不生效）

　　mvvm:

　　　　定义：是vue实现数据驱动视图、双向数据绑定的核心原理。mvvm指的是model、view和viewmodel，它把每个页面都拆分了这三部分

　　　　model：表示当前页面渲染时所依赖的数据源

　　　　view：表示当前页面渲染的dom结构

　　　　viewmodel：

　　　　　　1，表示vue的实例，它是mvvm的核心

　　　　　　2，工作原理：

　　　　　　　　2.1viewmodel把当前页面的数据源（model）和页面的结构（view）链接在了一起

　　　　　　　　2.2，当数据源发生变化时，也会被viewmodel监听到，vm会根据最新的数据源自动更新页面的结构

　　　　　　　　2.3，当表单元素的值发生变化时，也会被vm监听到，vm会把变化后最新的值自动同步到model数据源中

　　内容渲染指令：

　　　　1，v-text：会覆盖掉内部原有的内容

　　　　2，{{}}：差值表达式，将对应的内容渲染到元素的内容节点中，同时保留元素自身的默认值

　　　　3，v-html：可以把包含HTML标签的字符串渲染为页面的HTML内容

　　属性绑定指令：

　　　　1，v-bind：为元素的属性动态绑定属性值（可以简写为  : ）

　　　　2，v-bind和{{}}还支持jacascript表达式的运算

　　　　3，在使用v-bind属性绑定期间，如果绑定的内容需要动态拼接，则字符串需要用单引号包裹起来

　　事件绑定指令：

　　　　 v-on:  为元素添加页面监听事件，可以简写为@

　　　　事件修饰符：

　　　　　　1，prevent：用在@click.prevent，可以阻止默认事件

　　　　　　2，stop：阻止事件冒泡

　　　　　　3，capture：以捕获模式触发当前的事件处理函数

　　　　　　4，once：绑定的事件只触发一次

　　　　　　5，self：只有在event.target是当前元素自身时才触发事件处理函数

　　按键修饰符：

　　　　为键盘相关的事件添加修饰符，监听键盘事件，用来判断详细的按键（@keyup.enter = "函数"）

　　双向绑定指令：

　　　　v-model:（只有表单元素才能使用v-model，否则不生效）

　　　　　　1，当数据源发生变化时，也会被viewmodel监听到，vm会根据最新的数据源自动更新页面的结构

　　　　　　2，当表单元素的值发生变化时，也会被vm监听到，vm会把变化后最新的值自动同步到model数据源中

　　　　　　v-model指令的修饰符：

　　　　　　　　1，number：自动将用户的输入值转为数值类型

　　　　　　　　2，trim：自动过滤用户输入的首尾空白字符

　　　　　　　　3，lazy：在“change”时而非“input”时更新

　　条件渲染指令：

　　　　1，v-show的：动态的为元素添加或移除display：none样式，来实现元素的显示和隐藏  （如何要频繁的切换元素的显示状态，用v-show性能会更好）

　　　　2，v-if：每次动态的创建或移除元素，实现元素的显示和隐藏  （如果刚进入页面的时候，某些元素默认不需要被展示，或者用户选择后期这个元素不被展示出来，此时v-if性能更好）

　　　　3，在实际开发中，不需要考虑性能问题，直接用v-if就行

　　循环渲染指令：

　　　　1，vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构

　　　　2，v-for指令需要使用item in items形式的特殊语法，items是待循环的数组item是被循环的每一项

　　　　3，v-for指令还支持一个可选的第二个参数，即当前项的索引。语法格式为（item，index）in items

　　　　4，注意：v-for指令中的item项和index索引都是形参，可以根据需要进行重命名

　　　　5，用v-for就要加一个属性key，：key（item.id）

　　　　　　key的注意事项：

　　　　　　　　1，key的值只能是字符串或数字类型

　　　　　　　　2，key的值必须具有唯一性（即：key的值不能重复）

　　　　　　　　3，建议把数据项id属性的值作为key的值因为id属性的值具有唯一性且和数据一一对应）

　　　　　　　　4，使用index的值当作key的值没有任何意义（因为index的值不具有唯一性）

　　　　　　　　5，建议使用v-for指令时一定要指定key的值（即防止列表紊乱，又提升了性能）

　　过滤器：（私有过滤器和全局过滤器。仅在vue2.x和1.x受支持，在vue3.x的版本中剔除了过滤器相关的功能）

　　　　1，过滤器（filters）是vue为开发者提供的功能，常用于文本的格式化

　　　　2，用在两个地方：差值表达式和v-bind属性绑定

　　　　3，过滤器要被添加在javascript表达式的尾部，由“管道符”（|）进行调用

　　　　4，要定义到filters节点下，本质是一个函数

　　　　5，在过滤器函数中，一定要有return值

　　　　6，在过滤器的形参中，可以获取到“管道符”前面待处理的数值

　　　　7，filters节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前vm实例所控制的el区域内使用 

　　　　8，如果希望在多个vue实例之间共享过滤器，则可以使用全局过滤器

　　　　9，如果全局过滤器和私有过滤器名字一致，按照“就近原则”调用私有过滤器

　　　　10，Vue.filter（"参数"，（参数) => {  } ）

　　　　11，第一个参数：是全局过滤器的“名字”

　　　　12，第二个参数，是全局过滤器的“处理函数”

　　　　13，过滤器可以多个调用

　　　　14，过滤器可以接收参数

　　watch侦听器：

　　　　1，watch侦听器：允许开发者监视数据的变化，从而针对数据的变化做特定的操作

　　　　2，本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法即可

　　　　3，数据名（newVal, oldVal） {   }  （方法格式侦听器）

　　　　4，newVal变化后的新值，oldVal变化前的旧值 

　　　　5，侦听器分为：方法格式的侦听器和对象格式的侦听器

　　　　7，对象格式侦听器：可以通过  immediate  选项，让侦听器自动触发（在刚进入页面的时候，自动触发一次侦听器）

　　　　8，数据名：{  handler（newVal，newVal），immediate：true  }  （handler：侦听器的处理函数。数据发生变时候自动进入这个函数）

　　　　9，方法格式侦听器，在监听的是一个对象时，如果对象中的属性发生了变化，那么不会触发侦听器

　　　　　　而对象格式的侦听器可以通过deep选项，让侦听器深度监听对象中每一个属性的变化  （ 数据名：{  handler（newVal，newVal）{ }，deep：true  }   ）

　　　　10，如果只是想监听对象中单个属性的变化，则可以按照如下的方法定义watch侦听器：' 对象.属性名 '：{  handler（newVal，newVal）{  } 

　　计算属性：

　　　　1，计算属性指的是：通过一系列运算之后，最终得到一个属性值

　　　　2，这个动态计算出来的属性值可以被模板结构（差值表达式 和v-bind）methods方法使用 

　　　　3，计算属性格式：computed：{  数据名（）{  }  }

　　axios：

　　　1，axios是一个专注于网络请求的库

　　单页面应用程序：

　　　　1，简称SPA（Single Page Application），指的是一个Web网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成

　　vue-cli：

　　　　1，是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程

　　　　2，在终端中使用npm  install  -g  @vue-cli 命令下载

　　　　3，在终端输入 vue  create 项目的名称  来创建指定名称的项目

　　　　4，在终端输入 npm  run serve 或者 npm run build  来运行项目

　　　　·vue 项目中src目录的构成：

　　　　　　assets文件夹：存放项目中用到的静态资源文件，例如：css样式表、图片资源

　　　　　　components文件夹：程序员封装的、可复用的组件，都要放到components目录下

　　　　　　main.js  是项目的入口文件。整个项目的运行，要先执行main.js

　　　　　　App.vue  是项目的根组件

　　　　·vue项目的运行流程：

　　　　　　在工程化的项目中，vue要做的事情很单纯：通过main.js把App.vue渲染到index.html的指定区域中

　　　　　　1，App.vue：是用来编写待渲染的模板结构

　　　　　　2，index.html：需要在其中预留一个el区域

　　　　　　3，main.js把App.vue渲染到index.html所预留的区域中

　　vue组件：

　　　 1，组件化开发：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护

　　　　 2，vue是一款支持组件化开发的前端框架

　　　　3，vue中规定：组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件、、

　　　　4，vue组件由三部分组成：template：组件的模板结构。  script：JavaScript行为。  style：组件的样式

　　　　5，在组件中，this就表示当前组件的实例对象

　　　　6，组件在被封装好之后，彼此是相互独立的，不存在父子关系

　　　　7，在使用组件的时候，根据彼此额嵌套关系，形成了父子关系，兄弟关系

　　　　8，使用组件的三个步骤：

　　　　　　1，使用import语法导入需要的组件

　　　　　　2，使用components节点注册组件

　　　　　　3，以标签形式使用刚才注册的组件

　　　　9，通过components注册的是私有子组件

　　　　　　1，在组件A的components节点下，注册了组件F，则组件F只能用在组件A中。不能用在组件C中

　　　　10，注册全局组件

　　　　　　1，在main.js中导入需要全局注册的组件：import   组件的注册名字  from '需要被全局注册的组件的地址  '

　　　　　　2，写入  Vue.component(  '  被接收的组件名 '，接收的组件名 )

　　　　11，自定义属性  props

　　　　　　1，props是“ 自定义属性 ”，允许使用者通过自定义属性，为当前组件指定初始值

　　　　　　2，自定义属性的名字，是封装者自定义的  格式 props：[ '  自定义属性的名字 ' ] 

　　　　　　3，props中的数据，可以直接在模板结构中被使用 

　　　　　　4，vue规定：组件中封装的自定义属性是只读的，程序员不能直接修改props的值。否则会报错

　　　　　　5，如果要修改，可以把修改的值转存到data中

　　　　　　6，在声明自定义属性时，可以通过default来定义属性的默认值，这样当用户在没传值时，可以使用默认的属性值 格式  props：{ 自定义属性A：{  default：值  } }

　　　　　　7，在声明自定义属性值时，可以通过type来定义属性的值类型。如果传递过来的值不符合此类型，则会在终端报错

　　　　　　8，声明自定义属性值  格式  type：Number

　　　　　　9，required必填项  格式  requirde：true

　　　　　　10，props是组件的自定义属性，在封装通用组件的时候，合理的使用props可以极大地提高组件的复用性

　　　　12，组件之间的样式冲突问题

　　　　　　1，默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

　　　　　　2，导致组件之间样式冲突的根本原因是：

　　　　　　　　1，单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的 

　　　　　　　　2，每个组件中的样式，都会影响整个index.html页面中的DOM元素

　　　　　　3，在style中使用scoped属性，可以自动的为每一个元素添加一个相同的自定义属性

　　　　　　4，可以用deep去修改被通用组件的默认样式　　格式：  /  deep  /  要修改的元素

　　　　13，组件的生命周期&生命周期函数

　　　　　　1，生命周期是指一个组件从创建 > 运行 > 销毁的整个阶段，强调的是一个时间段

　　　　　　2，生命周期函数：是有vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行  

　　　　　　3，beforeCreate（）{ }：创建实例化组件 阶段的第一个生命周期

　　　　　　4，created（）{  }：经常在这里调用methods的方法，请求服务器的数据，并把得到的数据，转存到data中，供到template模板渲染的时候使用（模板结构在此阶段还未生成）

　　　　　　5，mounted：把内存中的html结构，已经成功的渲染到了浏览器中，此时已经包含了当前组件的DOM结构

　　　　　　6，beforeUpdate：在数据变化后，将最新的数据，重新渲染组件的模板结构

　　　　　　7，updated：已经更新了最新的数据，完成了组件的DOM结构的重新渲染

　　　　　　8，beforeDestroy：将要销毁此组件，此时尚未销毁，组件还处于正常的状态

　　　　　　9，destroyed：组件已经被销毁，此组件在浏览器中对应的DOM结构已被完全移除

　　　　13，组件之间的数据共享：

　　　　　　1，组件之间的关系

　　　　　　　　1，父子关系

　　　　　　　　2，兄弟关系

　　　　　　2，父组件向子组件共享数据

　　　　　　　　1，父组件向子组件共享数据需要使用到自定义属性

 　　　　　 3，子组件向父组件共享数据

　　　　　　　　1，使用自定义事件

　　　　　　　　2，在子组件中定义一个函数，写入：this$emit（' 自定义事件名 ‘ ，this.数值）

　　　　　　　　3，在父组件中，在组件标签里面添加事件，在事件中写入函数名；在methods中添加一个函数，将接收的参数值赋予data里的数据，从而完成数据的共享

　　　　　　4，组件之间的数据共享

　　　　　　　　1，创建eventBus.js模块，并向 外共享一个Vue的实例对象  import  Vue from '  vue  '； export default new Vue( )

　　　　　　　　2，在数据的发送方，调用bus.$emit（’ 事件名称 ‘，要发送的数据 ）方法触发自定义事件

　　　　　　　　3，在数据接收方，在created函数调用bus.$on（’ 事件名称 ‘，事件处理函数）方法注册一个自定义事件

　　ref引用：

　　　　1，什么是ref引用：

　　　　　　1，ref引用：ref用来辅助开发者在不依赖与jQuery的情况下，获取DOM元素或组件的引用。

　　　　　　2，每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用。默认情况下，组件的$refs指向同一个空对象

　　　　　　3，$refs不仅可以获取DOM元素还可以获取组件的数据和方法

　　　　2，$nextTick( )：等待DOM重新渲染完成之后在执行里面的回调函数

　　动态组件：

　　    1，动态组件：动态切换组件的显示与隐藏

　　　　2，vue提供了一个内置的< component > 组件，转门用来实现动态组件的渲染（组件的占位符）

　　　　3，< component >中的is属性的值，表示要渲染组件的名字

　　　　4，动态组件在切换中，会销毁之前的组件，可以用 keep-alive 来保存之前的组件  格式<  keep-alive >    < component >    < /component >  < /keep-alive >

　　　　5，keep-alive对应的生命周期函数：

　　　　　　1，当组件被缓存时，会自动触发组件的 deactivated 生命周期函数

　　　　　　2，当组件被激活时，会自动触发组件的 activated 生命周期

　　　　　　3，include属性用来指定： 只有名称被匹配的组件会被缓存，多个组件之间用英文逗号分隔

　　　　　　4，exclude属性：与include相反，名称被匹配的组件不会被缓存，但是不要同时使用这两个属性

　　　　　　5，如果在声明组件的时候，没有为组件指定组件名，则组件的默认名是注册时的名字

　　　　　　6，当提供了name属性的值后，组件的名称，就是name属性的值

　　插槽：

　　　　1，插槽：是vue为组件的封装者提供的能力，允许开发者在防装组件时，把不确定的、希望由用户指定的部分定义为插槽。

　　　　2，在组件中定义插槽格式为：< slot > </slot>

　　　　3，slot的name属性在不指定的情况下，默认为default，在App.vue中使用的组件，提供的内容都会被填充到default中去

　　　　4，v-slot可以在使用指定的插槽时，可以在被使用的标签中的template中写入v-slot = ' 指定的名称 '

　　　　5，template是一个虚拟元素，知识起到包裹性质的作用，并不会渲染为实质性html元素

　　　　6，v-slot：可以简写为：#

　　　　7，name属性名为default的标签中的内容为默认内容，如果被使用的组件中没有内容，则渲染默认内容，在官方的定义中默认内容为后备内容

　　　　8，具名插槽：为插槽起名，也就是name属性中指定名字

　　　　9，在封装组件的时，为预留的< slot >提供属性对应的值，这种用法，叫做“ 作用域插槽 ”

　　自定义指令：

　　　　1，vue允许开发者自定义指令，自定义指令分为：全局自定义指令，私有自定义指令

　　　　2，私有自定义指令：

　　　　　　1，在每个vue组件中，可以在directives节点下声明私有自定义指令

　　　　　　2，当指令第一次被绑定到元素上的时候，会立即触发bind函数

　　　　　　3，bind函数中形参的el表示当前指令绑定的DOM元素

　　　　　　4，bind函数中形参的binding，通过binding.value表示获取当前指令绑定的值

　　　　　　5，bind函数只调用一次，当指令第一次绑定到元素时调用，当DOM更新时bind函数不会被触发。update函数会在每次DOM更新时被调用 

　　　　　　6，如果bind和update函数中的逻辑完全相同，那么对象格式的自定义指令可以简写为函数的形式