流行的前端框架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              --------该指令可以让页面元素和数据进行双向绑定。该指令主要用于处理表单等场景。

简单例子：

条件渲染

    
    
现在你看到我了
    改变seen状态
    
    
 随机数为 {{ 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}}
    

    

        
获取按键(单击、回车和空格)
        
文本框：
        
数字：
        
多行文本：
        
单选按钮：1
            2
        
        
复选框：
            
            Runoob
            
            Google
            
            taobao

            
            全选
        
        
多选框：
            
                1
                2
                3
                4
            
        
        
    

效果：

二、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请求地址

    
    
    
    
    
    





    
人物表格
    

        

        

            
编号
            
姓名
            
年龄
        
        
        

        

            
{{index}}
            
{{person.name}}
            
{{person.age}}
        
        
    

执行效果：

附上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