终于顺利进入了vue事实上，只有在学习之后才知道。以前三次vue不学，真的是对的，现在进来一点都不后悔，ajax、node.js、promise、webpack、git除了三个基础，还需要额外学习。 终于可以一窥了vue真相，学了这么久，说实话一直忍着，不碰这条线，就想保持浓厚的兴趣，来看看vue是什么神奇的东西能让代码如此简单？的确，至少在我现在学习的阶段，没有其他大的感受。唯一的感受就是很多功能的实现要简单得多，比起出身。js一星半点不简单。 中间的笔记也丢了，感觉可能是typora都要让我来学两编加深下记忆吧，总是有这个bug，显然占用的存储尺寸还在那里，打开是一片空白，反正已经跟着了typora联系了制作团队，看能不能后续解决。bug。

这篇文章可以说是重量级的，至少是我迄今为止最大的集格式、含金量和规模！

一套用于构建用户界面的渐进式(渐进式:自上而下逐层应用，由一个小的核心库引入各种类型vue插件）JavaScript框架。

• 采用组件模式，提高代码复用率，更好地维护代码：一个.vue包含后缀文件html、css、js所有包装在一起完成活动部分的内容，即组件化；代码重用率：由于您已经包装，我直接使用它，即代码重用率；更好的代码维护：我直接在您的基础上修改一些功能。
• 声明式编码

在知道什么是声明编码之前，我们应该知道什么是命令编码。我们过去常常通过原始的方式将数据对象渲染到页面上js这就是命令代码，就像一步一步完成别人的命令一样，我们只需要声明声明代码。

• 使用虚拟DOM Diff算法，复用DOM节点

原来我们用原生js，渲染数据是通过模板字符串或模板引擎进行的。如果此时添加了几个数据，则需要从零开始渲染，然后生成一个完整的数据html，除了我们新增的字符串(以前的数据)之外，是否生成了一些以前的字符串，所以vue做法是运动虚拟dom，再加上diff算法会更虚拟dom如果有跟以前一样的直接复用。

打开vue官网安装开发版，介绍vue.js后log有两个提示：一个是要求您下载开发人员工具，另一个是提醒您上线后不要引入此提示vuejs

Vue代码提示插件：vue 3 Snippets

下载谷歌应用商店vue-devtools

注意修改vue谷歌插件

也就是我们的第二个提示，参考vue官网api

这个是我们vue属性在全局配置下，即vue.config字面意思是生产环境提示，修改为false。

从此消除了所有提示。

在进入这个案例之前，先解决一个问题

首先要知道我们的vscode开启live server后来，他将整个vscode文件夹放在服务器下面，所以他回到服务器的根目录上寻找小图标，并在根目录中添加这样的图标

怎么来使用vue，需要创建一个开始vue对象实例，然后主要是实例中要传入的参数:

el ：‘’ el是固定写法，后面的值通常是css的选择器

data ：｛｝ data它也是一种固定的写作方法，以后暂时用对象书写，作用是向上el也就是说，哪个容器传输参数

总结：

• 想让vue必须配置一份工作vue实例，并且里面的参数为一个对象
• 容器（div也叫盒子 vue模板 一个功能是插入vue语法，二是运行js的时候看到vue这个例子，所以vue.js回去扫描这个容器，扫描后还有一个vue语法，看看数据是否有这个键，以完成一个转换过程。这个原理有点类似于模板引擎！

• 我们的容器（vue模板)和实例是一对应的，你写两个vue模板都是一样的class命名，例子写一个，不会渲染两个，只有第一个模板有数据；你写一个模板，但有两个例子，相应的模板，分别进入两个数据，不会渲染数据，只有第一个例子有数据。

• 只有一个容器和一个一个容器和一个例子(数据将在这里进行组件开发)
• 在我们的容器中vue语法{{}}中的内容只能是表达式

表达式：是一种有值的公式，如变量、函数、三元表达式、算术操作等

js代码：if、for循环这些

区分这两个：

• 修改数据可以在开发者工具中修改

数据绑定分为两种：

• 单向绑定 v-bind 属性只会受到数据的影响，但数据的修改不会影响属性。

• 双向绑定：v-model 值在变，同时数据data也在变

v-model：value可直接简写为：v-model没有冒号，因为它本身是用来收集的value值的

注：双向绑定通常只用于表单类元素上（input、单选、复选、文本域等)

首先要知道我们的vue上面有很多例子 开 头 的 方 法 ， 这 些 方 法 都 是 给 我 们 用 的 ， 但 是 非 这些方法都是给我们的，但不是 开头的方法，这些方法都是给我们用的，但是非开头的就是vue自己用的了我们用不了，el的第二种写法正是用到了实例对象的proto原型上的一个$mount的方法（理解性记忆，mount有挂载的意思，而我们vue本身就是把这个实例挂载到这个容器上），原来那种和这一种都可以，面对不同的情况有不同的用法

data的简写方法就是值为一个函数，但是函数的返回值只能为一个对象

缩写为

注意：vue所管理的函数（比如data函数），不能写箭头函数，不然this乱了不再是vue对象实例了

首先是M可以看成我们的数据，V看成我们的模板，最后一个VM就是可以将我们的数据渲染到模板，将模板的value保存到数据，在中间起到一个转换的工作，这个就是VM，整个系统就为MVVM模型

所以我们一般把对象实例取名为vm,中间的一个转换的过程，就需要我们去学习vue的各种语法了

总结：回顾一下我们前面所说的｛｛｝｝vue方法这里面都能写些什么的问题，前面是说的表达式吧，其实这里面能写的远不止于此，我们vm是一个实例对象，｛｛｝｝里面放的东西其实是我们vm实例对象里面的任何东西，包括我们数据里面写的name、age等都是因为他有所以我们才能用到。

不仅如此，就连原型上的、非$开头的都可以拿到，而且不用带前缀，以为都是vm里面的，之所以要这么说，只是为了要记住，我们的模板里面的vue语法都是拿的vm实例里面的属性方法。

• 需要用到之前学过的一个es6语法Object.defineProperty（字面意思看得出定义属性，那就是定义对象的属性的），这个方法有三个参数，第一个为对象名，第二个为对象属性名，第三个参数为一个配置对象，里面有四个值可以对这个属性做约束

​ 枚举表示是否可以被遍历

​ 上面只是这个方法的普通用法，真正要用的是配置对象的两个方法

​ 如果我们是这样定义的：

可以看到值并不会被更改，为什么？因为我们都知道js代码的一个执行顺序加上我们时间循环的一个机制，当我们第一次定义玩number，同时跟着主栈道把data也一起定义完了，这个时候我再去修改number的值，那就只是修改number的值，并不会重新再执行一次data的重新赋值，他的修改也影响不了他。

所以这个时候在我们的defineProperty配置对象里面就出现了两种方法

get函数（getter）当有人一访问age这个值时就会立马去调用getter

set函数（setter）当有人一修改age这个值时我的value形参就会接收到这个值，从而可以拿来对我的里面的数据修改值

• 数据代理

通过一个对象代理对另一个对象属性的操作（读写）

• vue中的数据代理

首先我们定义的data会被vue转化成他下面的_data这个对象，其实vue做到这一步就已经够了，我们传数据的时候只需要_ data.name即可，但是有没有想过我们没传一个数据，前面都要加一个 _data是不是很麻烦，所以vue接着才做了一个数据代理的事情，在vm实例上新增了两个属性name和age，其实就是用defineproperty这个方法新增的，同时里面getter返回 data.name的值，setter又把值修改到他，这里就存在了一个数据代理，用了vm实例对象代理了 _data这个对象

事件的指令语法v-on:click（指令语法都是v-开头）

vm实例对象属性为methods 它是时间处理函数的属性名

我们事件怎么来传参？前面说过指令语法会把字符串变为表达式，所以这里的字符串不再是看成字符串这么简单，是一个函数，是函数就可以给他实参

事件要使用event这个内置对象的话，也需要传参进去$event

注意：

• v-on:xxx xxx为事件名这是vue的事件声明方式，可以简写为@xxx
• 我们的这几个事件处理函数也会变成vm实例上的函数
• 这些函数也是属于vue所管理的函数所以不要使用箭头函数
• 如果指令语法没有传参，处理函数又有一个形参，这个参数默认为e内置对象

就是无需通过e.~~来执行一些操作，直接可以在指令语法处使用，看以下案例注意这个事件修饰符是加在哪里得

（前三个熟记）（可以像链式编程一样连写）

• prevent：阻止默认行为
• stop：阻止冒泡

• once：事件只触发一次

• capture：使用捕获模式

怎么来理解，因为我们默认事件是要先经过捕获才冒泡，但是事件处理是在冒泡进行的，也就是父子都有一个打印信息，我点子，其实是先读取了父再来读取子的因为先经过捕获事件，但是我们事件处理程序是在冒泡进行，所以冒泡回去的时候才会开始打印子再打印父，这个时候如果给父添加了一个capture，那就代表着从事件捕获就开始处理程序，本身事件流就是先捕获，我点子，事件流来了，由于是捕获阶段触发事件，所以会先打印父再打印子

正常逻辑我点div2会按照冒泡执行2 1

加了capture之后

• self：只有e.target是当前操作元素的时候才会触发（可以拿来阻止冒泡）

很明显这个又会出发冒泡，但是我给父元素加了个.self事件修饰符，意思就是只有e.target是自己的时候才会触发他那个点击事件，我们知道e.target谁触发就是谁，点击div4虽然触发两次，但是两次都是div4这个元素

• passive：

两个扩展的知识 ：我们的滚动事件有两种，一个是scroll在我们滚动滚动条的时候触发的，一个是wheel当我们滚动鼠标滚轮的时候触发

这个时候会发现，当我们鼠标滚轮一动，需要先把回调函数执行完了，才会去执行默认行为向下滚动的操作，这个时候passive就派上用场了。

注意用在哪里，怎么个用法

• 特殊按键

  • tab：必须配合keydown使用，因为一按下就会切换，keyup等你抬起按键时，已经切走了，就无法实现按这个键要实现的功能
  • 系统修饰键如上图第三点，扩展：@keyup.ctrl.y = xxx表示只能ctrl + y才触发

• 如果想要用的按键在定义之外，可以先通过e.key去查看这个键叫什么名字，一般就是叫键盘上的名字有些不一样，如ctrl=control，得到名字后 如果是两个单词及以上也就是驼峰命名的（CapsLock），需要将大写转为小写，同时单词之间用-分割，如：caps-lock即可正确使用该键

姓名案例：

输入姓，输入名，展示出来并且是动态展示。

• 插值语法实现：

• methods方法实现

我们的vue语法是可以为一个函数的，而且只要是函数都要写在methods里面

这方法实现关键点在于，首先我们事件处理函数确实可以省略括号，但是vue语法里面不可省略，然后要知道我们的data是在vm实例里面的，而我们的vue管理的函数this又是vm实例，所以就可以拿了

• 计算属性

将已经写好的属性去加工计算形成全新的属性，需要写在computed属性里面

firstname、lastname都是我们vm的属性，而fullname也是vm的属性（所以用也是直接vue语法来用），但是他是计算属性，需要将已有属性用来操作的属性

计算属性里面的每一个属性跟obj定义属性的方法一样需要一个getter和setter，当有人一访问到这个属性（fullname）就会调用getter，且它的返回值就是fullname的值

get什么时候调用？

computed里面的getter有缓存机制，也就是说一个vue模板里面如果多处用到了fullname那么，getter只会被调用一次。

什么时候被调用分为两种情况：一是初次读取这个计算属性的时候，二是这个计算属性依赖数据发生变化的时候（依赖数据也就是里面的this.xxx的数据）

所以他跟上面的methods最本质的区别就是他有缓存机制，多次使用这个值只要依赖数据没发生变化那么只会调用一次，而methods里面的函数方法，用一次调一次

同时这里要注意一下不要把它看的太复杂了，就是一个属性而已，vue语法调用的时候也是正常按照属性来调用，里面的函数只是对这个属性修饰，可以理解为模板引擎里面的fileterName

setter

他同样也有setter，如果这个属性只是算来给别人读取的就不用写这个setter，如果这个计算属性还会被修改的话，就需要setter

简写：前提只读不写（没有setter）

这里还是个属性，只是简写了，不要在vue语法里面去像函数一样调用

监视是用来监测属性（一般属性、计算属性）是否发生变化

天气案例

首先如果事件的代码很简单一句话可以直接指令语法处

• 监视方法一：通过一个全新的配置 watch里面写上你要监视的属性也是一个对象，再在里面写上配置项handler函数他有两个参数，一个是改变后最新的值，一个是变化前的值；第二个配置项immediate为布尔值，表示让hanlder一开始就执行还是发生变化在执行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4tKc3Bs9-1651467615737)(https://img2022.cnblogs.com/blog/2680817/202205/2680817-20220501205630137-467549451.png)]

• 监视方法二：通过vm实例里面的提供的方法$watch

注意对象里面的属性名其本质是字符串所以这里需要传字符串

• 深度监视

Vue的watch默认不检测对象里面的值，需要配置deep在watch里面才可检测到对象是否改变

• 监视简写

跟计算属性类似，没有其他配置项，只有handler时可简写

方法二同样可以简写，前提条件是一样的

总结：目前vue所管理的函数（不能写箭头函数）=> methods里面的、计算属性里面的getter、setter（包括简写形式）、监视属性handler包括简写

• 一.Vue简介

• 1. Vue是什么

• 2. 特点

• 二.搭建vue开发环境

• 1.安装

• 2.开发者工具

• 3.productionTip

• 三.vue基础

• 1.hello小案例

• 1.1.注意事项

• 2.模板语法

• 3.数据绑定

• 4.el、data两种写法

• 5.MVVM模型

• 6.数据代理

• 7.事件处理

• 7.1 事件基本使用

• 7.2 事件修饰符

• 7.3 键盘事件

• 8. 计算属性

• 9.监视属性

  __EOF__

   - **本文作者：** [Heymar](https://blog.csdn.net/biggbang)
  

• 本文链接： https://blog.csdn.net/heymar/p/16214010.html
• 关于博主： 评论和私信会在第一时间回复。或者直接私信我。
• 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
• 声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角**【[推荐](javascript:void(0)😉】**一下。