流行的前端框架VUE、 Axios、 Mock 使用简介

一、Vue.js使用

简介:Vue  是一套用于构建用户界面的渐进式框架,Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

基本语法:

每个 Vue 应用都需要通过实例化 Vue 来实现。基本语法格式如下:


{{text +" : "+ new Date()}}
说明:

使用前需要导入js,这里采用的是cdn方式,也可以下载到本地再引入。

Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。这意味着改动全部在 div 内,div 外部不受影响。

data 用于定义属性,这个属性是全局属性

methods 用于定义的函数,可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值可以组合使用。这里的效果就是在div输出 HelloWorld!+ 系统当前时间

指令:

指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时,将某些行为应用到 DOM 上。

v-html                 ------插入HTML代码                 

v-bind 可缩写 : ------设置和修改HTML属性        百度一下相当于 百度一下

v-once                 ------让视图只渲染一次,即使数据发生变化,也不会重新渲染。

v-on 可缩写@     -------主要用于绑定事件处理程序   例如@click="onClick"就相当于v-on:click="onClick"

v-if、v-else和v-else-if-----用于条件渲染

v-for                    -------- 该指令用于循环渲染整个列表。

v-model              --------该指令可以让页面元素和数据进行双向绑定。该指令主要用于处理表单等场景。

简单例子:

条件渲染

现在你看到我了

随机数为 {{ num}} 小于0.3

随机数为 {{ num}} 大于0.3小于0.6

随机数为 {{ num}} 大于0.6

循环渲染:

名字列表

  • {{name}}

人物表格

编号 姓名 年龄
{{index}} {{person.name}} {{person.age}}

表单数据:

修饰符

.number

如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:


.trim

如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:


绑定表单

文本框:{{text}}

数字:{{number}}

多行文本:{{textArea}}

单选按钮:{{radio}}

复选框:{{checkbox}}

多选框:{{select}}


获取按键(单击、回车和空格)

文本框:

数字:

多行文本:

单选按钮:

复选框:

多选框:

效果:流行的前端框架VUE、 Axios、 Mock 使用简介_第1张图片

二、Axios.js简介

1.概念:axios是Vue官方推荐的ajax库, 用来取代vue-resource。

2.与jQuery Ajax比较:

1).jQuery Ajax

优缺点:

  • 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
  • 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
  • JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
    $.ajax({
       type: 'POST',
       url: url,
       data: data,
       dataType: dataType,
       success: function () {},
       error: function () {}
    });
    

     

2). vue Axios.js

优缺点:

  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 客户端支持防止CSRF
  • 提供了一些并发请求的接口(重要,方便了很多的操作)
    axios({
        method: 'post',
        url: '/user/12345',
        data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
    
    3.简单Demo例子(页面加载时同时加载数据)

 !!!使用前导入vue.js和axios.js文件

说明:

下面代码适合于下面说的使用Mock.js进行模拟数据,注意url请求地址




    
    Title
    
    
    
    




人物表格

编号 姓名 年龄
{{index}} {{person.name}} {{person.age}}

执行效果:

流行的前端框架VUE、 Axios、 Mock 使用简介_第2张图片

附上user.json文件,想测试这种方法可以解除对应注释(注意:可以在线检测json文件格式是否正确)http://www.bejson.com/

{
  "status":"200",
  "message":"ok",
  "data":[
    {"name": "zhang3", "age": 24},
    {"name": "li4", "age": 25}
  ]
}

三、Mock.js简介

mock是一个模拟数据生成器,旨在帮助前端独立于后端进行开发,帮助编写单元测试。mock有如下功能

  • 根据数据模板生成模板数据

  • 模拟ajax请求,生成请求数据

  • 基于html模板生成模拟数据

简单例子:

  • //调用mock方法模拟数据
        Mock.mock(
            'http://mockjs', {
                "userName" : '@name',     //模拟名称
                "age|1-100":100,          //模拟年龄(1-100)
                "date"     : "@date('yyyy-MM-dd')",  //模拟时间
                "url"      : "@url()",     //模拟url
                "content"  : "@cparagraph()" //模拟文本
            }
        );

    这里只做一个简单介绍,具体看mork.js详细讲解

  • https://segmentfault.com/a/1190000010211622#articleHeader4 

你可能感兴趣的:(前端框架)