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

一、Vue.js使用

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

基本语法：

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

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="div">{{text +" : "+ new Date()}}</div>
<script>
    let vm = new Vue({
        el: '#div',  
        data: {
            text:"Hello World!"
        },
        methods : {
           
        }
    })
</script>

说明：

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

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

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

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

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

指令:

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

v-html                 ------插入HTML代码                  <span v-html="html"></span>

v-bind 可缩写 ： ------设置和修改HTML属性        <a :href="url">百度一下</a>相当于 <a v-bind:href="url">百度一下</>

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

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

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

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

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

简单例子：

条件渲染

<div id="app">
    <!--if渲染-->
    <p v-if="seen">现在你看到我了</p>
    <button @click="change">改变seen状态</button>
    <!--多条件渲染-->
    <p v-if="num < 0.3"> 随机数为 {{ num}} 小于0.3</p>
    <p v-else-if="num >=0.3 && num <0.6"> 随机数为 {{ num}} 大于0.3小于0.6</p>
    <p v-else> 随机数为 {{ num}} 大于0.6</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            seen: true,
            num: Math.random()
        },
        methods:{
            change : function () {
                this.seen = !this.seen;
            }
        }
    })
</script>

循环渲染：

<div id="app">
    <h3>名字列表</h3>
    <ul>
        <li v-for="name in names">{{name}}</li>
    </ul>

    <h3>人物表格</h3>
    <table>
        <thead>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(person, index) of people" :key="index">
            <td>{{index}}</td>
            <td>{{person.name}}</td>
            <td>{{person.age}}</td>
        </tr>
        </tbody>
    </table>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            names: [
                'zhang3',
                'li4',
                'yitian',
                'jojo'
            ],
            people: [
                {name: 'zhang3', age: 24},
                {name: 'li4', age: 25},
                {name: 'yitian', age: 24},
                {name: 'jojo', age: 30}
            ]
        }
    })
</script>

表单数据:

修饰符

.number

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

<input v-model.number="age" type="number">

.trim

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

<input v-model.trim="msg">

<h1>绑定表单</h1>
<div id="s7">
    <p>文本框：{{text}}</p>
    <p>数字：{{number}}</p>
    <p>多行文本：{{textArea}}</p>
    <p>单选按钮：{{radio}}</p>
    <p>复选框：{{checkbox}}</p>
    <p>多选框：{{select}}</p>
    <hr>
    <form @submit.prevent="showData">
        <h3>获取按键(单击、回车和空格)</h3>
        <p>文本框：<input type="text" v-model="text"
                      @keyup.enter="alert('按下了回车')"
                      @keyup.space="alert('按下了空格')"
                      @click="alert('单击')"></p>
        <p>数字：<input type="number" v-model="number"></p>
        <p>多行文本：<textarea v-model="textArea"></textarea></p>
        <p>单选按钮：<input type="radio" v-model="radio" value="1" id="one"><label for="one">1</label>
            <input type="radio" value="2" v-model="radio" id="two"><label for="two">2</label>
        </p>
        <p>复选框：
            <input type="checkbox" id="runoob" value="Runoob" v-model="checkbox">
            <label for="runoob">Runoob</label>
            <input type="checkbox" id="google" value="Google" v-model="checkbox">
            <label for="google">Google</label>
            <input type="checkbox" id="taobao" value="Taobao" v-model="checkbox">
            <label for="taobao">taobao</label>

            <input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">
            <label for="checkbox">全选</label>
        </p>
        <p>多选框：
            <select id="select" v-model="select">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </p>
        <input type="submit" value="提交">
    </form>
</div>
<script>
    let vm7 = new Vue({
        el: '#s7',
        data: {
            text: 'text',
            number:1,
            textArea: 'textArea',
            radio: '',
            checkbox: [],//复选框的选中的值
            select: '',
            checked: false,//是否全选
            checkedArr: ["Runoob", "Taobao", "Google"]//复选框所有的值
        },
        methods: {
            //复选操作
            changeAllChecked: function () {
                if (this.checked) {
                    this.checkbox = this.checkedArr
                } else {
                    this.checkbox = []
                }
            },
            showData:function (e) {
                console.log(e);
                alert(this.checkbox);
                console.log(this.checkbox);

            }
        },
             watch: {//对于复选操作watch加不加应该都可以
            "checkbox": function () {
                if (this.checkbox.length == this.checkedArr.length) {
                    this.checked = true
                } else {
                    this.checked = false
                }
            }
        }
    })
</script>

效果：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script type="text/javascript">
        Mock.mock(
            'http://mockjs', {
                "status":"200",
                "message":"ok",
                "data|10":[//返回10条数据
                    {
                        "name" : '@name',     //模拟名称
                        "age|1-100":100,          //模拟年龄(1-100)
                    }
                ]
            }
        );
    </script>


</head>
<body>
<div id="s5">
    <h3>人物表格</h3>
    <table>
        <thead>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(person, index) of people" :key="index">
            <td>{{index}}</td>
            <td>{{person.name}}</td>
            <td>{{person.age}}</td>
        </tr>
        </tbody>
    </table>

</div>
</body>
<script>
    let vm5 = new Vue({
        el: '#s5',
        data: {
            people: []
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            this.init();//初始化方法调用 ajax
        },
        methods: {
            init: function () {
                var _self = this;//把this复制给一个变量，因为在axios里写this代表的是axios
                // var _self = this.people;//这里不能能直接写this.people
                console.log(_self);
                // axios.get('/db/user.json')
                axios.get('http://mockjs')//这个是下面mock模拟数据请求用的
                    .then(function (response) {
                        console.log(response.data);//response.data代表实际返回的数据
                        _self.people = response.data.data;
                        console.log(_self);
                    })
                    .catch(function (err) {
                        console.log(err);
                    });

            }
        }


    })
</script>
</html>

执行效果：

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