框架学习前期知识点回顾

第一个知识点:ajax。原文链接:ajax和vue.js

ajax简介:

ajax其实就是jQuery中的一个函数而已,它依赖于http协议,默认支持异步传输数据和局部刷新。此处的异步指的是ajax可以在发送数据的时候同时接收数据。它用来做数据交互。需要注意的是:ajax是不和数据库连接的,因为不同语言所基于的协议不同。它和数据库之间通过后端程序员写的应用程序所连接,应用程序提供接口,ajax请求数据接口,通过数据接口向数据库请求数据。

ajax的参数介绍:

其余多说无益,重点是怎么去使用。下面介绍一下常用的参数:

  1. url请求地址(此处所访问的地址,就是框架应用程序中的数据接口)
  2. type是请求方式,默认是'GET',还有'POST'
  3. dataType设置返回的数据格式,最常用的就是json
  4. data指的是发送给服务器的数据
  5. success设置请求成功后的回调函数,需要设置形参进行接收。
  6. error设置请求失败后的回调函数。
  7. async设置是否异步,默认是true,表示异步。
  8. 在新的写法中,为了让ajax显的轻量,便于开发者的维护,我们将success和error提取到ajax外面,采用链式编程,进行书写。同时success替换成done,error替换成fail。
  9. 在ajax中允许自定义html属性,在访问自定义的html属性的时候使用attr,用法和prop完全一样。

ajax常用写法:

$(function(){
     $.ajax({
        url:'/index_data',
        type:'get',
        dataType:'json'
     }),
     .done(function(dat){
        //成功后所进行的操作
     }),
     .fail(function(){
     alert('请求失败')
     })
})

第二个知识点:vue列表和字典渲染,原文链接:VUE.js高级

渲染的时候,有两种情况:v-for="临时变量in 序列" 和 v-for="(1,2) in 序列"

第一种是只有一个临时变量的情况,数组返回的是数组里面的元素,而‘字典’对象返回的是key所对应的value值。

第二种是多个临时变量的情况,数组两个参数,按顺序依次是数据和数据所对应的下标。‘字典’对象两个参数,按顺序依次是value值和key值。

下面是代码实现效果:

<!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>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!-- <li v-for="临时变量 in  序列"></li> -->
            <li v-for="i in mylist">{{ i }}</li>
        </ul>

        <ul>
            <li v-for="i in mydict">{{ i }}</li>
        </ul>
        <!-- v-for="(1, 2) in 序列"   -->
        <!-- 列表:1:数据,2数据对应的下标 -->
        <!-- 字典:1是v值,2是key值 -->
        <ul>
            <!-- 0、海王1 -->
            <li v-for="(i, j) in mylist">{{ j+1 }}、{{ i }}</li>
        </ul>
        <ul>
            <li v-for="(i, j) in mydict">{{ j }}: {{ i }}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                mylist:['海王1', '海王2', '海王3'],
                mydict:{name:'laowang', age:100}
            }
        })
    </script>
</body>
</html>

第三个知识点:axios,原文链接:VUE.js高级

要注意此处是在mounted(挂载)阶段。在vue中我们也可以进行数据交互,这里数据交互和ajax类似,我们就直接学习他们的不同之处和代码实现即可。

有三处不同的地方,我们需要注意一下,都是写代码时候的不同:1、发送方式method:'post' 2、成功之后的回调函数.then(function(){}) 3、失败之后的回调函数.catch(fuction(){})

下面是代码实现:

axios({
   url:接口地址
   data:{} 发送的数据
   method:请求方式 get post
})
.then()
.catch()

第四个知识点:前后端的交互流程,原文链接miniweb

原文发布于微信公众号 - 小闫笔记(Pythonnote)

原文发表时间:2018-12-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券