Vue笔记

Vue

是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作,但在vue中

语法模板

 <script>

        new Vue({

el:'#app',//设置vue作用的范围

data:{//定义页面中显示的模型数据}

methods:{//定义在页面中使用的方法}

created() {生命周期方法，页面加载前执行}

mounted() {生命周期方法，页面加载后执行}

            }

        })

  </script>

注意：以上的属性有的可以不声明

常用指令

注意：vue中的指令都会具有一个v-的前缀，例如v-bind v-for等

单向绑定

v-bind单向数据绑定，常用于标签属性中,v-bind:要绑定的属性="数据名" 可以简写为 ：要绑定的属性="数据名"

示例:动态绑定css属性值

双向绑定

v-model双向绑定，双向绑定是相对于单向绑定来说的，如果说单向绑定是页面跟随数据改变而改变，双向绑定就是页面或数据发生改变时另一端也会发生改变。

事件绑定

v-on:事件绑定，通过这种方式可以将在methods中定义的方法绑定到某个控件的某个触发条件上，v-on：条件名=”方法名“ 简写格式为：@条件名=”方法名“

条件指令

v-if，判断后面的数据的值来使该控件是否显示，与其配套的还有 v-else v-else-if,注意：所需的数据必须为布尔类型的，同时是懒加载机制，只有值为真是才会开始渲染标签.

条件显示指令

v-show，与if相同的是同样判断一个布尔类型的值来达到显示的控制,与v-if不同的是，v-show控制的标签即便是条件为false，标签仍会被渲染，只是基于css层面的隐藏，本体仍存在

列表渲染

v-for 基础语法：v-for=" 遍历变量 in 被遍历对象 ",之后就可以在该标签内使用该变量。完整语法：v-for="(遍历变量, 遍历下标) in 被遍历对象"，其中遍历下标从0开始。

指令修饰符

.是vue中一个特殊的指令，用以对原有的其他指令做修饰，改变指令的效果，例如当.修饰v-on时: v-on:submit.prevent就会阻止控件的默认事件（提交），相当于调用了event.preventDefault()方法；

插值表达式

{{xxx}}用于将一个变量的值填充到此处内容的一个指令，同时也是v-text简写版本

指令式插值表达式

V-text与v-html

V-text与差值表达式几乎相同，这里v-html，用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

插槽表达式

v-slot用于在使用子组件时将该指令修饰的标签内的内容替换到子组件的同名的插槽位置，简写格式为 #

静态内容表达式

V-once，这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。

过滤器

全局过滤器 这里注意顺序，Vue.filter 一定定义在创建实例前，否则不生效

生命周期方法

简洁版本

beforeCreate( )

该钩子函数执行时，组件实例还未创建.

created()

组件初始化完毕，各种数据可以使用，可以使用ajax发送异步请求获取数据

beforeMounted()

未执行渲染，更新，虚拟DOM完成，真实DOM未创建,即插值表达式尚未被解析为数据

mounted()

初始化阶段结束，真实DOM已经创建，可以发送异步请求获取数据,也可以访问dom元素,插值表达式被解析为数据

beforeUpdate()

更新前，可用于获取更新前各种状态数据 此时数据已经更新,但页面尚未重新渲染

updated()

更新后执行该钩子函数，所有的状态数据是最新的,页面也已重新刷新

beforeDestroy() 

销毁前执行，可以用于一些定时器的清除。

destroyed()

组件已经销毁，事件监听器被移除，所有的子实例也会被销毁。

beforeCreate

Vue实例初始化之后，以及事件初始化，以及组件的父子关系确定后执行该钩子函数，一般在开发中很少使用

created

在调用该方法之前，初始化会被使用到的状态(属性)，状态包括props,methods,data,computed,watch等，且会实现对data中属性的监听，也就是在created的时候数据已经和data属性进行了绑定。(放在data中的属性当值发生改变的时候，视图也会改变)。同时也会对传递到组件中的数据进行校验。

在执行created的时候，所有的状态都初始化完成，我们也完全可以在该阶段发送异步的ajax请求，获取数据。在created方法中，是无法获取到对应的的$el选项,也就是无法获取Dom

beforeMount

在执行该钩子函数的时候，虚拟`DOM`已经创建完成，马上就要渲染了，在这里可以更改`data`中的数据，不会触发`updated`, 其实在`created`中也是可以更改数据，也不会触发`updated`函数

mounted

经过beforeMount后，在模板中所写的插值表达式等指令会被具体的数据所替换掉。所以在mounted的时候，就可以看到真实的数据。同时整个组件内容已经挂载到页面中了，数据以及真实`DOM`都已经处理好了，可以在这里操作真实`DOM`了，这个时候，页面已经被渲染完毕了，在这个钩子函数中，我们可以去发送`ajax`请求。

beforeUpdate

当Vue发现data中的数据发生了变化，会触发对应组件的重新渲染，先后调用了beforeUpdate 和updated钩子函数，beoreUpdate方法之后有一个非常重要的操作就是虚拟DOM会重新构建，也就是新构建的虚拟DOM与上一次的虚拟DOM树利用diff算法进行对比之后重新渲染。

Updated

当Vue发现data中的数据发生了变化，会触发对应组件的重新渲染，先后调用了beforeUpdate 和updated钩子函数。

到达updated方法时，数据已经更新完成，dom也重新render完成。

beforeDestroy

这个钩子函数在实例销毁前调用，在这一步，实例仍然可用，在该方法中，可以做一些清理的工作，如清除定时器等。

Destroyed

在这里时，Vue实例已经被销毁，所有的事件监听器会被移除，所有的子实例也会被销毁

Vue属性与方法

Computed

用于定义计算方法，当页面中调用其中定义的方式时就会返回计算后的值

watch

用于监听变量的改变，当变量的值发生改变时，就会触发在watch中定义的同名方法

Vue组件

组件是可复用的Vue实例，且带有一个名字,我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用,在需要使用的时候声明并引用即可.

组件注册

组件的注册即为一个声明的操作，组件只有在注册后才能被vue识别其标签并使用，组件注册分为两种，全局注册和局部注册

全局注册

全局注册的组件注册后可以用在任何新创建的 Vue 实例中，也包括其组件树中的所有子组件的模板中，他的注册方式是通过调用vue对象的方法声明

第一个参数表示他的名字，也是在引用时使用的，第二个则是组件的内容，其中还包裹他的javascript代码。

注意：全局注册的组件必须要在new vue前注册，否则不起作用~

局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

因此我们可以通过局部注册的方式来限制组件的使用范围，减少不必要的支出

声明局部注册需要在使用组件的地方通过components属性对象进行声明，同时需要定义或引入组件对象

同样的，他的key就是组件的名字，value则是组件对象的引用

也可以直接在父组件中定义编写子组件内容

组件的独立与公有

组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。与根实例的不同就在于他的data属性组的声明，组件的data属性声明通常是一个函数的返回形式，这样的声明可以使得组件的每次复用的data都会产生一个新的对象：

或是简写

但若组件中的data返回的不是一个新的对象，而是一个对象的引用时，则每个复用出来的对象共用同一组data属性组

但会报警告信息

组件之间传值

在实际开发中，组件之间是需要某些数据进行逻辑上功能联通，这时候就需要进行组件之间的传值，又叫组件通信

父组件向子组件传值

子组件在props属性对象中声明属性名，父组件通过在引用子组件的地方通过属性的方式传递

注意：父传值可以使用单向双向绑定的方式进行传动态的值，且所传的值可以是对象（对象好啊）

父组件触发子组件方法语法：

this.$refs.子组件ref.子组件方法(参数);

子组件向父组件传值

子组件需要向父组件传递值时，是通过监听的事件进行传递，父组件通过v-on:来绑定监听子组件触发事件时进行处理的方法，

v-on可以简写为@xxxx

子组件通过$emit(“xxx”)来触发父组件监听的xxx方法

而父组件接受参数时，若监听绑定的是个方法，则参数会作为方法的形参出现

也可直接通过$xxx进行取值

也可以使父组件监听原生事件，在监听的原生事件后添加.native：

以上表示为当子组件触发点击时，父组件执行doTheThing方法

组件插槽（内容分发）

当我们进行组件的编写时，有可能会出现组件的部分代码会有个性化的需求，这时就可以通过组件插槽来进行组件的部分个性化，

组件插槽可以通过 <slot></slot>标签来进行指定插槽的位置，在组建中被定义的插槽位置的部分会被使用组件标签中的内容替换

插槽的替换内容可以也可以包含html（有js也行）

注意：插槽替换的内容中的变量及js方法等应在父组件定义，且若父组件使用子组件时没用在标签中增加替换内容，则子组件slot标签内的内容仍会正常显示

进阶

当我们需要在子组件中定义多个可替换内容时，我们可以给插槽指定一个属性name来区分插槽

在使用时，则通过v-slot来指定替换哪个插槽

注意：若slot标签未指定name时，则会默认slot的name为default，一般情况下v-slot指令只能使用在template 标签上（只有一个默认插槽的情况下v-slot可以直接用在子组件上）

插槽传值

有时候，我们需要在父组件中使用子组件的属性，这时候，我们也可以通过插槽来进行传值，

将user对象绑定到插槽上，这是就可以在父组件引用的地方进行接收

接收时候的名字可以与子组件的传递时的名字不相同

动态组件

有时候会根据情况的不同需要显示不同的组件，这是就可以使用动态组件来进行

定义一个component标签，在根据is属性进行动态绑定组件名字的方式即可

进阶

缓存动态组件内容，有时我们在切换动态组件时，不希望组件因为切换反复的渲染，这时候我们可以使用<keep-alive>标签将动态组件包裹

技巧

可以通过给动态的绑定css类来实现对样式的需求

当后面的表达式成立时,才会添加其类的效果

首屏渲染加速

Webpack打包结果可视化插件

webpack-bundle-analyzer, 用于预估前端文件打包后的文件大小,方便优化

安装

npm i webpack-bundle-analyzer -D

npm run build --report , 浏览器会自动打开分析结果

CDN配置

常规的npm安装后import回将这部分依赖打包进入项目中( vendor.xxxxx.js中), 这样首屏加载时会极大的增加需要加载的内容,因此可以将部分外部依赖通过引入外部cdn的方式将这部分资源加载进入而非打包的方式引入到其中,

例:
在index.html中使用script标签引入其中

引入后还需要webpack配置中声明这些依赖是外部引入而非打包进入的

key为依赖包名称，value是源码抛出来的全局变量。如下图所示，可以看到打包后vue相关资源包已经排除在外了。对于一些其他的工具库，尽量采用按需引入的方式。

这时候就可以通过window.xxx的方式使用这些外部依赖了,之后将之前import方式引入调用的可以替换为 window.xxx,此处的xxx即为上图中的V值

Gzip压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。前端配置gzip压缩，并且服务端使用nginx开启gzip，用来减小网络传输的流量大小。

安装 npm i compression-webpack-plugin -D

在config文件中开启gzip

之后可能会出现报错,此时请检查webpack与该插件是否匹配,以及此处的配置

之后需要在nginx.conf中配置开启gzip;

http:{

……

gzip on;  #开启gzip

gzip_static on; gzip  #静态压缩
gzip_min_length 1k;  #启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_comp_level 1;  #gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/bmp application/x-bmp image/x-ms-bmp application/vnd.ms-fontobject font/ttf font/opentype font/x-woff;

#进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_vary on;  #是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_disable "MSIE [1-6]\.";  #禁用IE 6 gzip
gzip_buffers 32 4k;  #设置压缩所需要的缓冲区大小
gzip_http_version 1.0;  #设置gzip压缩针对的HTTP协议版本

………

}

动态绑定监听事件

动态绑定属性

$event 当前触发事件对象

$event是指当前触发的是什么事件,其中可以获取到很多属性,

$event.target则指的是事件触发的目标, $event.target则指的是事件触发的目标