Vue-基础-03-重点

Vue-基础-day03-重点

01-基础-实例选项-计算属性-基本使用

1. 场景:b依赖a b就是computed a依然是data

2. 计算属性是选项computed:{计算属性:值}

3. 值: 带retrun的函数

4. b的用法和data中的数据 用法一样

5. 特点: 如果b依赖了a , a变化->b变化

    computed: {
                // 计算属性的名字b:值(带return的函数)
                // b: function() {
                //     return this.a + 1;
                // }
                // 特点:
                // 如果b依赖a,此时,当a变化时 b会变化
                b() {
                    return this.a + 1;
                }
            },
   

02-基础-实例选项-计算属性和 methods 区别

1. 使用 methods fn() computed:{{fn2}}
2. 如果计算属性fn2没有依赖data,此时 会把第一次使用的return的结果 缓存

03-基础-表格案例-商品搜索功能分析

效果分析-> 表格展示数据的多少依赖了搜索框中的数据关键字->v-for绑定的数据list依赖了搜索框的v-model绑定的数据searchVal->数据list依赖了searchVal->把list改写计算属性啊

1. 新增选项computed:{newlist(){return this.list}}
2. 视图 使用list的位置改成newlist

04-基础-回顾-filter 方法和 startsWith 方法

1. filter 筛选数组
2. startsWith() 返回bool

注意: ("") 返回true

05-基础-表格案例-用计算属性实现商品搜索功能

 computed: {
                newlist() {
                    // 筛选this.list
                    // 遍历this.list数组 取每个元素v.name
                    // 判断v.name是否以this.searchVal开头 如果条件成立 -> 把符合条件的元素放在新数组保存
                    // 1. 遍历 foreach map filter 等
                    // 2. 条件 (筛选)
                    // 3. 有返回值 返回一个新数组
                    // ES6 箭头函数  -> 推荐的使用场景:当看到匿名函数->改成箭头函数
                    return this.list.filter((v) => {
                        // v.name是否以this.searchVal开头
                        return v.name.startsWith(this.searchVal)
                    });
                }
            },

ES6 箭头函数的推荐使用场景: 形参是匿名函数时 -> 改成()=>{}

1. 传统函数 this -> window/实例对象/定时器window.setTimeout()->方法的调用者
2. 箭头函数 this(没有自己的this) -> 向上一级找->该函数定义/声明生效的位置->定义位置的作用域中的this就是箭头函数里面的this

06-基础-在 vue 中发送网络请求

1. 服务器->json-server工具
2. 接口规则/规范

关于axios

1. 不是vue插件
2. 浏览器端/node 都可以使用
3. 不支持jsonp (使用jsonp)

07-基础-json-server 工具的使用

目的:可以使用json-server工具 快速生成一个服务器

json-server工具 全局命令行工具

作用: 把json文件变成接口文件

1. npm i -g json-server
   在任何终端工具/ 在任意目录 都可以执行指令
   cmd/IDE VSCode (ctrl+`)/win10 powerShell/conemu(软件)/Xshell等
2. 02-其他资源/db.json
3. 来到db.json文件所在的目录 -> 执行指令 json-server --watch db.json->启动了服务器->发送请求了!

08-基础-RESTFul 接口规则

发送请求->服务器->知道该服务器的接口规则->RESTful接口规则

好处: 只需要关注 请求方式 不需要关心标识问题

扩展

请求方式 8种 GET/POST

1. 查询数据 GET /brands 获取db.json下brands对应的所有数据
   1. GET /brands/1 查询id=1数据
2. 删除数据 DELETE /brands/1 删除id=1数据
3. 修改数据 PUT /brands/1 请求体对象
4. 上传/添加 POST /brands 请求体

PUT和POST用法一样 请求体

1. 查询 GET /brands?title_like=关键字 -> 模糊搜索

09-基础-postman 测试接口

post成功 status201

10-基础-axios-介绍-引入

1. 引入
2. 使用API

11-基础-axios-使用

post 成功 status===201 其他是200

put和post用法一样 请求体

 axios.get(url).then((res) => {
            // 请求成功 会来到这  res响应体
        }).catch((err) => {
            // 请求失败 会来到这 处理err对象
        })

对象解构赋值

let const (建议使用const)

12-基础-表格案例-axios 版-列表

1. 把newlist使用改成list
2. data中list:list->list:[]
3. methods中 getData(){axios请求}
   1. 请求成功-> this.list = res.data
4. mounted(){this.getData()}

13-基础-表格案例-axios 版-删除商品

删除->发送delete->根据id去删->传递v.id->删除成功->更新视图this.getData()

14-基础-表格案例-axios 版-添加商品

添加->发送post(请求体)->添加成功->更新视图

注意: 201 清空

15-基础-表格案例-axios 版-搜索功能-分析

计算属性中->异步操作axios(ajax)->在异步操作外面获取axios里面的结果->cb->.then源码->走不通

-> vue新知识

扩展

cb场景: 异步操作外面获取里面的结果

常见异步操作: ajax / 定时器 / 操作数据库 / 事件

16-基础-实例选项-watch-文档分析

场景: 当data数据变化同时 异步操作->当搜索关键字变化时 发送axios , 此时不适用计算属性,而应该侦听器watch

17-基础-实例选项-watch-基本使用

作用: 监测数据变化

特点:data变化时 自动触发函数

 watch: {
                // 被监测的数据:function(新值,old值){}
                // msg:function(newVal,oldVal){

                // }

                msg(newV, oldV) {
                    console.log(newV, oldV);
                    // 异步操作  比如ajax 定时器等
                }
            },

18-基础-表格案例-axios 版-搜索功能-实现

  watch: {
                // 被监测的数据:函数
                // 在关键字searchVal变化时 执行异步
                searchVal(newV, oldV) {
                    // 异步
                    axios.get("http://localhost:3000/brands?name_like=" + newV)
                        .then((res) => {
                            // console.log(111111);
                            // res.data
                            // console.log(res.data);
                            this.list = res.data;

                        });
                }
            },

19-基础-组件-组件体验

场景: 开发页面多个位置有相似的(标签结构+css+js交互)->封装组件

vue项目中 整个网站是由组件组成的!

20-基础-组件-组件特点

1. 组件是特殊的Vue实例
   1. 可以使用之前的选项 data/methods/watch/computed等(除了el)
   2. data的值不同 /template(必须有一个根元素)
2. 使用组件时, 新的实例->data和methods不影响

建议: 实例开始, 都是使用第三方组件

21-基础-组件-全局组件

  // 全局
        // 1. 定义 (组件名,组件选项所在对象)
        // 注意: 组件名命名,  abc childA child-a
        // 2. 写选项
        // 注意: template 一个根元素   +   data的值必须return{}的函数
template : ` 必须包含一个根标签`
 template: `<div><span>{{count}}</span> <button @click="changeCount">按钮</button> <br></div>`
        // 3. 使用
        // 自定义标签名
        // 在后面的任意的标签模板中都可以使用



html : 视图中
   <div id='app'>
        <!-- h3+p -->
        <hhpp></hhpp>
        <hhpp></hhpp>
        <hhpp></hhpp>
        <hhpp></hhpp>
        <hhpp></hhpp>
    </div>

// 自定义标签名
script :
Vue.component('hhpp', {
    template: `<div><p>{{msg}}</p> <a href="#">sss斯蒂芬</a></div> `,
    data() {
        return { msg: 'aabbccdd' }
    }
});

在script 中定义component 设置全局组件，自定义标签名，模板把重复的地方用模板字符串写入，还要设置一个div标签把标签包裹起来 ，
数据要return返回对象形式
在视图中 把script中自定义标签名 当成标签 写在视图里 要重复几次就写几次标签