前端（六）JS框架篇

vue篇

1、Vue 的生命周期（钩子函数），调用每个钩子的时候做了什么

• 创建前/后：在beforeCreated 阶段， 实例的挂载元素 $el 和数据对象 data以及事件还未初始化。
• 在 created阶段，Vue实例的数据对象 data以及方法的运算有了，$el还没有。
• 载入前/后：在 beforeMount阶段，render 函数首次被调用，Vue实例的$el 和 data 都初始化了，但还是挂载在虚拟的 DOM节点上。
• 在mounted阶段，Vue 实例挂载到实际的 DOM操作完成，一般在该过程进行 Ajax 交互。 更新前/后：在数据更新之前调用，即发生在虚拟 DOM 重新渲染和打补丁之前，调用 beforeUpdate。
• 在虚拟DOM 重新渲染和打补丁之后，会触发 updated方法。
• 销毁前/后：在执行实例销毁之前调用 beforeDestory，此时实例仍然可以调用。
• 在执行 destroy方法后，对 data 的改变不会再触发周期函数，说明此时Vue 实例已经解除了事件监听以及和 DOM的绑定，但是 DOM 结构依然存在。

• 首先创建一个vue实例，Vue()；

• 在创建Vue实例的时候，执行了init()，在init过程中首先调用了beforeCreate。

• Created之前，对data内的数据进行了数据监听，并且初始化了Vue内部事件。具体如下：

• 完成了数据观测；

• 完成了属性和方法的运算；

• 完成了watch/event事件的回调；

• 但是此时还未挂载dom上，$el属性是不可见的；

• beforeMount之前，完成了模板的编译。把data对象里面的数据和vue的语法写的模板编译成了html，但是此时还没有将编译出来的html渲染到页面；

  • 1）、在实例内部有template属性的时候，直接用内部的，然后调用render函数去渲染。
  • 2）、在实例内部没有找到template，就调用外部的html（“el”option（选项））。实例内部的template属性比外部的优先级高。 render函数 > template属性 > 外部html；
  • 3）、要是前两者都不满足，那么就抛出错误。

• Mounted之前执行了render函数，将渲染出来的内容挂载到了DOM节点上。mounted是将html挂载到页面完成后触发的钩子函数；当mounted执行完毕，整个实例算是走完了流程；在整个实例过程中，mounted仅执行一次；

• beforeUpdate：数据发生变化时，会调用beforeUpdate，然后经历virtual DOM，最后updated更新完成；

• beforeDestory是实例销毁前钩子函数，销毁了所有观察者，子组件以及事件监听；

• destoryed实例销毁执行的钩子函数；

如果有子组件的话，那么调用顺序为：

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

1.2、什么是 Vue 生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载 DOM -> 渲染、更新 -> 渲染、销毁等一系列过程，称之为 Vue 的生命周期。

1.3、第一次页面加载会触发Vue 哪几个钩子？

会触发 4 个生命钩子：创建前/创建后、挂载前/挂载后
复制代码

1.4、DOM 渲染在哪个周期就已经完成？

在 beforeMounted时它执行了 render函数，对$el 和 data进行了初始化，但此时还是挂载到虚拟的DOM节点，然后它在 mounted时就完成了 DOM 渲染，这时候我们一般还进行 Ajax 交互。

2、Vue 的渲染过程

• vue模板的本质是字符串，利用各种正则，把模板中的属性去变成 js 中的变量，vif,vshow,vfor 等指令变成 js 中的逻辑
• 模板最终会被转换为 render 函数
• render 函数执行返回 vNode
• 使用 vNode 的 path 方法把 vNode 渲染成真实 DOM

3、Vue的整个实现流程

• 1）先把模板解析成 render 函数，把模板中的属性去变成 js 中的变量，vif,vshow,vfor等指令变成 js 中的逻辑
• 2）执行 render 函数，在初次渲染执行render函数的过程中 绑定属性监听，收集依赖，最终得到 vNode，利用 vNode的 Path方法，把 vNode 渲染成真实的 DOM
• 3）在属性更新后，重新执行 render 函数，不过这个时候就不需要绑定属性和收集依赖了，最终生成新的vNode
• 4）把新的 vNode和 旧的 vNode去做对比，找出真正需要更新的 DOM，渲染

4、Vue 的响应式原理

Vue 内部使用了 Object.defineProperty() 来实现数据响应式，通过这个函数可以监听到set 和 get 的事件。

1）首先利用 Object.defineProperty()给 data中的属性去设置 set, get 事件 递归的去把 data 中的每一个属性注册为被观察者

2）解析模板时，在属性的 get 事件中去收集观察者依赖

3）当属性的值发生改变时，在 set事件中去通知每一个观察者，做到全部更新

4、vue 特点：渐进式 框架 双向数据绑定

• 双向数据绑定：视图改变 数据自动更新；数据更新 视图自动改变
• 渐进式：vue vue-router路由 vuex axios
• 框架：自己写的代码被框架调用（库：自己调用库的代码）

5、vue组件如何传值

1）父传子

• 过程

  • （1）.通过v-bind绑定属性，把相应的数据传递给子组件
  • （2）.子组件通过props接收传进来的数据

2）子传父

本质上是父组件使用子组件的数据

• 通过自定义事件触发父组件中的方法
• 再由子组件方法的执行通过this.$emit('自定义事件名',this.qqq)传递子组件的数据

import Vue from 'vue'

const component = {
  props: ['value1'],
  template: `
    <div>
      <input type="text" @input="handleInput" :value="value1">
    </div>
  `,
  data () {
    return {
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  template: `
    <div>
      <comp-one :value1="value" @input="value = arguments[0]"></comp-one>
    </div>
  `,
  data () {
    return {
      value: '123'
    }
  }
})

复制代码

3）非父子组件间的数据传递

兄弟组件传值eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

4）假设在工作中，有三个 .vue 文件：A.vue、B.vue、C.vue。A.vue 是主页面，B.vue 和 C.vue 类似于头部导航条和底部导航栏。现在，B.vue 点击会切换路由，C.vue 需要获取 B.vue 传递的信息。

A.vue

<template>
  <div>
    <top-nav></top-nav>
    <div class="container">
      <router-view></router-view>
    </div>
    <bottom-nav></bottom-nav>
  </div>
</template>
复制代码

bus.js

import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue();

export default bus;
复制代码

B.vue

<template>
  <div class="bottom-nav">
    <div class="nav-one" @click="goToPage({path: '/HomeIndex', meta:'首页'})">
      <i class="icon-home"></i>
      <span>首页</span>
    </div>
  </div>
</template>

<script>
  import bus from '../utils/bus'
  export default {
    methods: {
      goToPage(route) {
        this.$router.push(route.path);
        bus.$emit('meta', route.meta);
      }
    }
  }
</script>
复制代码

C.vue

<template>
  <div class="top-nav">
    <span class="title">{{title}}</span>
  </div>
</template>

<script>
  import bus from '../utils/bus'
  export default {
    data() {
      return {
        title: ''
      }
    },
    created() {
      bus.$on('meta', msg=> {
        this.title = msg;
      })
    }
  }
</script>
复制代码

6、实现一个 EventEmitter 方法

EventEmitter 方法主要包含了 on,emit,once,off方法。

  class Event {
    constructor() {
          this.events = Object.create(null);
      }
      on(name, fn) {
        if (!this.events[name]) {
            this.events[name] = []
          }
          this.events[name].push(fn);
          return this;
      }
      emit(name, ...args) {
        if (!this.events[name]) {
            return this;
        }
        const fns = this.events[name]
        fns.forEach(fn => fn.call(this, ...args))
        return this;
      }
      off(name,fn) {
        if (!this.events[name]) {
            return this;
        }
          if (!fn) {
            this.events[name] = null
            return this
          }
          const index = this.events[name].indexOf(fn);
          this.events[name].splice(index, 1);
        return this;
      }
      once(name,fn) {
        const only = () => {
          fn.apply(this, arguments);
          this.off(name, only);
        };
        this.on(name, only);
        return this;
      }
  }

复制代码

7、vue的双向数据绑定

Vue 采用 数据劫持 结合 发布者-订阅者 模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter以及getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

• 第一步：需要 Observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。

• 第二步：Compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新数据。

• 第三步：Watcher 订阅者是Observer和 Compile 之间通信的桥梁，主要做的事情有：

  • 在自身实例化时往属性订阅器（dep）里面添加自己。
  • 自身必须有一个 update() 方法
  • 待属性变动 dep.notice()通知时，能调用自身的update()方法，并触发 Compile 中绑定的回调，则功成身退。

• 第四步：MVVM作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher搭起 Observer 和 Compile 之间的桥梁，达到数据变化 -> 视图更新；视图交互变化（input） -> 数据 model 变更的双向绑定效果。

8、key值的作用

使用 v-for更新已渲染的元素列表时,默认用就地复用策略。

列表数据修改的时候,他会根据key值去判断某个值是否修改：如果修改,则重新渲染这一项;否则复用之前的dom，仅修改value值。

9、vue2中的diff算法是怎样实现的？

当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。

diff流程

• patch函数接收两个参数oldVnode和Vnode分别代表新的节点和之前的旧节点

  • 判断两节点是否值得比较，值得比较则执行patchVnode；
  • 不值得比较则用Vnode替换oldVnode；

• patchVnode：当我们确定两个节点值得比较之后我们会对两个节点指定patchVnode方法；

  • 找到对应的真实dom，称为el；
  • 判断Vnode和oldVnode是否指向同一个对象，如果是，那么直接return；
  • 如果他们都有文本节点并且不相等，那么将el的文本节点设置为Vnode的文本节点；
  • 如果oldVnode有子节点而Vnode没有，则删除el的子节点；
  • 如果oldVnode没有子节点而Vnode有，则将Vnode的子节点真实化之后添加到el；
  • 如果两者都有子节点，则执行updateChildren函数比较子节点，这一步很重要；

• updateChildren函数图解

• 现在分别对oldS、oldE、S、E两两做sameVnode比较，有四种比较方式，当其中两个能匹配上那么真实dom中的相应节点会移到Vnode相应的位置，这句话有点绕，打个比方：

  • 如果是oldS和E匹配上了，那么真实dom中的第一个节点会移到最后；
  • 如果是oldE和S匹配上了，那么真实dom中的最后一个节点会移到最前，匹配上的两个指针向中间移动；
  • 如果四种匹配没有一对是成功的，那么遍历oldChild，S挨个和他们匹配，匹配成功就在真实dom中 将成功的节点移到最前面，如果依旧没有成功的，那么将S对应的节点插入到dom中对应的oldS位置，oldS和S指针向中间移动。

10、Vue.js的template编译

• 可以分成三部分

  • 将模板转化为抽象语法树；
  • 优化抽象语法树；
  • 根据抽象语法树生成代码；

答案：

• 首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以- 创建编译器的。另外compile还负责合并option。
• 然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）；

11、vue的computed和watch区别

• computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch同样可以监听 computed 计算属性的变化（其它还有 data、props）

• computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而watch则是当数据发生变化便会调用执行函数 从使用场景上说，computed 适用一个数据被多个数据影响，而 watch 适用一个数据影响多个数据；

12、Vuex是什么

vuex 就像一个全局的仓库，公共的状态或者复杂组件交互的状态我们会抽离出来放进里面。

vuex的核心主要包括以下几个部分：

• state：state里面就是存放的我们需要使用的状态，他是单向数据流，在 vue 中不允许直接对他进行修改，而是使用 mutations 去进行修改
• mutations: mutations 就是存放如何更改状态的一些方法
• actions： actions 是来做异步修改的，他可以等待异步结束后，再去使用 commit mutations 去修改状态
• getters: 相当于是 state 的计算属性

使用：

• 获取状态在组件内部 computed中使用 this.$store.state得到想要的状态
• 修改的话可在组件中使用 this.$store.commit方法去修改状态
• 如果在一个组件中，方法，状态使用太多。 可以使用 mapState，mapMutations辅助函数

13、vue指令

指令都是行内属性

`v-model`放在input、textarea、select>option上的，实现双向数据绑定

`v-text` 展示对应的文本

`v-once`  对应的标签只渲染一次

`v-show=布尔` 是否能显示，true能显示，false不能显示（存在隐式转化）

`v-html`  把值中的标签渲染出来
复制代码

v-for

循环显示元素
可以循环数组、对象、数字、字符串
最好加:key='a+i'
v-for='item in ary'
复制代码

v-bind

用于绑定行内属性
简写成:
复制代码

v-if

控制是否渲染该元素
值是true，则渲染该元素；false则不渲染
与v-else v-else-if连着使用
可以使用template标签，就不会出现多余标签
复制代码

14、vue-router

基本用法

步骤

• 1、声明组件
• 2、编写路由映射表
• 3、把编辑好的映射表注入到router实例中
• 4、把router实例注入到根实例中router-link 控制跳转的链接和显示的文字 router-view控制显示的组件内容 active-class控制选中对应路径的类名tag 控制渲染成什么标签

<body>
    <div id="app">
       <router-link to='/home' active-class='current'>首页</router-link>
       <router-link to='/list' tag='div'>列表</router-link>
       <router-view></router-view>
    </div>
</body>

</html>
<template id="home">
    <div>home</div>
</template>
<template id="list">
    <div>list</div>
</template>
<script src="../node/node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>

    let home = {
        template: '#home',

    }
    let list = {
        template: '#list',

    }

    //路由映射表
    let routes = [{
            path: '/home',
            component: home
        },
        {
            path: '/list',
            component: list
        }
    ]

    let router=new VueRouter({
        routes:routes,
    })
    let vm = new Vue({
        el: '#app',
        data: {
            name: "liu"
        },
        router,
    })
</script>

复制代码

传参

提供了两种传参方式

• 1、query传参（问号传参） 路由映射表不用改动 :to={path:'',query:{}}或者:to={name:'',query:{}}
• 2、params传参（路径传参） 在映射表中添加 /:变量 的形式； :to={name:'',params:{变量:''}}}

<router-link :to='{path:"/list",query:{id:123,e:name}}' tag='div'>列表</router-link>

重定向redirect

let routes = [
        {
            path:'/',
            redirect:'/son2/222'
        },
        {
            path:'/son1',
            // redirect:'/son2/5555',
            name:'son1',
            component:son1,
            redirect:'/son1/sz',
            children:[
                {
                    path:'/son1/sz',
                    component:sz
                }
            ]
        },
        {
            path:'/son2/:bl1234',
            name:'son2',
            component:son2
        },
        {
            path:'/*',
            redirect:'/son1'
        }
    ]

复制代码

推荐文章 前端面试题—vue部分详解

刷前端面试题的话，收藏这一篇就够了！

15、Vue的路由实现：hash模式 和 history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取； 特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

history 模式下，前端的 URL必须和实际向后端发起请求的 URL 一致，如http://www.xxx.com/items/id。后端如果缺少对 /items/id的路由处理，将返回 404 错误。

16、请说下封装vue组件的过程？

1）首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

2）使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

17、v-if和v-show的共同点和区别（考察频率：中）

参考官方文档

• 都是用来做条件渲染，通过条件控制元素的显示与隐藏。
• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• 一般来说，v-if 有更高的切换开销，而v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

18、Virtual DOM

Vue 在 render 中 createElement 的时候，并不是产生真实的 DOM 元素，实际上 createElement 描述为 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点。 因此，我们将这样的节点描述为 “虚拟节点”（Virtual Node），简称 VNode。“虚拟 DOM” 是我们对由 Vue 组件树建立的整个 VNode 树的称呼。

推荐：

《Vue原理解析之Virtual Dom》

《virtual-dom(Vue实现)简析》

19、Vue接口调用 - 请求json数据,前后端交互,

19.1、vue-resource

• 特点  

1、体积小：vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。

2、支持主流浏览器：和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持

3、支持Promise API和URI Templates：Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。 URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板

4、支持拦截器：拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。 拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

• 基本使用

1）.基于全局Vue对象使用http

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);

Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
复制代码

2）.在一个Vue实例内使用$http

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
复制代码

• 选项options

  • url:发送请求的URL

  • body:作为请求主体发送的数据

  • headers:标题对象作为HTTP请求表头发送

  • params:作为url参数发送的参数对象

• $http方式数据请求

• get

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
    </head>
 
    <body>
        <div id="app">
            <button v-on:click="sendGet()">发送get请求</button>
        </div>
    </body>
 
</html>
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            sendGet: function() {
                //这里的this指代的是   vm对象
                var url = "http://127.0.0.1:3000/login?username=admin&password=123";
                this.$http.get(url).then(function(res) {
                    console.log(res.data)
                },function(err){
                    console.log(err)
                })
            }
        }
    })
</script>

复制代码

• post

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
    </head>
 
    <body>
        <div id="app">
            <button v-on:click="sendPost()">发送post请求</button>
        </div>
    </body>
 
</html>
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            sendPost: function() {
                //这里的this指代的是   vm对象
                var url = "http://127.0.0.1:3000/postLogin";
                /**
                 * vue的post参数:如果是普通的post请求,最后一个就是{emulateJSON:true}
                 *
                 * 参数一:url
                 *
                 * 参数二:data-要传递的数据-对象的形式
                 *
                 * 参数三:如果是普通的post请求,最后一个就是{emulateJSON:true}
                 *
                 * */
                this.$http.post(url, {
                    username: 'lisi',
                    password: 'lisi'
                }, {
                    emulateJSON: true
                }).then(function(res) {
                    console.log(res.data)
                })
            }
        }
    })
</script>
复制代码

• jsonp

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
    </head>

    <body>
        <div id="app">
            <button v-on:click="sendPost()">发送post请求</button>
        </div>
    </body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        methods: {
            sendPost: function() {
                //这里的this指代的是   vm对象
                var url = "http://127.0.0.1:3000/postLogin";
                /**
                 * vue的post参数:如果是普通的post请求,最后一个就是{emulateJSON:true}
                 * 
                 * 参数一:url
                 * 
                 * 参数二:data-要传递的数据-对象的形式
                 * 
                 * 参数三:如果是普通的post请求,最后一个就是{emulateJSON:true}
                 * 
                 * */
                this.$http.post(url, {
                    username: 'lisi',
                    password: 'lisi'
                }, {
                    emulateJSON: true
                }).then(function(res) {
                    console.log(res.data)
                })
            }
        }
    })
</script>

复制代码

19.2、axios

在Vue中发送AJAX请求：Vue本身并不支持发送ajax请求，需要使用第三方插件vue-resources(1.0,但是2.0中不建议使用)、官方推荐使用axis(2.0)；但是也可以用jQuery;

• 什么是axios？

axios是一个基于promise的http请求客户端，用来发送请求，也是vue2.0官方推荐使用的；在vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。

• axios具体用来做什么

  • 从浏览器中创建XMLHttpRequests

  • 让HTTP从node.js的请求

  • 支持Promise API

  • 截取请求和响应

  • 转换请求和响应数据

  • 取消请求

  • 自动转换JSON数据

  • 客户端支持防范XSRF

axios的github地址和使用方式：github.com/axios/axios

• 使用axios说明：

axios([options])

axios.get(url[,options]);

传参方式：
    1.通过`url`传参
    2.通过`params`选项传参
复制代码

axios.post(url,data,[options]);

`axios`默认发送数据时，数据格式是`Request` `Payload`，并非我们常用的`Form Data`格式，
所以参数必须要以键值对形式传递，不能以`json`形式传参

传参方式：
    1.自己拼接为键值对
    2.使用`transformRequest`，在请求发送前将请求数据进行转换
    3.如果使用模块化开发，可以使用`qs`模块进行转换
复制代码

axios本身并不支持发送跨域的请求，没有提供相应的API，所以只能使用第三方库

• 如何解决跨域问题：

客户端通过jsonp或者vue-resource支持

如果服务端通过CORS支持跨域，则客户端不需要处理跨域

20、如何使用Vue动态搭建页面

• 1）、引入vue，引入jQuery（因为等下用Ajax请求数据用到jQuery）

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
复制代码

• 2）、初始化并绑定vue

首先在自己的网页body内添加一个div包括所有内容，并给这个div设置id

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
//你的html代码
    </div>
</body>
</html>
复制代码

• 3）、创建vue并挂载到页面（如果在单独创建js文件来写，则需在htmll中引入这个js文件）

创建如下：

window.onload = function() {
  new Vue({
    el: "#app",//将vue挂载到html中你创建的那个带id="app"上
    data: {
      aboutData: [], //建一个空数组，用来保存调用接口获取的数据
    },
    created: function() {
      this.getRoute();
    },
    mounted() {
 
    },
    methods: {
      getRoute: function() {
        var that = this;
        $.ajax({
          type: "GET",
          url:
            "填写你的数据接口地址",
          dataType: "json",
          success: function(response) {
               aboutData = response;
            //写在获取数据成功后你想进行的操作
          },
          error: function() {
            alert("请求失败");
          }
        });
      }
  });
};
复制代码

• 4）、可以在html代码中调用vue相关语法来写进动态数据了

微信小程序篇

推荐：jsliang 的 2019 面试准备

转载于:https://juejin.im/post/5ce29d27f265da1b9570298a