（一）初始vue

data属性

• data属性是传入一个函数，并且该函数需要返回一个对象：
  • 在Vue2的时候，也可以传入一个对象
  • 在Vue3的时候，必须传入一个函数，否则报错
• data中返回的对象会被vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：
  • 所有我们在template或者app通过{{counter}}，访问counter，可以从对象中获取到数据；
  • 所以我们修改counter的值时，app中的{{counter}}也会发生改变；

methods属性

• methods属性是一个对象，通常我们会在这个对象中定义很多的方法：
  • 这些个方法可以绑定到模板中；
  • 该方法中，我们可以使用this关键字来直接访问到data中返回对象的属性；
• 在methods中要使用data返回对象的数据：
  • 那么这个this是必须有值的，并且应该可以通过this获取到data返回对象中的数据
• this能不能是window
  • this不能是window，因为window中我们无法获取到data返回对象中的数据；
  • 如果使用箭头函数，这个this就是window了；

mustache双大括号语法（大胡子语法/插值语法）

• 如果把数据显示到模板中，使用最多的语法是nustache语法（双大括号）的文本插值
  • 并且我们前端提到过，data返回的对象是有添加到vue的响应式系统中；
  • 当data中的数据发生改变时，对应的内容也会发生更新。
  • mustache中不仅仅可以是data中的属性，也可以是一个javascript的表达式
  • {{}}中可以写表达式：三元运算符，函数调用，if语句等；
  • {{}}不可以写入赋值语句，因为赋值语句不是表达式，会报错

指令（了解）

 

• v-once

 

• • 这个指定元素或者组件只渲染一次
  • 当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过。
  • 该指令用于性能优化；
  • 父级有这个指令，子元素也只会渲染一次

 

• v-text

 

• • 用于更新元素的textContent

 

• v-html

 

• • 默认情况下，如果我们展示的内容本身是html的，那么vue并不会对其内容进行特殊解析。
  • 如果我们希望这个内容被vue可以解析出来，那么可以使用-V-html来展示。

• v-pre

  • v-pre用于跳过元素和它的子元素的编译过程，显示原始的mustache标签。
  • 跳过不需要编译的节点，加快编译的速度

• v-cloak

  • 这个指令保持在元素上直到关联组件实例结束编译。
  • 和css规则如【v-cloak】{display:none}一起用时，这个指令可以隐藏未编译的mustache标签直到组件实例准备完毕。

v-bind属性指令（掌握）

• v-bind的属性绑定

  • 前面的一系列指令，主要是将值插入到模板内容中。
  • 但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。
  • 如a的href属性，img的src属性
  • 语法糖（简写）： 

• 绑定class介绍

  • 在开发中，有时候我们的元素class也是动态的；
  • 绑定class有两种方式：对象语法，数组语法

• 绑定class-对象语法

  • 对象语法：：class(v-bind:class的简写)一个对象，以动态地切换class
  • 对象中有key:value,key是样式名字；value是布尔值，也可以是变量，变量值是布尔
  • 动态绑定的class是可以和普通的class并列使用的

• 绑定style介绍

  • 我们可以利用v-bind:style来绑定一些css内联元素
  • 因为某些样式我们需要根据数据动态来决定；
  • 比如某段文字的颜色，大小等等；
  • css的名字可以用驼峰式或者短横线分隔（要用引号括起来）来命名
  • 绑定style的两种语法：对象，数组

• 　动态绑定属性

  • 在一些情况下，我们的属性名可能也不是固定的
  • 如果属性名不是固定的，我们可以使用   :[属性名]=“值”的格式来定义；
  • 这种绑定方式，我们称之为动态绑定属性；

• 　绑定对象

  • 如果我们希望将一个对象的所有属性，绑定到元素上的所有属性，可以直接使用v-bind绑定一个对象；

v-on指令的基本使用

• 我们可以使用v-on来监听时间点击;

  • v-on：click可以写成@click,@是它的语法糖写法;
  • 当然，我们也可以绑定其他事件
  • 如果我们希望一个元素绑定多个事件，这个时候可以传入一个对象
  • v-on={key(事件名称：value(绑定函数))}

• 当使用mothods中定义方法，以供@click调用时，需要注意参数问题：

  • 如果该方法不需要额外参数，那么方法后的（）可以不添加。
  • 但是注意：如果方法本身有一个参数（本身是指函数体，不是函数调用），那么会默认将原生事件event参数传递进去。
  • 如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件（调用函数时，传入的实参）

 条件渲染

•  在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。

• vue提供了下面的指令来进行条件判断：
  • v-if
  • v-else
  • v-else-if
  • v-show

• v-if,v-else-if,v-else,根据条件来渲染某一块的内容

  • 这些内容只有在条件为true时，才会被渲染出来；
  • 这三个指令与javascript的条件语句if,else,else 类似

• v-show

  • v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件
  • v-show和v-if的区别
    • v-show是不支持template的
    • v-show不可以和v-else一起使用　　
  • 本质区别
    • v-show元素无论是否需要显示到浏览器上，它的DOM实际都是存在的，只是通过css的disolay属性来进行切换；
    • v-if当条件为false时，对其应的元素压根不会被渲染到DOM中；
  • 开发中如何让进行选择
    • 如果我们的元素需要显示和隐藏之间频繁的切换，那么使用v-show;
    • 如果不会频繁的发生切换，那么使用v-if;

 template元素

• 因为v-if是一个指令所以必须将其添加到一个元素上：

  • 但是如果我们希望切换的是多个元素，此时我们就会用div,但是div过多会影响浏览器性能。
  • 当为了添加指令包含子元素，而添加指令元素时，我们可以使用template，template不需要渲染

• template元素可以当作不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来

  • 有点类似于小程序中的block

 v-for

• v-for写在哪个元素身上，那个元素就会出现多个。

• 列表渲染

  • 在真实开发中，我们往往会从服务器拿到一组数据，并且需要对其进行渲染
  • 这个时候需要使用v-for来完成
  • v-for类似于javascript的for循环，可以用于遍历一组数据；

• v-for基本使用

  • v-for的基本格式是“item in 数组”：
  • 数组通常是来自data或者prop,也可以是其他方式；
  • item是我们给每项元素起的一个别名，这个别名可以自定来定义；

• 在遍历一个数组的时候，需要拿到数组的索引：

  • 如果我们需要索引，可以使用格式：（item，index）in 数组；
  • 数组元素项item是在前面的，索引项index是在后面的；

• 　v-for支持的类型

  • 一个参数：“value in object”;
  • 两个参数：“（value,key）in object”
  • 三个参数：“（value,key,index）in object”

• 　v-for同时也支持数字的遍历：

  • 每一个item都是一个数字；
  • v-for=10,则结果是1，2，3，4，5，。。。。10；
  • v-f也可以遍历其他可迭代对象（iterable）

v-for中key是什么作用 

• 在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性

• key要求是“唯一”：id

  • 　　在vue中，相同父元素的子元素节点并不会重新渲染整个列表
  • 　　因为对于列表中a,b,c,d都是没有变化的；
  • 　　在操作真实DOM的时候，我们只需要在中间插入一个元素即可；
  • 　　Vue事实上会对key和没有key会调用两个不同的方法
  • 　　有key，那么就使用patchkeyedChildren方法
  • 　　没有key，那么就会使用patchunkeyedChildren方法；

v-model双向绑定指令

• 表单提交是开发中比较常见的功能，也是和用户交互的重要手段

  • 如登录，注册，检索，创建，更新信息时，需要提交一些数据；
  • 上面这些都要求代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成；
  • v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；
  • 他会根据控件类型自动选取正确的方法来更新元素；
  • v-model是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；

• v-model原理

  • v-bind绑定value属性的值；
  • v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定属性中；

• checkbox单选框：绑定到属性中v-model的值是boolean(布尔值)

  • 此时的input的value属性不会影响v-model的值。

• 多个复选框

  • 当多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
  • 当选中某一个时，就会将input的value添加到数组中。
  • 多个复选框时，必须有value，并且见名知意。

• v-model绑定radio和多个复选框一样，显示value,多个radio同时有v-model可以不用写name

• v-model绑定select要写在select上面而不是选项上面，但是选项上面需要都有value

• v-model的值绑定：因为数据来自服务器，那么我们就可以先将值请求下来，绑定到data返回的对象中，再通过v-bind来进行值绑定，这个过程就是值绑定；

• v-mode修饰符-lazy

  • lazy修饰符作用：默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步；
  • 如果我们在v-model后面跟上lazy修饰符，那么会将绑定的事件切换为change事件，只有在提交时（比如回车）才会触发；

• v-model修饰符number;

  • input一般是string类型，我们如果希望是数字类型则可以使用number修饰符
  • 或者设置type为number也可以
  • 如果进行逻辑判断时，如果是一个string类型时，在转化的情况下会进行隐式转换的。

• v-model修饰符trim

  • 去除首尾空格

认识VNode

• vnode概念

  • Vnode的全称是Virtual Node,也就是虚拟节点；
  • 无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode;
  • VNode的本质是一个javascript对象
  • 过程：template -> vnode -> 真实dom

虚拟DOM

• 如果我们不只是一个简单的div,而且有一大堆的元素，那么它们应该会形成一个VNode Tree

• 虚拟dom作用：跨平台

数组更新检测

• vue将被监听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。

• 这些被包裹过的方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

• 不修改原数组的方法不能监听

 computed

• 在模板中可以直接通过插值语法显示data中的数据，它的值是一个对象。
• 但是在某些情况，我们可能需要对数据进行一些转换后再显示，或者需要将多个数据结合起来进行显示；
  • 如需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示；
  • 在模板中使用表达式，可以非常方便的的实现，但是设计的初衷是用于简单的运算；
  • 在模板中放入太多的逻辑会让模板过重和难以维护；
  • 并且如果多个地方都使用到，那么会有大量重复的代码；
• 将逻辑抽离出去方法一：
  • 将逻辑抽取到一个method中，放到methods的options中；
  • 弊端：就是所有的data使用过程中都会变成一个方法的调用；
• 将逻辑抽离出去方法二：
  
  • 计算机属性computed
• 认识计算机属性computed
  • 只要data里面的属性经过计算放入模板中的，都需要使用computed属性；
  • computed属性看起来像是一个函数，但是我们在使用的时候不需要加（）
  • 计算属性是有缓存的
• 计算属性和methods的差异
  • computed属性会基于它们的依赖关系进行缓存；
  • 在数据不发生变化时，计算属性是不需要重新计算的；
  • 但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算

认识侦听器watch

• 什么是侦听器？
  • 开发中我们在data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中；
  • 当数据变化时，template会自动进行更新来显示最新的数据；
  • 但是在某些情况下，我们希望在代码逻辑中监听某个数据的变化，这个时候就需要用侦听器watch来完成了；
  • 它的值是一个对象，对象里面的方法，监听data中那个数据，就用哪个key的名字作为方法的名字
• 默认有两个参数：newValue/oldValue
  • newValue是监听发生改变后的值，
  • oldValue是监听发生改变前的值
• 如果是对象类型，那么拿到的是代理对象，proxy
• 如果不想使用使用代理对象，则使用vue.toRow方法拿到原来的对象

vue.toRaw

• vue的方法，可以将proxy对象变成原来的对象