Vue 计算属性和相关工具

计算属性

计算属性:是Vue实例的一个选项 computed:{}
作用:在计算属性中去处理data里的数据
使用场景:任何复杂逻辑，都应当使用计算属性
本质: 计算属性的其实就是一个属性,用法和data中的属性一样,但计算属性的值是一个带有返回值的方法

代码语言：javascript复制

<div id="app">
    <p>{{a}}</p>
    <p>{{b}}</p>
    <!-- <p>{{c=a b}}</p> -->

    <!-- 现象: data中的属性c的值依赖于data中的另外两个属性a和b
问题:如果逻辑代码很简单,可以把表达式直接写在{{}}中
如果逻辑代码很复杂, 直接把表达式写在{{}}中不合适
此时, 就用到了计算属性
-->
    <!-- 计算属性的用法和data中的属性用法一样 -->
    <p>{{comC}}</p>
    <p>{{comC}}</p>
    <p>{{comC}}</p>

</div>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            a: 0,
            b: 0,
            c: 0
        },
        // 计算属性
        /*
             * 计算属性是Vue实例的一个选项
             * 计算属性的值是一个对象
             * 计算属性也是属性,只不过值是带有返回值的函数
             * 当data中的属性一发生变化, 会自动调用计算属性的方法
             */
        computed: {
            comC: function() {
                return this.a   this.b
            }
        }
    });
</script>

computed和methods

computed:
- 一旦data中的数据发生变化,就会触发计算属性的方法
- 会将data中属性的结果进行缓存,对比缓存中的结果是否发生变化
methods: 一调用就会触发, 和数据的变化与否无关

代码语言：javascript复制

<div id="app">
    <p>{{fn()}}</p>
    <p>{{fn()}}</p>
    <p>{{fn()}}</p>
    <hr>
    <p>{{comFn}}</p>
    <p>{{comFn}}</p>
    <p>{{comFn}}</p>

</div>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'abc'
        },
        methods: {
            fn() {
                // 返回一个值
                console.log('fn');
                return new Date();
            }
        },
        computed: {
            comFn() {
                // 计算属性，如果data中的数据变化，会重新执行，
                console.log('计算属性');
                return new Date();
            }
        }
    });
</script>

相关工具

JSON-server

说明: 可以快速把一个json文件托管成一个 web 服务器(提供接口)

特点: 基于Express，支持CORS和JSONP跨域请求，支持GET, POST, PUT和 DELETE 方法

使用:

代码语言：javascript复制

// 1 安装json-server工具(只安装一次即可)
npm i -g json-server
// 2 启动
// 创建一个目录server,在该目录下创建一个json文件，db.json
// 在server目录下执行
json-server --watch db.json

验证:

在浏览器地址栏中输入 http://localhost:3000 发起请求、观察cmd中的变化、观察浏览器中返回的json数据

注意: 直接使用课程包中的db.json文件也可以改变端口 --port

RESTful 接口

1. 说明

RESTful是一套接口设计规范
用不同的请求类型发送同样一个请求标识所对应的处理是不同的
通过Http请求的不同类型(POST/DELETE/PUT/GET)来判断是什么业务操作(CRUD )
json-server应用了RESTful规范

2. HTTP方法规则举例

HTTP方法	数据处理	说明
POST	Create	新增一个没有id的资源
GET	Read	取得一个资源
PUT	Update	更新一个资源。或新增一个含 id 资源(如果 id 不存在)
DELETE	Delete	删除一个资源

通过标准HTTP方法对资源CRUD：

POST：创建单个资源 (资源数据在请求体中)

代码语言：javascript复制

POST /brands

GET：查询

代码语言：javascript复制

GET /brands // 获取所有商品信息
GET /brands/1 // 获取id为1的商品信息

PUT：更新单个资源，客户端提供完整的更新后的资源

代码语言：javascript复制

PUT /brands/1 // 更新id为1的商品信息

DELETE：删除

代码语言：javascript复制

DELETE /brands/1  //删除id为1的商品

json http api 缓存

0 人点赞