Vue总结

一、基础语法和指令

基本指令

• v-text：更新元素的 textContent

• v-html:更新元素的 innerHTML

• v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

  • 语法：v-bind:title=“msg”
  • 简写：:title=“msg”

• v-on为元素绑定事件 v-on:click=“方法”、@click=“方法”，

  传递自定义参数：v-on事件.修饰符（@keyup.enter=“方法”）

• v-show，v-if 根据表达式的真假切换元素的显示和隐藏

• v-show，v-if 区别： 实现本质⽅法不同

  v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；

  v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。

  如果要频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）。

• v-model 获取和设置表单元素的值（双向数据绑定，动态的）

  <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
  </div>
      
  <script>
  new Vue({
    el: '#app',
    data: {
      message: 'Runoob!'
    }
  })
  </script>
  

• v-once 不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。 (一次性插入，不再修改)

• 小黑记事本运用到了简单的vue指令

  思路：

  1. 新增：

     • 生成列表结构
     • 获取用户输入
     • 回车或点击发送新增数据

  2. 删除 点击删除指定内容（v-on splice索引）

     splice(index,len,[item])

     替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组）

     index:数组开始下标

     len: 替换/删除的长度

     item:替换的值，删除操作的话 item为空

  3. 统计（v-text length)

  4. 点击清除所有的信息（v-on)

  5. 没有数据时，隐藏元素（v-show v-if 数据非空）

二、全局的API

• API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

• 解释： 别人写好的代码，或者编译好的程序，提供给你使用，就叫做API。你使用了别人代码（或者程序）中的某个函数、类、对象，就叫做使用了某个API。

• 什么是全局API？

  全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。

• vue的全局API有哪些？

  1. Vue.directive自定义指令

     • 三个参数：

       • el: 指令所绑定的元素，可以用来直接操作DOM。
       • binding: 一个对象，包含指令的很多信息。
       • vnode: Vue编译生成的虚拟节点。

     • 自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind

       1. bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
       2. inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
       3. .update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
       4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
       5. unbind:只调用一次，指令与元素解绑时调用。

  2. vue.set

     • • 作用：Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。

       • 外部数据：不在Vue构造器里的data处声明，而是在构造器外部声明，然后在data处引用

       • 改变外部数据的三种方法：

         1. 用Vue.set改变

             function add(){   Vue.set(outData,'count',4);
             }
            

三、生命周期的理解

vue生命周期可以分为八个阶段，分别是：
beforeCreate（创建前） 在数据观测和初始化事件还未开始

created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

创建前（beforecreate）
在初始化之后，此时的数据和数据观察和事件机制都不由形成，所以不能操作

四、 axios

1.什么是Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Vue 官方推荐使用 Axios 来完成请求。

2. Axios的优点

1. 支持发送ajax异步
2. 支持在Node.js中发送 ajax 请求
3. 支持Promise
4. 支持拦截器请求和响应
5. 支持对请求和响应数据的转换

3.如何安装 Axios

1.使用 CDN 方式

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.使用 NPM 安装方式

$ npm install axios

3.在 Vue CLI 项目中使用

在 main.js 文件中导入 axios ，并绑定到 Vue 的原型链上

import axios from 'axios'
Vue.prototype.$axios = axios;

4. Axios支持的API

Axios所支持的请求方法本身只有两个：

1. axios(config)
2. axios( url [, config ])

这两个方法中的参数config表示配置项，用于传递相关参数来创建请求，其本身是一个对象。而这两个方法的区别是，第二个方法可以不用在配置文件中添加url属性。

除了上述两个方法，Axios 又根据上述两个方法进行封装了其他方法：

1. Axios.request(config)
2. Axios.get(url, config)
3. Axios.post(url, data, config)
4. Axios.delete(url, config)
5. Axios.head(url, config)
6. Aixos.put(url, data, config)
7. Axios.patch(url,data,config)

上述方法是通过不同的请求方式发送请求，在使用过程中，url，data和method都可以不用在配置项中添加。

配置项

以下就是创建请求时可以使用的配置选项。只有 url选项是必需的，其他选项按具体情况添加。如果没有指定 method选项，则请求将默认使用 get方法。

配置项有很多，我们现在对一些配置项进行分类筛选，找出经常使用的配置项：

1. url、method、params、baseURL、data、timeout、headers和withCredentials这几个选项是发送请求经常使用
2. transformRequest和transformResponse这俩个选项是用于设置修改请求或响应的信息
3. onDownloadProgress和onUploadProgress这俩个选项是用于设置下载或上传处理进度事件
4. responseType和responseEncoding这两个选项是用于设置服务器响应的数据类型和编码

响应结构

当通过 Axios 发送请求之后，服务器对请求进行处理成功，最后 Axios 得到响应信息，而响应的信息结果如下：

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

   // `config` 是为请求提供的配置信息
  config: {},
  
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

五. get，post，put，delete的区别

1. 一个URL地址，它用于描述一个网络上的资源，而HTTP中的PUT（增），DELETE（删），POST（改），GET(查)。

GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。

六、$router和$route

最近在学习vue的单页面应用开发时，需要用到路由传值，这就涉及到了两个对象$router和$route，自己当时也是分不清，后来自己结合网上的博客和自己本地的vue项目了解了他们的区别：

1.$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vue构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。

以history对象来举例：

$ router.push({path:‘home’})，本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录

$router.replace({path:‘home’})，//替换路由，没有历史记录

2.$route是一个跳转的路由对象，每一个路由都会有一个$route对象，是一个局部的对象，可以获取对应的name，path，params，query等

这两者不同的结构可以看出两者的区别，他们的一些属性是不同的。

$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews

$route.params 对象，含路有种的动态片段和全匹配片段的键值对，不会拼接到路由的url后面

$route.query 对象，包含路由中查询参数的键值对。会拼接到路由url后面

$route.router 路由规则所属的路由器

$route.matchd 数组，包含当前匹配的路径中所包含的所有片段所对象的配置参数对象

$route.name 当前路由的名字，如果没有使用具体路径，则名字为空