Vue 计算属性和相关工具

计算属性

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

<code style="margin-left:0"><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></code>

computed和methods

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

<code style="margin-left:0"><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></code>

相关工具

JSON-server

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

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

使用:

<code style="margin-left:0">// 1 安装json-server工具(只安装一次即可)
npm i -g json-server
// 2 启动
// 创建一个目录server,在该目录下创建一个json文件，db.json
// 在server目录下执行
json-server --watch db.json</code>

验证:

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

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

RESTful 接口

1. 说明

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

2. HTTP方法规则举例

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

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

<code style="margin-left:0">POST /brands  </code>

GET：查询

<code style="margin-left:0">GET /brands // 获取所有商品信息
GET /brands/1 // 获取id为1的商品信息</code>

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

<code style="margin-left:0">PUT /brands/1 // 更新id为1的商品信息</code>

DELETE：删除

<code style="margin-left:0">DELETE /brands/1  //删除id为1的商品</code>

未经允许不得转载：木盒主机 » Vue 计算属性和相关工具