关于前端:vue-vue基础vue核心内容

终于算是顺利进入 vue 了，的确也只有学了过后才晓得，之前三过 vue 而不学，的确是对的，当初进来了一点都不悔恨，ajax、node.js、promise、webpack、git 等等的确是除了三大根底外还须要额定学的。
终于可能一窥 vue 的真容了，学了这么久，说实话始终都忍着，不去触碰这一条线，就想留着放弃浓重的趣味，来看看 vue 到底是个什么神奇的货色，能让代码如此简略，的确，至多到我当初学的阶段，其余大的感触没有，惟一的感触就是，很多性能的实现要简便的多了，那比原生 js 不是简略一星半点。
这两头笔记还丢过，感觉可能 typora 都要让我来学两编加深下记忆吧，总是有这个 bug，明明占用的存储大小还在那里，关上就是一片空白，反正曾经跟 typora 的制作团队分割过了，看能不能后续给解决掉这个 bug。

这篇文章堪称是重量级，至多是我目前为止集格局、含金量、规模最大的！

一.Vue 简介

1. Vue 是什么

一套用于构建用户界面的渐进式（渐进式：自顶向下逐层的利用，由一个玲珑的外围库，引入各式各样的 vue 插件）JavaScript 框架。

2. 特点

• 采纳组件化模式，进步代码复用率，让代码更好保护：一个.vue 后缀的文件蕴含 html、css、js 全部包在一起实现一个流动版块的内容这就是组件化；代码复用率：你既然都封装好了，我间接拿来用那就是代码复用率；代码更好保护：我间接在你的根底上批改一些性能。

• 申明式编码

  在理解什么是申明式编码之前先理解什么是命令式编码，咱们以前要将一个数据对象渲染到页面上都是通过原生 js 这样一步一步往下做，像在一步一步实现他人命令一样这就是命令式代码，而咱们申明式代码只须要申明一下即可。

• 应用虚构 DOM+Diff 算法，复用 DOM 节点

  原来咱们用原生 js，渲染数据通过模板字符串亦或者是模板引擎，如果这个时候又新增了几条数据上来，又要从头开始渲染而后生成一个残缺的 html，那除去咱们新增的是不是又生成了一些以前就有的字符串（以前那些数据），所以 vue 的做法就是静止虚构 dom，再加上 diff 算法会去比拟虚构的 dom 如果有跟以前一样的间接复用。

二. 搭建 vue 开发环境

1. 装置

关上 vue 官网装置开发版本，引入 vue.js 后 log 会有两个提醒：一个是叫你要下载开发者工具，一个是揭示你在上线后不要引入这个 vuejs

Vue 代码提醒插件：vue 3 Snippets

2. 开发者工具

谷歌利用商店下载 vue-devtools

留神批改 vue 谷歌插件

3.productionTip

也就是咱们第二个提醒，参照 vue 官网 api

这个是咱们 vue 的全局配置下的属性，也就是 vue.config 的属性字面意思就是生产环境提醒，批改为 false。

自此所有提醒打消。

三.vue 根底

1.hello 小案例

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

首先要晓得咱们的 vscode 开启 live server 后，他是将整个 vscode 文件夹放在了这个服务器上面去了，所以他回去服务器的根目录上找这个小图标，在根目录增加一个这样的图标即可

怎么来应用 vue，开始须要创立一个 vue 的对象实例，而后次要的是，实例外面要传入的参数：

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

data：{} ==data 也是固定写法，前面临时以对象进行书写，作用是向下面 el 也就是哪个容器传递参数 ==

== 总结：==

• 想让 vue 工作必须配置一个 vue 实例，并且外面的参数为一个对象
• 容器（div 盒子）也被称为 <u>vue 模板 </u> 的作用一个是插入 vue 语法，二个是当运行 js 的时候看到 vue 这个实例，那么 vue.js 就回去扫描有没有这个容器，扫到后还有一个 vue 语法，就去看数据有没有这个键，从而实现一个转换的过程。其实这个原理有点相似于后面说过的模板引擎！

1.1. 注意事项

• 咱们的容器（vue 模板）和实例之间是一一对应的关系，你写两个 vue 模板都以同样的 class 命名，实例写一个，并不会两个都渲染上，只有第一个模板有数据；你写一个模板，然而实例有两个，都对应的这个模板，别离传入了两条数据，也并不会都把数据渲染上来，只有第一个实例有数据。

• 实在开发中只会有一个容器和一个实例（数据这里将会进行组件化开发）

• 在咱们容器中的 vue 语法{{}}里的内容只能是表达式

  表达式：就是带有值的式子，如一个变量、函数、三元表达式、算术运算等

  js 代码：if、for 循环这些

  要辨别这两个：

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

2. 模板语法

• 插值语法，即下面所用的插入进去的值

• 指令语法：==v-bind：可简写为：== 留神（它是专门给 <u>标签属性</u> 外面的字符串让他变为一个示意式的，就相当于有值了，是个变量了，要去实例外面找值了）

  所以咱们个别用插值语法利用标签体下面，而 v -bind 用于标签属性

3. 数据绑定

数据绑定分为两种：

• 单向绑定 ==v-bind== 只会让属性受数据影响，然而数据的批改影响不了属性。

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

  ==v-model：value 能够间接简写为：v-model 没有冒号，因为它自身就是用来收集 value 值的 ==

== 留神 ==：双向绑定个别只用在 <u> 表单类元素 </u> 上（input、单选、复选、文本域等）

4.el、data 两种写法

首先要晓得咱们的 vue 实例对象下面有很多 $ 结尾的办法，这些办法都是给咱们用的，然而非 $ 结尾的就是 vue 本人用的了咱们用不了，el 的第二种写法正是用到了实例对象的 proto 原型上的一个 ==$mount== 的办法（了解性记忆，mount 有挂载的意思，而咱们 vue 自身就是把这个实例挂载到这个容器上），原来那种和这一种都能够，面对不同的状况有不同的用法

data 的简写办法就是值为一个函数，== 然而函数的返回值只能为一个对象 ==

缩写为

== 留神：vue 所治理的函数（比方 data 函数），不能写箭头函数，不然 this 乱了不再是 vue 对象实例了 ==

5.MVVM 模型

首先是 M 能够看成咱们的数据，V 看成咱们的模板，最初一个 VM 就是能够将咱们的数据渲染到模板，将模板的 value 保留到数据，在两头起到一个转换的工作，这个就是 VM，整个零碎就为 MVVM 模型

== 所以咱们个别把对象实例取名为 vm, 两头的一个转换的过程，就须要咱们去学习 vue 的各种语法了 ==

== 总结 ==：回顾一下咱们后面所说的{{}}vue 办法这外面都能写些什么的问题，后面是说的表达式吧，其实这外面能写的远不止于此，咱们 vm 是一个实例对象，{{}}外面放的货色其实是咱们 vm 实例对象外面的任何货色，包含咱们数据外面写的 name、age 等都是因为他有所以咱们能力用到。

不仅如此，就连原型上的、非 $ 结尾的都能够拿到，而且不必带前缀，认为都是 vm 外面的，之所以要这么说，只是为了要记住，咱们的模板外面的 vue 语法都是拿的 vm 实例外面的属性办法。

6. 数据代理

• 须要用到之前学过的一个 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 这个对象

7. 事件处理

7.1 事件根本应用

== 事件的指令语法 v -on:click（指令语法都是 v - 结尾）==

==vm 实例对象属性为 methods== 它是工夫处理函数的属性名

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

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

== 留神：==

• v-on:xxx xxx 为事件名这是 vue 的事件申明形式，== 能够简写为 @xxx==
• 咱们的这几个事件处理函数也会变成 vm 实例上的函数
• 这些函数也是属于 <u>vue 所治理的函数</u> 所以不要应用箭头函数
• 如果指令语法没有传参，处理函数又有 <u> 一个 </u> 形参，这个参数默认为 e 内置对象

7.2 事件修饰符

就是无需通过 e.~~ 来执行一些操作，间接能够在指令语法处应用，== 看以下案例留神这个事件修饰符是加在哪里得 ==

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

• ==prevent：阻止默认行为 ==

• ==stop：阻止冒泡 ==

• ==once：事件只触发一次 ==

• ==capture：应用捕捉模式 ==

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

  失常逻辑我点 div2 会依照冒泡执行 2 1

  加了 capture 之后

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

  很显著这个又会登程冒泡，然而我给父元素加了个.self 事件修饰符，意思就是只有 e.target 是本人的时候才会触发他那个点击事件，咱们晓得 e.target 谁触发就是谁，点击 div4 尽管触发两次，然而两次都是 div4 这个元素

• passive：

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

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

7.3 键盘事件

留神用在哪里，怎么个用法

• 非凡按键

  • tab：必须配合 keydown 应用，因为一按下就会切换，keyup 等你抬起按键时，曾经切走了，就无奈实现按这个键要实现的性能
  • 零碎润饰键如上图第三点，扩大：@keyup.ctrl.y = xxx 示意只能 ctrl + y 才触发
• 如果想要用的按键在定义之外，能够先通过 e.key 去查看这个键叫什么名字，个别就是叫键盘上的名字有些不一样，如 ctrl=control，失去名字后 == 如果是两个单词及以上也就是驼峰命名的（CapsLock）==，须要将大写转为小写，同时单词之间用 - 宰割，如：caps-lock 即可正确应用该键

8. 计算属性

姓名案例：

输出姓，输出名，展现进去并且是动静展现。

• 插值语法实现：

• methods 办法实现

  咱们的 vue 语法是能够为一个函数的，而且只有是函数都要写在 methods 外面

  这办法实现关键点在于，首先咱们事件处理函数的确能够省略括号，然而 vue 语法外面不可省略，而后要晓得咱们的 data 是在 vm 实例外面的，而咱们的 vue 治理的函数 this 又是 vm 实例，所以就能够拿了

• == 计算属性 ==

  将 == 曾经写好的属性 == 去加工计算造成全新的属性，须要写在 ==computed== 属性外面

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

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

  <u>get 什么时候调用？</u>

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

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

  所以他跟下面的 methods 最实质的区别就是他有缓存机制，屡次应用这个值只有依赖数据没发生变化那么只会调用一次，而 methods 外面的函数办法，用一次调一次

  <u>同时这里要留神一下不要把它看的太简单了，就是一个属性而已，vue 语法调用的时候也是失常依照属性来调用，外面的函数只是对这个属性润饰，能够了解为模板引擎外面的 fileterName</u>

  <u>setter</u>

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

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

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

9. 监督属性

监督是用来监测属性（个别属性、计算属性）是否发生变化

天气案例

首先 == 如果事件的代码很简略一句话能够间接指令语法处 ==

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

• 监督办法二：通过 vm 实例外面的提供的办法 ==$watch==

  == 留神对象外面的属性名其本质是字符串所以这里须要传字符串 ==

• 深度监督

  Vue 的 watch 默认不检测对象外面的值，须要配置 ==deep== 在 watch 外面才可检测到对象是否扭转

• == 监督简写 ==

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

  办法二同样能够简写，前提条件是一样的

  == 总结：目前 vue 所治理的函数（不能写箭头函数）===> methods 外面的、计算属性外面的 getter、setter（包含简写模式）、监督属性 handler 包含简写