爱米酱的博客

第一次访问Vue前端的时候，会加载很多资源，导致第一次加载前端页面的时候，需要十几秒

找到vue.config.js文件，在其中增加配置。

下面绿色框中的是Vue实例，红色框中的是具体的逻辑，而且最主要的是红色框中的还在操作绿色框中的数据。这是因为在定时器里，我们修改了data中的数据opacity，而Vue有这样的承诺，只要修改了data中的数据，那它就会帮我们重新解析模板，而一重新解析模板，那么插值语法中的change就又会调用一次，所以才会有这种无限循环创建定时器的情况发生。所以我们可以发现，所谓的生命周期，其实就是指Vue中特殊的函数，像上面我们使用到的mounted函数，就是Vue在一个关键性的时刻帮我们调用的。都需要在这里去制定。

下面绿色框中的是Vue实例，红色框中的是具体的逻辑，而且最主要的是红色框中的还在操作绿色框中的数据。这是因为在定时器里，我们修改了data中的数据opacity，而Vue有这样的承诺，只要修改了data中的数据，那它就会帮我们重新解析模板，而一重新解析模板，那么插值语法中的change就又会调用一次，所以才会有这种无限循环创建定时器的情况发生。所以我们可以发现，所谓的生命周期，其实就是指Vue中特殊的函数，像上面我们使用到的mounted函数，就是Vue在一个关键性的时刻帮我们调用的。

那么这一小节，我们就来说说，自定义指令在真正应用的时候容易踩的坑。然后再把自定义指令相关的东西做一个总结。

还有一种就是，我们去定义指令的时候，也不要去写v-前缀，定义指令的时候需要给指令起名字，那么这个指令的名字直接就叫big,而用的时候还是要规规矩矩的写v-big。像需求一这种问题，我们就使用函数的写法就能实现，需求二，我特意设置了一个细节问题，是函数实现不了的，我们就需要用对象的写法去实现。我们可以看到，当修改和v-big毫不相干的值name，都会引起big的调用，则充分说明了指令所在的模板被重新解析时，也会引起指令的重新调用。这个页面一进来，并没有获取焦点，但是在点击n+1以后，却又获取了焦点。

还有一种就是，我们去定义指令的时候，也不要去写v-前缀，定义指令的时候需要给指令起名字，那么这个指令的名字直接就叫big,而用的时候还是要规规矩矩的写v-big。像需求一这种问题，我们就使用函数的写法就能实现，需求二，我特意设置了一个细节问题，是函数实现不了的，我们就需要用对象的写法去实现。我们可以看到，当修改和v-big毫不相干的值name，都会引起big的调用，则充分说明了指令所在的模板被重新解析时，也会引起指令的重新调用。就靠big函数中收到的参数，它收到的参数中有两个比较常用，这里打印出来看一下。

我们之前已经学过一些Vue的指令了比如v-on，v-bind，v-if了，其实Vue还有一些其他的内置指令，我们这一节来学一下。我们学过的指令： v-bind:单向绑定解析表达式，可简写为 :xxx v-model:双向数据绑定 v-for:遍历数组/对象/字符串 v-on:绑定事件监听，可简写为@ v-if:条件渲染（动态控制节点是否存在） v-else:条件渲染（动态控制节点是否存在） v-show:条件渲

过滤器定义对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）语法1.注册过滤器Vue.filter(name,callback)或newVue{filters{}}2.使用过滤器{{xxx|过滤器名}}或v-bind属性='xxx|过滤器名'备注1.过滤器也可以接收额外参数，多个过滤器也可以串联2.并没有改变原本的数据，是产生新的对应的数据httpshttpshttps。......

收集表单数据若,则v-model收集的是value值，用户输入的就是value值若,则v-model收集的是value值，且要给标签配置value值。若1.没有配置input的value属性，那么收集的就是checked(勾选or未勾选，是布尔值)2.配置了input的value属性（1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）https。......

Vue监视数据的原理1.Vue会监视data中所有层次的数据2.如何监测对象中的数据？通过setter实现监视，且要在newVue时就传入要监测的数据（1）对象中后追加的属性，Vue默认不做响应式处理（2）如果需要给后添加的属性做响应式，请使用如下API或3.如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事（1）调用原生对应的方法对数据进行更新（2）更新解析模板，进而更新页面4.在Vue修改数组中的某个元素一定要用如下方法1.使用这些API。......

上一节我们讲了Vue的列表过滤，那么这一节我们把上一节写的列表过滤升级一下，加一个功能叫做列表排序。我们把上一节的例子增加按年龄升序，按年龄降序，还有展示原顺序的功能。注意，这里增加的排序并不影响过滤的功能，也就是过滤和排序的功能是并存的。...

目录1.使用watch属性实现列表过滤2.使用计算属性实现列表过滤3.总结这一小节我们来讲一下Vue的列表过滤，那么想要完成列表过滤就需要有两个关键的步骤：1.获取用户输入2.根据用户输入信息进行匹配针对获取用户输入这一步，我们就需要使用v-model,使用双向绑定，这样用户的输入就可以实时的反馈到数据层。而针对用户信息匹配这一步，最标准的写法应该是使用计算属性去写，但是针对初学者来说可能想不到这么深，初学者可能最开始的想法是这样的只有用户输入的内容发生变化的时候才会进行过滤匹配，所以就要监听这种变化，那么

25.Vue列表渲染_爱米酱的博客-CSDN博客这一节开始我们来学一下Vue中与列表渲染相关的东西，这部分知识很重要，而且还比较多，所以我就拆成几个小节来讲。那么这一小节我们就先讲讲基本列表，把基本列表讲清楚之后，我们再讲key的原理，列表过滤和列表排序实现效果：讲到这里这个遍历就已经实现了，但是这里还有一个特别重要的属性，就是key，我们这里不详谈这个属性，这一节我们只关注怎么配置这个属性即可，具体的深入分析内容会在下一节呈现。和key相关的内容我们可以在Vue官网的学习-->API中找到。 这个key属

这一节开始我们来学一下Vue中与列表渲染相关的东西，这部分知识很重要，而且还比较多，所以我就拆成几个小节来讲。那么这一小节我们就先讲讲基本列表，把基本列表讲清楚之后，我们再讲key的原理，列表过滤和列表排序实现效果：讲到这里这个遍历就已经实现了，但是这里还有一个特别重要的属性，就是key，我们这里不详谈这个属性，这一节我们只关注怎么配置这个属性即可，具体的深入分析内容会在下一节呈现。和key相关的内容我们可以在Vue官网的学习-->API中找到。 这个key属性就是给遍历的每一项加了一个特殊标识，虽然

在这一节当中，我们来讲一下Vue中的条件渲染，顾名思义，意思就是，你符合某些条件，我再去给你渲染某些东西。需求：需要实现标签显示和隐藏状态的切换这个需求如果使用原生去实现的话，可以通过display属性来实现。那么在Vue中，我们不需要亲自去写这些属性，它给你提供了一个指令v-show，我们可以通过它来实现。实现效果：我们可以看到v-show的本质还是在控制display属性，而且原来的html结构并没有消失，只是被隐藏掉了而已。而且我们还可以通过变量来动态的控制显示和隐藏实现效果：其实上面的v

上一节我们讲了绑定class样式，我们都知道，样式的绑定除了可以使用class绑定，还可以使用style内联的样式。

为了讲好class样式，我们这里提前准备了7个样式作为例子来讲解。 basic就是最基本的边框。happy,sad,normal代表了3种心情，这三种心情在设置的时候需要3选一。这三个不能同时应用。而add1,add2,add3是可以同时使用的咱们先看看这两部分样式的效果：互斥部分：兼容部分：讲到这里7个样式我们就说完了，接下来我们就操作一下。需求1：basic是基础的，点击div将样式从normal切换为happy这个时候有人就会想这样去实现，给这个div绑定点击事件，在事件中根据这个div的id获

Vue的监视属性watch与计算属性computed对比

18.Vue的监视属性_爱米酱的博客-CSDN博客今天我们来讲一下Vue的监视属性。还是通过一个小案例来引入。我们需要实现的案例功能是在页面上输出今天天气很凉爽/炎热，而天气的状态可以通过按钮来切换。而且在切换的同时在控制台输出：天气变化了，现在是：凉爽，原来是：炎热。可以看到之前和之后的状态。我们先来简单实现一下： 实现效果：我们可以看到简单的界面效果出来了。那可不可以实现切换呢？我们可以用Vue的开发者工具试验一下。说明切换是可以起作用的。但是我们可以看到 {{isHot ? '炎热' : '凉爽'}}

上一节我们讲了Vue的监视属性：Vue的监视属性https://liufr.blog.csdn.net/article/details/125133366这一节我们再讲一下监视中的扩展点，深度监视。那么这里说的深度是什么意思呢？我们接下来还是通过小案例的方式帮助大家理解。实现效果：接下来提出我们的需求，这里希望我们能够监测到numbers中a的变化，而不监测b的变化。写法如下：实现效果：如果我们想让多级结构numbers中的任意一个属性不论a或者b发生变化的时候都能监测到，该怎么做？刚刚我们监测

今天我们来讲一下Vue的监视属性。还是通过一个小案例来引入。我们需要实现的案例功能是在页面上输出今天天气很凉爽/炎热，而天气的状态可以通过按钮来切换。而且在切换的同时在控制台输出：天气变化了，现在是：凉爽，原来是：炎热。可以看到之前和之后的状态。我们先来简单实现一下： 实现效果：我们可以看到简单的界面效果出来了。那可不可以实现切换呢？我们可以用Vue的开发者工具试验一下。说明切换是可以起作用的。但是我们可以看到 {{isHot ? '炎热' : '凉爽'}} 这样的表达式又写的过于麻烦了，既然我们上一

我们这一节将通过一个小案例来讲清楚Vue的计算属性。案例的实现效果是，有两个输入框，一个输入姓，一个输入名，最后呈现姓-名当姓或者名改变的时候，最后呈现的姓-名也同步发生改变

前两节我们学习了Vue的事件修饰符和Vue的键盘事件，这一节我们来学习一下

1.常见的键盘事件keydown:按下键盘，不需要抬起来就会触发keyup:按下键盘，等键盘抬起来才会触发2.键盘按下，输出输入框中输入的值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie

今天这一节，我们来讲讲Vue中的事件修饰符。下面我们用一个小例子来引入它。1.Vue事件修饰符小例子我们都知道一个a标签既有跳转链接，又有点击事件的时候，它会先执行点击事件，然后再跳转链接。就像下面这样<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

这一节我们来学习Vue中的事件处理，我将用几个小例子让大家学会它。案例1：点击按钮，弹出hello world在vue中要给一个元素绑定事件，需要用到一个指令v-on:click,v-on代表做什么操作的时候，click代表点击操作。v-on:click就是当我们点击的时候。那这个时候有些同学就会想到这么写：...

上一节我们知道了什么是数据代理之后，那么我们这一节就来看看Vue中是如何应用数据代理的。

上一节我们复习了Object.defineProperty方法，那么这一节我们给数据代理下一个定义。了解一下到底什么是数据代理，然后我们再去看看Vue中到底是如何应用数据代理技术的，以及应用了会有什么好处。 数据代理：通过一个对象代理对另一个对象中属性的操作(读/写)下面我们写一个简单的例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...

从这一节开始，我们开始讲解Vue的数据代理，想把数据代理搞清楚，就需要对这个方法Object.defineProperty特别熟悉。 这个方法在Vue的底层中，有很多地方都用到了它，比如Vue中的数据劫持，数据代理，计算属性...

Vue的设计者在设计Vue的时候参考了MVVM模型，虽然没有完全遵循MVVM 模型https://zh.wikipedia.org/wiki/MVVM，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用vm(ViewModel 的缩写) 这个变量名表示 Vue 实例。在维基百科中是这样解释MVVM模型的下面我们介绍一下Vue中的MVVM模型1.M 模型(Model)：对应data中的数据2.V 视图(View)：模板3. VM:视图模型(ViewModel):...

data与el的2种写法： 1.el有两种写法 (1).new Vue的时候配置el属性 (2).先创建Vue实例，随后再通过v.$mount('#root')指定el的值 2.data有2种写法 (1).对象式 (2).函数式 如何选择：目前哪种写法都可以，以后学习到组件的时候，data必须使用函数式，...

在上一节课中我们使用v-bind实现了标签属性和js表达式的数据绑定，数据绑定的意思就是，两个事物绑定之后，我的值是多少，那么你的值也就是多少。 那么除了v-bind之外，还有一个指令也可以实现数据绑定，并且做的比v-bind还要高级一点。那就是v-model。 Vue中有两种数据绑定的方式： 1.单向绑定(v-bind):数据只能从data流向页面。 2.双向绑定(v-model):数据...

我们前面的课程其实已经使用过Vue的模板语法了，就是双花括号中使用变量 {{name}},那么这种语法其实是Vue中的插值语法。 Vue中包含两种语法： 1.插值语法 功能：用于解析标签体内容。 写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性。 2.指令语法 功能:用于解析标签(包括：标签属性、标签体内容、...

上篇文章我们写了一个简单的Vue实现输出HelloWorld的小例子，今天我们就对这个例子进行扩展分析一下。1.Vue实例与容器的关系是什么？ 如果一个Vue实例对应了2个容器会出现什么？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content...

初识Vue: 1.要想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 3.root容器里的代码被称为 Vue模板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co...

在vue官网Vue.jshttps://cn.vuejs.org/，点击学习->教程点击安装然后我们就可以下载对应的vue.js文件的开发版本和生产版本，生产版本去除了调试信息，所以体积相对更小我们有两种安装vue的方式:1.就是使用<script>标签引入vue的js 2.使用NPM去安装vue,如果选用这种方式去安装的话，往往都会配合命令行工具一起使用也就是脚手架我们这里先使用<script>标签去实...

1.Vue是什么？想学习Vue，我们首先就要搞懂Vue是什么？在Vue官网中是这样给自己下定义的：Vue是一套用于构建用户界面的渐进式JavaScript框架构建用户界面：Vue只关注你把数据给我之后，我怎么去构建界面渐进式：Vue可以自底向上逐层的应用 简单应用：只需要一个清凉小巧的核心库（压缩完只有100多Kb） 复杂应用：可以引入各式各样的Vue插件2.Vue是谁开发的？目前Vue的地位：后...

由于目前还处于Vue2到Vue3的过渡阶段，而且Vue2是一个特别经典的版本。在4年间经历了70多次版本的更新。所以在目前的公司实际开发中Vue2依然使用的很多。但是Vue3也一定是未来的趋势。所以根据目前的形势来看，我们最好就是将Vue2和Vue3都掌握好。 所以接下来的课程就是从一个小白入手，将Vue2这个经典版本入门熟练掌握之后，再去探索Vue3。 在本课程当中我们会讲到下面内容：...