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

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

今天是我们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 在标签中的是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文件夹下

<script src="./node_modules/axios/dist/axios.js"></script>
复制代码

让我们使用 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 = "";
      }
    }

<!--删除案例 里面传的 idNum 是上面的 index 值-->
 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 @版本号
复制代码