Vue纯零基础教学第二天--到走入Vue项目实际开发的内心深处

不念不忘少年蓝@ 2022-10-01 11:50 71阅读 0赞

前情提要：好了我们不废话直接开干继续讲解，最近一直要学习学习，所以不能贪玩了，所以每天更新学习学习。英语加上 别的

### 今天是我们Vue的第二天，我们继续讲解 语法 ###

## 今天讲 vue 语法 和 vue 网络请求 和填坑 ##

vue的网络请求 ：接口文档 数据 服务器 
    我会告诉大家：接口快速创建，接口规则  和 postman 接口测试工具
    快速生成接口 JSON-server 托管成 web 服务器 是根据 RESTful 接口规则来的
    复制代码

## 表格案例 坑时间问题 \*\*\* 过滤器 \*\*\* ##

表格案例：日期格式处理，日期没有经过格式处理直接渲染到视图中，日期处理后渲染到视图中- vue 提供了功能 过滤器

vue允许我们自定义过滤器，常见的文本格式，过滤器使用在 双花括号 和 v-bind 的使用 过滤器添加在js 表达式的尾部， （由管道符号指示）

过滤器 两类 一个是局部 一个是 全局过滤器是在vue 实例之前定义他是写在 new vue 之前

### 局部过滤器 ###

### 全局过滤器 ###

过滤器是用来处理 表格的文本格式 昨天的表格 代码 增加了 filter 与 moment 与moment 的使用

### moment 的使用 ###

### 使用过滤器后的 时间对象 ###

使用注意：注意日期里面data 要使用 new Date() 然后在return的时候moment（v）要传 参

## ref 操作Dom 当vue 中没有我们需要的指令 ##

我上面写的两种方法都是实现在mounted中的 this.![refs.XXX.XXX 这里注意mounted 中的是][refs.XXX.XXX _mounted]refs 在标签中的是ref

### 计算属性 ###

computed: {
          // 前面是Key  后面的  值
          //   计算属性跟data 的方法是一样的，但是要有返回值
          //   计算属性依赖于data 的数据
          //   本质 计算属性其实就是一个属性用法和data中的属性一样，但计算属性的是一个方法
          reverMes: function() {
            return this.message
              .split("")
              .reverse()
              .join("");
          }
        }
    复制代码

计算属性要写在 computed 里面 是带有 return 返回值的函数这里在计算属性中使用的com()\{\} 的是es6的方法

以后要记住在使用复杂的data的情况下可以考虑计算属性

计算属性和方法的区别
      1、使用方法是通过() 计算属性和data中的属性用法一样
        2、重要区别：方法每调用一次就执行一次，
       2、计算属性如果计算属性没有依赖data中的属性，当第一次使用计算属性的时，会把return
      的结果放在缓存中在使用这个计算属性时，会去缓存中找到这个结果
    复制代码

## 接口服务器搭建 使用JSON-Server ##

让我们来搭建一个json-server 来接收数据 可以快速把一个json 文件托管成一个web 服务器提供接口 特点基于 Express 支持Cors 和jsonp 跨域请求 支持 GET POST 等方法

使用： 1、安装 JSON-Server

2、npm i -g json-server 这里使用的-g是全局安装

3、启动接口服务器 在 文件夹下载 使用 json-server --watch db.json 启动 4、没时间上传gethub 上面 所以需要需要json 文件的自己百度找个或者留言找我要哈

### 截图第一步vscode 里面全局安装 ###

### 第二步走在存放当前文件夹里面创建一个 名为server的文件夹 存放json 文件 ###

### 第三步 我们赋值链接 localhost 让在浏览器里面打开看到 一个笑脸存放的json 文件 ###

接口介绍
        查 GET 
        增 POSt
        删 DELETE
        改 PUT
    复制代码

## 让我们使用 Axios 进行 使用数据 ##

如何在vue 的项目中发送网络请求 axios 
     在2.0以后使用通用的 axios 是一个库 不支持 JSONP 请求，如果遇到JSONP 请求，可以使用插件 jsonp 实现
     
     使用方法：
    1、npm install axios  记得安装 我已经安装过了 
    2、cdn 引入 你们自己去 官网找
    复制代码

这里记住 因为我们 是自己创建的 html 文件夹里面 需要 引入 axios，通过npm 下载的在我们 node文件夹下

### 让我们使用 get 获取到一个数据 ###

get 请求
          axios
            .get("http://localhost:3000/brands")
            .then(result => {
              console.log(result);
            })
            .catch(err => {});
    复制代码

### 让我们使用 post 添加 到一个数据 ###

post 请求 上传成功返回状态码 201 然后需要给上传的d
          axios
            .post("http://localhost:3000/brands", {
              name: "xxxx",
              data: new Date()
            })
            .then(result => {
              if (result.status === 201) {
                console.log(result);
              }
            })
            .catch(err => {});
    复制代码

### 让我们使用 delete 添加 到一个数据 ###

删除
          axios
            .delete("http://localhost:3000/brands/24")
            .then(result => {
              if (result === 200) {
                console.log(result + "删除成功");
              }
            })
            .catch(err => {});
    复制代码

## 使用计算属性进行搜索 ##

### 全局使用自定义指令 是光标 focus ###

// 全局自定义指令
          // 1、在new Vue定义自定义指令
          // 2、在自定义指令方法操作DOM 获取焦点
          //   3、使用自定义指令
    
          //   directive('自定义指令的名字',{inserted:function(v){操作DOM的代码}})
    
          //   这里进行解释 Vue的实例全局，进行 directive指令 然后在 inserted 插入 函数方法
          //   注意directive 全局的都不带 s
    复制代码

## 表格案例 动态获取 数据 ##

// 在页面加载完后 获取数据
            // mounted很像我们之前了解到的 window.onLoad
            mounted() {
              // 加载数据的方法
              axios
                .get("http://localhost:3000/brands")
                .then(result => {
                  this.items = result.data;
                })
                .catch(err => {});
            },
            methods: {
              del(index) {
                this.items.splice(index, 1);
              }
            }
    
            // 使用axios 请求数据
            // 网络请求是方法 写在 mounted 我之前是不是写过 所有的插件 都要放在mounted 声明钩子里面
            //  这时候记得需要在 script 头部引入 axios
    复制代码

## 表格数据 添加 与 通过 axios 进行渲染 添加 删除 ##

// 这里面是 加载 数据 从 localhost 里面 获取到 进行在页面渲染的要在 mounted 里面完成
            mounted() {
              axios
                // 使用 axios 使用get 方法获取数据
                .get("http://localhost:3000/brands")
                // 这里使用 .then 然后 获取 result 结果 把
                .then(result => {
                  //  把 获取结果的数据 赋值给 this.items  这个 项目
                  this.items = result.data;
                })
                // 然后 catch 抓住问题
                .catch(err => {});
            },
    
         methods: {
          del(index) {
            this.items.splice(index, 1);
          },
    
          addItem() {
            // this.item.unshift({
            //   name: this.name,
            //   date: new Date()
            // });
            // 添加上传对象 我们要告诉他里面上传的是什么 对象
            axios
              .post("http://localhost:3000/brands", {
                name: this.name,
                date: new Date()
              })
              .then(result => {
                console.log(result);
                // 添加成功刷新视图
                this.loadate();
              })
              .catch(err => {});
            this.name = "";
          }
        }
    
    
     del(idNum) {
            axios
              .delete("http://localhost:3000/brands/" + idNum)
              .then(result => {
                //   删除成功加载页面
                this.loadate();
              })
              .catch(err => {});
        }
    复制代码

## npm 的使用 ##

npm 
        npm 和 cnpm  可以改  npm config set regsier 淘宝镜像
        npm -v 查看当前 npm版本
        升级npm  安装 npm i -g npm 
        npm 会把错误放在缓存 -> 清除缓存
            npm cache clean --force
        全局包:npm i -g  axios 这里 记住 -g是全局 安装
        npm root 可以找到安装的 全局包所在位子 
        npm i axios @版本号
    复制代码

转载于:https://juejin.im/post/5c98ec33f265da60d36e7efd

[refs.XXX.XXX _mounted]: /images/20220118/75728b5425154734ad776b2b0d7390f8.png