Vue网络请求

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1.props的验证

props可以指定类型：string、number、boolean、array、object类型

传递动态和静态的props：title是静态，:age是动态
默认值default，必选项required

默认值如果是数组或者对象，必须返回一个function

2.插槽:内容分发，同一个内容的不同展示效果

1.基础插槽：SlotDemo与Slot
2.具名插槽：template中slot与slot中的name
3.插槽的默认信息：直接写在slot中
4.编译作用域：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
5.作用域插槽（数据传递）slot-scope：在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽内的任何元素或组件上。
6. 插槽的效果：内容展示由父组件传递给子组件（UI是由父组件传递的，决定了样式）， UI上要显示的内容由子组件决定。低耦合（组件之间联系少），高内聚（该组件的业务逻辑都写在内部）

3.访问元素组件

访问根实例：写在main.js中的new Vue，可以在任何地方读到this.$root.foo

访问父级组建实例：$parent 属性可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。

以上两种操作不建议，低耦合（组件之间联系少），高内聚（该组件的业务逻辑都写在内部）

4.操作原生DOM：解决一些隐藏属性

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 特性为这个子组件赋予一个 ID 引用

 <base-input ref="usernameInput"></base-input>  //绑定
  this.$refs.usernameInput        //获取

5.vue的生命周期函数

举例：ajax放在mounted之后

6.过渡与动画

1.常用方法：

在 CSS 过渡和动画中自动应用 class

可以配合使用第三方 CSS 动画库，如 Animate.css

在过渡钩子函数中使用 JavaScript 直接操作 DOM

可以配合使用第三方 JavaScript 动画库，如 Velocity.js

2.Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

这里使用CSS操作动画：

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

状态图：v-enter v为transition的name 六个类进行匹配

动画效果 ：swiper中可以看第三方库中的animate.css

在html中引入即可加载：<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

动画一定要脱离文档流

7.自定义指令

1.全局指令：写在main.js中

// 注册一个全局自定义指令 `v-focus`
        Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
        // 聚焦元素
        el.focus()
            }
            })

2.钩子函数（生命周期）：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

3.钩子函数的参数：el、binding、vnode 和 oldVnode，主要是el
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：

name：指令名，不包括 v- 前缀。

value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。

oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。

arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。

modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

4.局部指令：注册局部指令，组件中也接受一个 directives 的选项

directives: {
    focus: {
        // 指令的定义
        inserted: function (el) {
        el.focus()
        }
    }
    }
 指令的使用：在模板中任何元素上使用新的 v-focus 属性，focus为自定义指令的名称

8.过滤

1.过滤的使用：{{ message | capitalize }}

2.在组件中定义：

 filters: {
    capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    }
    }

9.VUE网络请求

中文参考站点：https://www.kancloud.cn/yunye/axios/234845

vue官网维护了一个网络请求：vue-resource,后期不维护了，推荐使用axios

vue -> axios：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

可参考官方API

1.安装：

 npm install axios --save

2.引入（main.js中）：

 import Axios from "axios"
 Vue.prototype.$axios = Axios

3.使用：

1.通过生命周期做网络请求：get请求

mounted(){
      this.$axios.get("http://www.wwtliu.com/sxtstu/blueberrypai/getChengpinInfo.php")
      .then(res => {
        console.log(res.data);
      })
      //捕获错误
      .catch(error => {
        console.log(error);
      })
    }

2.get请求传参

 axios.get('/user?ID=12345')
    //或者
    axios.get('/user', {
    params: {
      ID: 12345
    }
    })

3.post请求

  import qs from "qs";  
  // 解决参数格式的转码问题  ?name=iwen&age=20(axios)  {name:iwen,age:20}(当前)
  this.$axios.post("http://www.wwtliu.com/sxtstu/blueberrypai/login.php",qs.stringify{
      user_id:"[email protected]",
      password:"iwen123",
      verification_code:"crfvw"
    })
    .then(res => {
      console.log(res.data);
    })
    .catch(error => {
      console.log(error);
    })

4.全局配置

写在main.js中
axios.defaults.baseURL = 'https://api.example.com';  //URL可以少写一部分
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

5.拦截器

写在main.js中：发送请求或响应（接收）请求对数据进行判断

// 拦截器
// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么，利用qs进行格式转换
  if(config.method === "post"){
    config.data = qs.stringify(config.data)
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
// 添加响应拦截器
Axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if(!response.data){
    return {
      msg:"数据返回不合理"
    }
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

6.跨域处理：

  1. 写在config文件的index.js中

    配置：

 proxyTable: {
      '/doubai_api':{
          target: 'http://api.douban.com',
          pathRewrite: {
                 '^/doubai': ''
          },
          changeOrigin: true
       }
    }

  1. main.js：

Vue.prototype.HOST = "/doubai_api"

  1. 访问：修改配置文件以后，需要重启服务器

var url = this.HOST + "/v2/movie/top250";
    this.$axios({
      method: 'get',
      url: url
    })
    .then(res => {
      console.log(res.data);
    })
    .catch(error => {
      console.log(error);
    })

以上是 Vue网络请求 的全部内容， 来源链接： utcz.com/z/375802.html

回到顶部