Vue.js知识点整理Vue.js是一个渐进式、基于MVVM设计模式的纯前端JavaScript框架。它可以与其他技术混

Vue.js是一个渐进式、基于MVVM设计模式的纯前端JavaScript框架。它可以与其他技术混用，适用于以数据操作为主的项目，无需依赖后端技术。下面是关于Vue.js的一些重要知识点整理：

原生DOM：浏览器/平台已实现的函数，可以直接使用，但代码繁琐。
jQuery函数库：基于原生DOM进一步封装的函数集合，简化了DOM操作步骤，但仍包含大量重复劳动。
框架（framework）：前人总结多次成功项目的经验形成的半成品项目。框架可以极大地简化项目整体代码和做事的步骤，只需添加个性化功能即可。但需要改变原有的做事方法，可能难以接受。
Vue.js特点： - 渐进式：提供了多个组成部分，不强迫全部使用，可与其他技术混用。 - 纯前端：只依赖浏览器执行，无需后端技术，可以独立学习和使用。 - 基于MVVM设计模式：通过双向绑定将视图（View）和数据模型（Model）连接起来，实现数据的自动更新。
安装： - 兼容性：不支持IE8及以下版本。 - 下载方式：可以直接下载并使用script标签引入vue.js文件，也可以使用Vue-CLI脚手架工具。
Vue做事的步骤： - 定义界面：界面元素包含在一个统一的父元素下，使用绑定语法（如{{变量名}}、:、v-show）代替可能发生变化的地方。 - 定义数据对象：包含页面上可能变化的位置所需的变量和初始值。 - 创建Vue实例对象：使用new Vue()创建Vue实例，并指定要监视的父元素（el）和数据对象（data）。
绑定数据：将数据对象和界面绑定起来，使得数据变化时页面自动更新。 - 定义方法：如果界面上需要事件处理函数，可以在methods属性中定义。以上是对Vue.js的简要介绍和使用方法的概述。你可以继续深入学习Vue.js的各个方面，如组件、指令、生命周期钩子等，以更好地应用和理解Vue.js框架。

Vue.js知识点整理.png

原生DOM vs jQuery函数库 vs Vue框架

原生DOM

浏览器/平台已实现的，咱们可直接使用的现成的函数
问题：代码繁琐

jQuery函数库

基于原生DOM基础上，进一步封装的，更简化的一组函数的集合
优点
- 对每一步原生DOM操作都进行了简化
缺点
- 但是，步骤并没有简化，依然包含大量重复劳动

框架（framework）

前人将多次成功项目的经验总结起来，形成的半成品项目
优: 项目整体代码和做事的步骤极简化，不再需要大量重复手工劳动，只需要添加个性化的功能即可
缺: 需要改变原有的做事方法，习惯上难以接受

概述

中文官网：cn.vuejs.org/

Vue.js: 一个渐进式(Progressive)的，基于MVVM设计模式的纯前端JavaScript 框架

渐进式: 虽然提供了很多的组成部分，但不强迫必须全部使用，可轻松与其他技术混用。
纯前端
- 单靠浏览器就可以执行，不需要nodejs等后端技术，也可学好和用好vue框架

适用于以数据操作为主的项目(WEB、APP)。以数据增删改查操作为主，多数应用都是以数据操作为主的。

安装

兼容性: 不支持IE8及以下版本
当前单独下载的js文件版本: 2.6
脚手架版本: 3.0

如何使用: 两种方法：

1. 直接下载，并使用script引入vue.js文件——前3天
- 在全局创建一个种新的类型Vue: 构造函数和原型对象
- 2个版本: 开发版强调：有错误提示！生产版强调: 没有错误提示！
1. 使用Vue-CLI脚手架工具——后2天

Vue做事的步骤

1. 定义界面

整个界面只能包含在一个统一的父元素下
界面中所有可能发生变化的地方,都要用绑定语法代替
- {{变量名}}, : , v-show , ...
如果元素需要绑定事件
- 就要用@事件名="函数调用语句"

2. 定义一个数据对象,来包含页面上所有可能变化的位置所需的变量和初始值

var data={ 变量名: 初始值, ... : ... , ...}

3. 创建Vue类型的实例对象

new Vue({ el:"#app", //找到要监事的父元素 data:data, //将数据对象引入到new Vue中 //到此,就将内存中的数据变量和界面绑定起来 //绑定的结果: 只要new Vue中data中的变量被改变,页面自动变化. methods:{ //如果界面上需要事件处理函数,就需要定义在new Vue的methods属性中集中保存 doit(i){ this.n+=i; this.n<0&&(this.n=0) } } })

MVVM框架

旧的网页组成：3部分

HTML：提供网页的内容
CSS：为内容提供样式
JS：为内容提供行为/数据
问题: HTML和CSS功能太弱，不包含程序必要的要素(变量，分支，循环)，生活不能自理。所有改变都需要js来实现。代码繁琐，重复代码量大

重新划分

View：界面，指网页中的元素和样式，一般指HTML+CSS
- 但是，HTML是增强版的HTML，支持变量，js表达式，分支和循环等程序要素。无需编写js，就可以在html上执行部分程序的操作。所以，可简化js程序的编写,避免大量重复编码
Model：模型，指程序中创建的或从服务端获取的数据，一般用JS中的一个对象来保存。数据内容会显示到界面View中。
- 页面中有几处变化, 需要几个变量,模型对象中就要对应着定义几个变量来支持页面
ViewModel：视图模型，替代之前手写的DOM/JQUERY操作，把模型中的数据和界面中的HTML元素“绑定”在一起:
- 什么是绑定: 不需要写一行代码，就可让页面元素内容和js程序中的数据联动变化
- new Vue()创建的就是这样一种强大的ViewModel对象，可自动同步数据和页面元素

ViewModel绑定原理：

1. 响应系统(Reactivity System):
- new Vue()将data{}对象引入new Vue()中并打散data{}对象，使data{}对象中每个属性都变为单独的属性，并直接隶属于new Vue()对象下。
- 然后new Vue()给data中每个属性添加访问器属性（请保镖），今后，操作data中的属性，其实自动都是通过操作访问器属性实现的
- 最后，new Vue()给data中每个属性请的保镖中set()函数内，都有通知机制。只要试图修改data中属性的值，都会自动调用属性的set()函数，并自动发出通知。告知vue对象，哪个变量发生了变化
1. 虚拟DOM (Virtaul DOM):
- 什么是
  - 只保存可能变化的节点的简化版DOM树
  - new Vue()时，vue对象通过扫描真实DOM树，只将可能变化的元素，保存到虚拟DOM树上。
- 当收到变量改变的通知时
  - vue会快速遍历虚拟DOM树，找到受影响的元素，调用已经封装好的DOM函数，只更新页面中受影响的元素。不受影响的元素，不会改变
- 为什么:
  - 1. 小，仅保存可能变化的元素
  - 1. 快，遍历快，查找快
  - 1. 自动，已经封装了DOM操作，自动修改页面。避免了大量重复的DOM操作

绑定

只要元素的内容可能变化，就用{{ }}语法绑定

{{ }}：双括号语法，也叫大胡子语法（Mustache）, 官方名字: Interpolation 补缺，插值的意思
如何: {{表达式}}其中的表达式可以是：
- 同es6模板字符串一样，只要有返回值的变量或js表达式，都可放在{{}}内
- 不能放程序结构(if/for等)
问题: 只能绑定元素的内容,无法绑定元素的属性值

指令(directive)

什么是: Vue.js提供的，专门增强html功能的特殊HTML属性
为什么: html本身是静态的，写死的，没有任何动态生成内容的能力
包括
- 只要元素的属性值可能发生变化: v-bind
  - 如何: <any v-bind:属性=”数据变量”
  - 强调: 不用写{{}}
  - 简写: v-bind可省略, 仅: :属性=”数据变量”
- 控制一个元素显示隐藏: v-show
  - 如何: <元素 v-show="条件">
  - 原理：每次扫描时，如果条件为true，就保持当前元素原样显示。如果条件为false，则自动为当前元素加上display:none，隐藏该元素
  - vs v-if: 通过添加/删除元素来控制显示隐藏。
- 控制两个元素二选一显示: v-if v-else
  - 如何: <元素1 v-if="条件1"> <元素2 v-else>
    - 两个元素之间不能插入其它元素，必须紧挨着写。
    - 和js程序一样，v-else后不需要写任何条件
  - 原理: 每次扫描时判断条件的值，如果条件为true，就显示元素1，删除元素2；如果条件为false，就显示元素2，删除元素1
  - 强调: 不是用display:none隐藏，而是彻底删除不显示的元素
- 控制多个元素多选一显示: v-else-if
  - - 多个元素之间不能插入其它元素，必须紧挨着写。
  - 原理: 每次扫描时判断条件的值，哪个元素条件为true，就显示哪个元素，并删除其它元素；如果之前所有条件都不满足，就显示最后一个元素，删除之前所有元素
- 绑定事件都用: v-on 简化为 @
  - 如何
    - <元素 @事件名="处理函数(实参值,...)">
    - new Vue({ el:"#app", data: { ... }, methods:{ 处理函数(形参){ //this->当前new Vue()对象 //可用this.变量名方式访问data中的变量，因为methods中的方法，也是被打散后直接隶属于new Vue()的。其实和data中的变量打散后是平级的。都直接隶属于new Vue()对象 } } })
    - 其实,如果不传参,则@事件名="函数"后不需要加()
  - 传参
    - <元素 @事件名="处理函数(实参值,...)">
    - methods:{ 处理函数(形参值){ //this->当前new Vue()对象 //可用this.变量名方式访问data中的变量，因为methods中的方法，也是被打散后直接隶属于new Vue()的。其实和data中的变量打散后是平级的。都直接隶属于new Vue()对象 } }
  - 获得事件对象
    - 只获得事件对象，不需要传其它自定义参数时
      - <元素 @事件名="处理函数">
        
        一定不要加()，因为加()是调用函数且不传参数的意思
        
        不加()是绑定事件处理函数的意思
      - 只有不加()时，vue才会像DOM一样自动将事件对象以处理函数第一个参数方式，传入处理函数
      - methods:{ event ↓ 处理函数(e){ e自动获得事件对象。获得的事件对象，和DOM中的事件对象完全一样 } }
    - 既需要获得事件对象，又需要传入自定义参数
      - <元素 @事件名="处理函数($event, 其它实参值,...)">
        
        因为加了()，就无法自动传入事件对象了
        
        所以，必须手动传入事件对象和其它实参值
        
        $event是vue将DOM中事件对象重新封装过的一个代表事件对象的关键词
        
        vue中所有$开头的关键词，都不能改名
      - methods:{ $event 其它实参 ↓ ↓ 处理函数(e, 其它形参,....){ e自动获得事件对象。获得的事件对象，和DOM中的事件对象完全一样 } }
- 只要根据数组反复生成多个相同结构的元素时: v-for
  - 如何:
    - of可改为in，但是in和of效果是一样的。只是为了满足不同人的习惯而已
  - 强调: v-for要写在要重复生成的元素上，而不是父元素上。
  - 原理
    - of可自动遍历数组/对象，并取出数组/对象中每个元素的值(value)和下标(i)保存到左边的变量中
    - v-for，每遍历数组或对象中一个成员，就会创建一个当前HTML元素的副本。
    - v-for里of前写的变量，在当前元素内部可用于绑定语法。v-for反复生成元素过程中，就会将绑定语法中的变量替换为变量值，固定在元素上
  - :key="i"
    - 不加:key="i"
      - 反复生成的元素是无差别的，如果将来数组或对象中某一个成员值发生了改变，就无法精确找到并区分要更改的是哪一个元素，只能将这组元素全部重新生成一遍——效率低
    - 加:key="i"
      - 等于对每个元素加上一个不重复的标识i
      - 如果将来数组或对象中某一个成员值发生了改变，即可根据key属性的值精确找到要更改的一个HTML元素，只更改受影响的一个HTML元素即可，不用将这组HTML元素全部重新生成一遍——效率高
  - 坑
    - 当数组中保存的是原始类型的值时
      - 在程序中修改数组中某个元素值时,不能使用[下标]方式访问
      - 因为此时下标方式是不受监控的
      - 结果: 即使修改成功,也不会自动更新
      - 应该用.splice(i,1,"新值") 代替
        
        删除现在i位置的值,替换为一个新值
        
        所有数组函数,都是受监控的
        
        结果: 只要一修改, 界面上自动变化
    - 但是，如果数组中保存的是引用类型的对象，则可以用[下标]修改
  - v-for还会数数
    - <元素 v-for="i of 整数">
    - 结果: of会从1开始，循环到这个整数，循环了几次，就将当前HTML元素重复创建几次。of前的i会依次获得 1 2 3 4 5 可用于绑定在元素的内容中。比如分页按钮
- 要绑定的内容是HTML片段时: v-html
  - 问题:
    - 因为{{}}绑定html片段内容时，会保持html片段原样显示，而不是翻译为页面元素。所以{{}}不能用于绑定HTML片段内容
  - 解决
    - v-html绑定html片段时，会将HTML片段交给浏览器去解析为页面元素
- 避免用户短暂看到{{}}
  - v-cloak：(哈利波特的隐身斗篷) 强调: 不是clock!!!
    - 问题: 首次记载页面时，如果加载稍微延迟，用户就可能看到{{}}语法！
    - 什么是v-cloak: 让当前元素默认隐藏，直至内容准备就绪，才自动显示出来
    - 如何: 2步: 必须配合css使用
      - <要隐藏的元素 v-cloak>
        
        强调: VUE官方本身，没有提供v-cloak的隐藏样式，所以，必须我们自己写。
      - 在CSS中必须添加: [v-cloak] { display: none; }
        
        用属性选择器找到所有带有v-cloak的元素，让其暂时隐藏
      - 当new Vue()加载完成，就会找到页面中所有v-cloak属性，并移除他们。这样，暂时隐藏的元素，就都显示出来了。
      - VUE只负责自动移除v-cloak属性，所以v-cloak不能改名
  - v-text：使用模型数据替换当前元素的innerText
    - <元素 v-text="变量或js表达式"></元素>
    - 将原本用{{}}绑定的内容，放在指令中绑定。效果是一样的
    - 但是，因为指令属于属性，即使暂时没有加载完，用户也不会看到属性部分的内容。所以，起到了避免用户看到双花括号的作用
- 仅在页面加载时，绑定一次。之后变量修改，也不更新页面: v-once
  - 底层原理：只在首次加载时，一次性将模型数据显示在当前元素。不会将当前元素加入到虚拟DOM树中
  - 优化: 减少被监视的元素个数，可以优化页面绑定的效率。
- v-pre：保留当前元素中的{{}}语法，不进行绑定渲染
  - 何时: 如果元素内容中，有{{}}原文，但不想作为绑定语法解析时，可用v-pre，保留{{}}为原文，不再编译。

双向绑定(重点)

什么是:

既可把程序中Model数据绑定到表单元素中显示；——第一个方向: M => V
同时, 又可把表单元素中修改的新值，绑定回程序中Model数据变量上保存。——第二个方向: V => M

为什么:

{{}}和v-bind仅是单向绑定。只能将Model数据的值，绑定到页面的表单元素上，用于显示(M => V)
而页面上的更改，无法对应修改到Model数据中(V =X> M)

何时:

今后，只要希望修改表单元素的值后，也能自动修改对应模型数据的值，则用v-model指令进行绑定

如何:

绑定文本框和文本域
- 结果: 文本框内容一更新，立刻将新值自动更新回程序中的变量里
- 原理:
  - v-model:value会被自动翻译为oninput="function(){...}"事件绑定代码，并在事件处理函数中封装修改data中变量的代码
  - 只要文本框内容被修改，就触发DOM的oninput事件，自动执行修改data中变量的代码
绑定select元素
- 特殊
  - 用不是直接修改select元素的文本,而是通过选择option来改变select的value
- 未付款已付款已发货已签收 - 结果: select的选中项的值改变,就会立刻将新选中的option的value值更新回内存中的程序里 - 原理
```
  - 单向绑定时

  	- 将Model中的变量值赋值给select的value属性.然后, select元素会拿获得value属性值去和每个option的value值做比较.哪个option的value等于select的value,就选中哪个option

  - 修改时

  	- <select v-model:value="xxx",会被自动翻译为: <select onchange=" vue对象.变量=当前select元素的value属性值 "
```
- 绑定radio元素
  - 特殊
    - 备选项的value都是固定不变的, 所以肯定绑定的不是value属性
    - 选中与不选中radio改变的其实是它的checked属性
  - 男女
  - 原理:
    - 单向绑定时
      - v-model会拿checked属性绑定的变量值和当前radio的value属性进行比较. 如果绑定的变量的值等于当前radio的value,就选中该radio.否则,如果绑定的变量值,不等于当前radio的value,就不选中该radio
- 绑定checkbox元素单用
  - 特殊
    - 不需要和value做比较,直接用checked属性绑定到一个bool值变量即可
  - 同意
  - 原理:
    - 单向绑定时
      - 绑定的变量值返回true,就选中,返回false,就不选中
    - 修改时
      - 直接将checkbox当前的选中状态checked属性值更新回魔心变量上
- 可简写为: 只写v-model=”模型变量”，省略:value
  - v-model其实会自动根据当前所在的不同表单元素,切换不同的属性绑定
监视函数:
- 什么是: 在模型数据发生变化时，自动执行的函数
- 何时: 只要希望在模型数据变化时，立刻执行一项操作时，需要监视函数监控模型变量
- 如何:
  - new Vue({ el: “xxx”, data: { … }, watch:{ 模型变量名(){ this.模型变量名 … } } })
    - 监事函数的函数名,必需是要监事的变量名
绑定class和style属性:

绑定内联样式
- 方式1：把style属性作为普通字符串属性进行绑定
  - <元素 :style="变量">
  - data:{ 变量: "left:100px; top:50px" }
  - 结果
    - <元素 style="left:100px; top:50px">
  - 问题
    - 如果希望仅修改其中一个css属性值,就很不方便
- 方式2：用对象绑定style
  - <元素 :style="变量"
  - data:{ 变量: { left:"100px", top:"50px" } }
  - 结果
    - Vue绑定语法会将对象翻译为style属性规定的字符串格式
    - <元素 style="left:100px; top:50px">
  - 简写:
    - <元素 :style="{ left: 变量1, top: 变量2 }"
    - data:{ 变量1:"100px", 变量2:"50px" }
    - <元素 style="left:100px; top:50px">
  - 有些内联样式不变,而有些变化
    - <元素 style="不变的css样式" :style="变量"
    - 结果:
      - vue会先绑定:style,翻译为字符窜,然后再和不带:的style拼接为一个style
    - 所以,今后不需要动态绑定的css内联样式属性,就可放在不带:的style中. 只有那些需要动态改变的css属性,才放在带: 的style中
绑定class属性
- 方式1：把class属性作为普通字符串属性进行绑定
  - <元素 :class="变量">
  - data:{ 变量: "class1 class2 ..." }
  - 结果
    - <元素 class="class1 class2 ...">
  - 问题
    - 如果希望仅修改其中一个class,就很不方便
- 方式2：用对象绑定class
  - <元素 :class="变量"
  - data:{ 变量: { class1:true或false, class2:true或false } }
  - 结果
    - Vue绑定语法会将对象翻译为class字符串,但是只有那些值为true的class,才会存在于最后的class中.值为false的class,表示不启用
  - 简写:
    - <元素 :class="{ class1: 条件1, class2: 条件2 }"
  - 有些class不变,而有些变化
    - <元素 class="不变的class" :class="变量"
    - 结果:
      - vue会先绑定:class,翻译为字符窜,然后再和不带:的class拼接为一个class作用在元素上
    - 所以,今后不需要动态绑定的class,就可放在不带:的class中. 只有那些需要动态改变的class,才放在带: 的class中
自定义指令

Vue.js中，除了预定义的13个指令外，还允许用户自定义扩展指令。

创建自定义指令
- Vue.directive('指令名', { inserted( el ){ //当元素被加载到DOM树时触发 //el 可自动获得当前写有指令的这个DOM元素对象 //函数中，可对这个写有指令的DOM元素执行原生的DOM操作 } })
- 强调:
  - 因为指令不是只给一个页面或一个功能添加的,应该是所有Vue的对象都可使用.所以,应该是数组Vue大家庭的.所以创建时,要用Vue.directive()来创建
  - ‘指令名’不用加v-前缀! 只有在html中使用时，才加v-前缀
使用自定义指令
- <元素 v-指令名>
- 强调: 使用指令时必须前边加v-
计算属性:

什么是: 不实际存储属性值，而是根据其它数据属性的值，动态计算获得。

为什么: 有些属性的值，不能直接获得，需要经过其它属性的值的计算后，才能获得

何时: 今后，只要一个属性的值，依赖于其它数据属性的值，动态计算获得, 就要用计算属性。

如何实现计算属性：
- 定义时:
  - new Vue({ el: “xxx”, data: { … }, methods:{ … }, watch: { … }, computed: { 新属性名(){ return 用现有数据属性执行计算 } } })
- 绑定时: 和普通数据属性一样！{{计算属性}}
- 强调: 不加()! 虽然是方法，但是用法同普通属性完全一样。
methods vs watch vs computed

methods
- 保存自定义方法,
  - 要么作为事件绑定,在事件触发时才执行
  - 要么主动加()调用执行
- 问题
  - vue不会缓存methods中方法的执行结果,重复调用几次,就重复计算几次-效率低
computed
- 保存自定义计算属性
  - 不会自己手动调用
  - 都是通过在页面上使用绑定语法自动触发执行, 且不用加()
- 优点
  - vue会缓存computed属性的计算结果, 只要所依赖的其他变量值不变,则computed就不会重复计算.而是优先使用缓存中保存的值- 效率高
  - 只有所依赖的其他属性值发生变化,才自动重新计算计算属性的结果
watch
- 保存所有监视函数
  - 不需要自己调用,也不需要绑定.
  - 只要被监视的变量值改变,就自定触发
总结:
- 更侧重于获得计算结果时,优先使用computed
- 不关心计算结果,单纯执行一项操作时, 应该使用methods
- 只要希望变量值每次改变时,都自动执行一项操作，就用watch
过滤器(Filter)

什么是: 在接收原始数据后，执行再加工的一种特殊函数。

强调: vue官方没有提供任何预定义过滤器，只能自定义

何时: 有些数据，经常需要加工后再显示给用户时

如何
- 创建自定义过滤器
  - 创建自定义过滤器 Vue.filter('过滤器名', function(oldVal){ .... val 接收当前要处理的模型数据的原始值 return ...; })
- 使用自定义过滤器
  - 方法1： {{ 数据 | 过滤器名 }}
  - 方法2：
- 创建带参数过滤器
  - 定义带参数过滤器: Vue.filter('过滤器名', function(oldVal, 参数1, …){ .... val 接收当前要处理的模型数据的原始值 return ...; })
- 使用带参过滤器:
  - ```
   {{ 变量 | 过滤器名(参数值1,…) }}
```
强调: 过滤器可以像管道一样拦截起来，先后执行
- {{ 变量 | 过滤器1 | 过滤器2 | … }}
Axios

什么是:
- Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
何时:
- 只要在vue中发送ajax请求，都用axios
- 在浏览器中，创建xhr请求；在node.js中，创建普通http请求
为什么:
- 浏览器中创建xhr请求: 4种方案:
  - (1)使用原生XHR对象——麻烦
  - (2)使用jQuery的封装函数——大材小用(jQuery中岂止ajax，还包含大量DOM/动画等操作，而Vue只使用ajax，别的都不用。)
  - (3)使用官方提供的VueResource插件——官方废弃
  - (4)使用第三方工具Axios——本身与Vue没任何关系
    - Vue.js生态系统（Ecosystem）： Vue.js、Axios、Vue-Router、Vuex、MintUI、ElementUI、Weex....
如何:
- 1. 在HTML页面中引入JS文件
  - 在全局添加axios对象，包含发送http请求的api
- 1. 配置axios
  - 因为当前项目中所有axios请求使用的服务器端基础地址都是相同的，所以，为了避免重复写很多遍，也为了便于维护和修改服务器端基础地址，应该为axios，配置统一的baseURL
  - axios.defaults.baseURL="http://localhost:5050"
  - 将来使用axios函数时，只需要写基础路径之后的相对接口地址即可
  - 好处: 如果服务器端地址发生变化，只需要改一次即可
- 1. 调用axios，发起异步请求
  - Get请求:
    - axios.get(“url”,{ params: { //get方式下, 随url发送的参数 } }).then(res=>{ ... res.data … })
  - Post请求:
    - axios.post(“url”, “变量=值&变量=值&…”).then(res=>{ ... res.data … })
    - 坑！！！: get和post方法传参时，配置属性名不一样：
      - Get请求传参，用的是params: { } 对象 Post请求传参，必须用字符串！
    - 解决:
      - 引入qs模块
        
        专门负责将对象转为查询字符串语法
      - 使用
        
        axios.post(“url”, Qs.stringify({ 参数: 值, 参数: 值, ... })).then()
        
        结果:
        
        stringify会将对象转化为queryString语法
        
        "参数=值&参数=值&..."
  - 坑！！！：获得响应主体的数据: 数据不是直接返回，而是包裹在一个对象的data属性中返回。
    - 无论是get/post方式请求，获得的响应都是一个全新的对象。传统的响应数据，包含在该对象的res.data属性中
    - 所以，res.data，才能获得之前的响应结果
组件(Component)

什么是:
- 拥有专属的HTML，CSS，js和数据的，可重用的页面独立区域
- 在代码层面上，一个组件就是一个可反复使用的自定义标签。
- 一个页面由多个组件聚合而成一个大型的页面
vs jq插件 vs boot组件
- boot插件: 虽然可重用，但仍需要大量工作亲力亲为且，不能绑定数据，比如: 轮播图，如果图片变化，就得改HTML，无法根据数据库变化，自动动态变化。
为什么:
- 松散耦合，便于重用，便于大项目维护，便于协作开发
何时:
- 今后，所有页面，都是由多个组件组合而成。
  凡是重用的，必须先定义为组件，再使用
如何:
- (1)创建一个组件：
  - 根组件
  ...
new Vue({ el:"#app", data: { ... } })
```
- 全局组件

	- 子主题 2
	- Vue.component( '组件名' , {
```
template: HTML片段, data(){ return {....} }, methods:{ }, computed: { }, watch: { } } )
```
		- Vue.component('组件名', {  

			- //组件名推荐写法: xz-counter  用横线分割多个单词，不推荐使用驼峰命名。因为组件名其实就是今后的HTML标签名。HTML标签是不区分大小的。单靠大小写不能唯一标识组件名

		- template: `

			- 不用el，是因为组件并不是一开始就在界面上的，是无法查找到的
			- 组件每使用一次，就会创建一次HTML片段的副本。最初定义的这一次HTML片段就称为之后组件的模板
			- //强调: 组件模板中，必须只能有一个父级根元素

				- //如果不加唯一父元素，报错: Component template should contain exactly one root element.

		- /*data:{  count: 1  }*/

			- //报错: The "data" option should be a function that returns a per-instance value in component definitions.
			- 因为每个组件要求必须有一个专属的data对象副本，而不是多个组件公用一个data对象

		- data: function(){  
```
return { } }
```
			- 每使用一次组件，会自动调用data()函数，为本次组件副本创建一个data对象副本。来保证每个组件都有一个专属的data对象副本，互不影响
```
- (2)在视图中使用组件：
  - 组件其实就是一个可反复使用的HTML标签
  <组件名></组件名>
```
- 其实: var vm=new Vue({ 

	- //也是一个组件，而且是整个页面的根组件

- el:

	- //只有根组件，才能使用el属性来绑定根元素
	- //其它自定义子组件中，都必须使用template属性代替el:
	- //其余以下属性，子组件也可使用
```
原理
- 任何vue程序都是由new Vue()先开始扫描的
- new Vue()扫描过程中发现不认识的自定义标签，就会去Vue家里查找是否有对应的组件
- 如果该自定义标签在Vue家里找到对应的组件
  - 先用组件的template HTML片段代替当前自定义标签所在位置
  - 调用data()，为本次组件副本创建一个专属的data对象
组件化开发(重点&难点)

组件Component：是页面中的一块独立的，可重用的区域
- HTML中, 是一个可复用的用户自定义的扩展标签，运行时，被替换为组件对象内的HTML模板内容
- JS中，是一个可复用的Vue实例，包含独立的HTML模板，模型数据和功能
何时:
- 只要网页中一块独立的区域，都可划分为组件
如何:
- 拿到一个网页后，先划分区域。每个区域，包括其子区域，都可以做成一个独立的组件。
- 一个页面，都是由多块区域，多级组件组成的。
- 面向组件式的开发：
  - 把大网页划分为若干组件组成的区域。
  - 每个区域都有专属性数据、HTML元素、CSS样式。
自定义组件有两种：
- (1)全局组件：可以在页面中任何一部分使用的组件
  - Vue.component('comp-name', { template: ' ', //组件模板 data(){ return { } //专有的Model数据 }, props: ['属性1', '属性2', ...] //自定义属性(也是Model) })
- (2)子组件：只能用于特定的父组件内的组件
  - 2步
    - 1. 先定义子组件对象
      - var xzChild1={ template: '', data(){return {}} }
        
        子组件命名，强烈建议用驼峰命名
        
        //内容和Vue.component中的内容是一样的
    - 1. 将子组件对象添加到父组件中
      - Vue.component('父组件', { template: ' … … <子组件名/>… … ', //包含局部组件元素的父组件模板HTML components: { //专门用于包含子组件的定义 xzChild1, //vue会自动将驼峰翻译为-分割。 ... } })
组件间的通信/数据传递( 难点 )
- 2大类
  - 父子间
    - 2种:
      - 父->子
        
        props down
        
        2步
        
        先在父组件中给子组件的自定义属性绑定一个父组件的变量

Vue.js知识点整理

原生DOM vs jQuery函数库 vs Vue框架

原生DOM

jQuery函数库

框架（framework）

概述

中文官网：cn.vuejs.org/

Vue.js: 一个渐进式(Progressive)的，基于MVVM设计模式的纯前端JavaScript 框架

适用于以数据操作为主的项目(WEB、APP)。以数据增删改查操作为主，多数应用都是以数据操作为主的。

安装

如何使用: 两种方法：

Vue做事的步骤

1. 定义界面

2. 定义一个数据对象,来包含页面上所有可能变化的位置所需的变量和初始值

3. 创建Vue类型的实例对象

MVVM框架

旧的网页组成：3部分

重新划分

ViewModel绑定原理：

绑定

只要元素的内容可能变化，就用{{ }}语法绑定

指令(directive)

双向绑定(重点)

什么是:

为什么:

何时:

如何:

监视函数:

绑定class和style属性:

绑定内联样式

绑定class属性

自定义指令

Vue.js中，除了预定义的13个指令外，还允许用户自定义扩展指令。

创建自定义指令

使用自定义指令

计算属性:

什么是: 不实际存储属性值，而是根据其它数据属性的值，动态计算获得。

为什么: 有些属性的值，不能直接获得，需要经过其它属性的值的计算后，才能获得

何时: 今后，只要一个属性的值，依赖于其它数据属性的值，动态计算获得, 就要用计算属性。

如何实现计算属性：

methods vs watch vs computed

methods

computed

watch

总结:

过滤器(Filter)

什么是: 在接收原始数据后，执行再加工的一种特殊函数。

强调: vue官方没有提供任何预定义过滤器，只能自定义

何时: 有些数据，经常需要加工后再显示给用户时

如何

强调: 过滤器可以像管道一样拦截起来，先后执行

Axios

什么是:

何时:

为什么:

如何:

组件(Component)

什么是:

vs jq插件 vs boot组件

为什么:

何时:

如何:

原理

组件化开发(重点&难点)

组件Component：是页面中的一块独立的，可重用的区域

何时:

如何:

自定义组件有两种：

组件间的通信/数据传递( 难点 )