Vue basic 04

已于 2022-11-04 09:25:25 修改
阅读量93 收藏
点赞数
分类专栏： VUE 文章标签： vue.js 前端 javascript
于 2022-11-03 18:12:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vampirewbszz/article/details/127663818
版权

VUE

04

1.Axios发送get请求

方式1：axios.get(url)

// 引入axios
import axios from 'axios'
// 调用get方法发送get请求
let url = 'http://ip:port/api?name=zs&pwd=1234'
axios.get(url).then(res=>{
    // .then()中的回调方法，将会在请求成功，获取响应后自动执行
    // res就是请求成功后，axios封装的响应数据对象 
}).catch(err=>{
    // 如果请求失败，执行catch中的回调方法
})

方式2：axios(url)

axios(url).then(res=>{
    // res就是请求成功后，axios封装的响应数据对象 
}).catch(err=>{
    // 如果请求失败，执行catch中的回调方法
})

方式3：axios.create().get()

//创建axios实例
let url = 'https://web.codeboy.com/bmdapi/movie-infos'
let instance = axios.create()
instance(url,{
	method:'get',
	params:{page:1,pagesize:10},
	headers:{'headername':'headervalue'}
}).then(res => {
	console.log(res)
	this.data = res.data.data
})

2.Axios发送post请求

方式1：

let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
let data = `name=${this.keyword}&page=1&pagesize=10`
axios.post(url, data).then(res => {
	console.log(res)
})

方式2：

let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
let instance = axios.create()
instance(url,{
	method:'post',
	data: `name=${this.keyword}&page=1&pagesize=10`,
	headers:{'headername':'headervalue'}
}).then(res => {
	console.log(res)
	this.data = res.data.data
})

一个object转formdata格式字符串的模块：qs
安装命令：npm i qs

调用方法，将对象转成formdata格式的字符串

3.请求案例(原生)

方法1：

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入查询关键字" />
    <button @click="getMoviesLike">点我模糊查询电影列表</button>
    <table style="width: 800px; margin: 0px auto">
      <button @click="getMovies">点我加载电影数据</button>
      <thead>
        <tr>
          <td>封面</td>
          <td>电影名称</td>
          <td>主演</td>
          <td>类型</td>
          <td>上映时间</td>
          <td>时长</td>
          <td>评分</td>
        </tr>
      </thead>
      <tbody v-for="item in data.result" :key="item.id">
        <tr>
          <td>
            <img width="100px" :src="item.cover" />
          </td>
          <td>{{ item.title }}</td>
          <td>{{ item.star_actor }}</td>
          <td>{{ item.type }}</td>
          <td>{{ item.showingon }}</td>
          <td>{{ item.duration }}分钟</td>
          <td>{{ item.score }}分</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      keyword: '', //绑定搜索关键字
      data: {}, //绑定电影数据请求的响应结果：{page,pagesize,result total}
    }
  },
  methods: {
    //模糊查询(post)
    getMoviesLike() {
      let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
      let data = `name=${this.keyword}&page=1&pagesize=10`
      axios.post(url, data).then(res => {
        console.log(res)
      })
    },
    //获取电影(get)
    getMovies() {
      let url = 'https://web.codeboy.com/bmdapi/movie-infos?page=1&pagesize=5'
      axios.get(url).then(res => {
        console.log(res)
        //将结果对象存入this.data : {page,pagesize,result total}
        this.data = res.data.data
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>

方法2：

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入查询关键字" /><br />
    <button @click="getMoviesLike">点我模糊查询电影列表</button>
    <br /><br />
    <button @click="getMovies">点我加载全部电影数据</button>
    <table style="width: 800px; margin: 0px auto">
      <thead>
        <tr>
          <td>封面</td>
          <td>电影名称</td>
          <td>主演</td>
          <td>类型</td>
          <td>上映时间</td>
          <td>时长</td>
          <td>评分</td>
        </tr>
      </thead>
      <tbody v-for="item in data.result" :key="item.id">
        <tr>
          <td>
            <img width="100px" :src="item.cover" />
          </td>
          <td>{{ item.title }}</td>
          <td>{{ item.star_actor }}</td>
          <td>{{ item.type }}</td>
          <td>{{ item.showingon }}</td>
          <td>{{ item.duration }}分钟</td>
          <td>{{ item.score }}分</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data() {
    return {
      keyword: '', //绑定搜索关键字
      data: {}, //绑定电影数据请求的响应结果：{page,pagesize,result total}
    }
  },
  methods: {
    //模糊查询(post)
    getMoviesLike() {
      let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
      let params = qs.stringify({ name: this.keyword, page: 1, pagesize: 10 })
      let instance = axios.create()
      instance(url, {
        method: 'post',
        data: params,
        headers: { headername: 'headervalue' },
      }).then(res => {
        console.log(res)
        this.data = res.data.data
      })
    },
    //获取电影(get)
    getMovies() {
      let url = 'https://web.codeboy.com/bmdapi/movie-infos'
      let instance = axios.create()
      instance(url, {
        method: 'get',
        params: { page: 1, pagesize: 10 },
        headers: { headername: 'headervalue' },
      }).then(res => {
        console.log(res)
        this.data = res.data.data
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>

4.封装Axios

期望：无论发送get还是post，不用写太多代码，简单的调用get、post方法，传url与对象参数即可完成发送请求和接收响应

//MyAxios.js
import axios from 'axios'
const instance = axios.create() //创建axios实例
import qs from 'qs'

const myaxios = {
  /**
   * 用于发送get请求
   * @param {String} url 请求资源路径
   * @param {Object} params 请求参数
   * @returns Promise
   */
  get(url, params) {
    return instance({
      url,
      method: 'get',
      params,
    })
  },

  /**
   * 用于发送post请求
   * @param {String} url 请求资源路径
   * @param {Object} params 请求参数(对象类型)
   * @returns Promise
   */
  post(url, params) {
    return instance({
      url,
      method: 'post',
      data: qs.stringify(params),
    })
  },
}

export default myaxios

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入查询关键字" /><br />
    <button @click="getMoviesLike">点我模糊查询电影列表</button>
    <br /><br />
    <button @click="getMovies">点我加载全部电影数据</button>
    <table style="width: 800px; margin: 0px auto">
      <thead>
        <tr>
          <td>封面</td>
          <td>电影名称</td>
          <td>主演</td>
          <td>类型</td>
          <td>上映时间</td>
          <td>时长</td>
          <td>评分</td>
        </tr>
      </thead>
      <tbody v-for="item in data.result" :key="item.id">
        <tr>
          <td>
            <img width="100px" :src="item.cover" />
          </td>
          <td>{{ item.title }}</td>
          <td>{{ item.star_actor }}</td>
          <td>{{ item.type }}</td>
          <td>{{ item.showingon }}</td>
          <td>{{ item.duration }}分钟</td>
          <td>{{ item.score }}分</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import myaxios from './http/MyAxios'

export default {
  data() {
    return {
      keyword: '', //绑定搜索关键字
      data: {}, //绑定电影数据请求的响应结果：{page,pagesize,result total}
    }
  },
  methods: {
    //模糊查询(post)
    getMoviesLike() {
      let url = 'https://web.codeboy.com/bmdapi/movie-infos/name'
      let params = { name: this.keyword, page: 1, pagesize: 10 }
      myaxios.post(url, params).then(res => {
        this.data = res.data.data
      })
    },
    //获取电影(get)
    getMovies() {
      let url = 'https://web.codeboy.com/bmdapi/movie-infos'
      myaxios.get(url, { page: 1, pagesize: 10 }).then(res => {
        this.data = res.data.data
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>

5.Vue的自定义组件

被vue管理的标签可以认为是vue的组件。在项目开发过程中，经常会用到一些需要复用的标签结构以及相应样式。vue提供了自定义组件的语法，可以让开发者将一些需要复用的页面结构，样式功能组织在一起，作为一个整体存在在项目中。当需要使用这个组件时，直接引用该组件即可，例如：

<div>
	<!-- 该组件就称为一个自定义组件，由开发者自行设计
		标签名自定义，属性自定义，事件自定义 -->
	<person src="图片路径" name="名字"></person>
</div>

如何设计并实现一个自定义组件
目标：设计一个组件，模仿标签的样式，方便的进行使用
实现步骤：
①设计一个自定义组件(外观、功能、未来如何复用)
②定义一个组件：在components目录下新建MyTag.vue 并在该组件中定义基础样式(注意：< script > export default { } < /script > )
③使用该组件时
1>先引用MyTag组件(MyTag可以被vue自动识别为my-tag)
2>直接通过标签名，使用该组件

<my-tag></my-tag>
<MyTag></MyTag>
<MyTag />

自定义组件
3>动态更改组件属性
动态更改组件属性

总结

注意复习：axios发送请求，封装axios，自定义组件

翻斗花园霸主
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-basic 10.绑定样式
呵呵哒!的博客
07-06 105
Vue-basic 10.绑定样式
VUE学习--04
qq_54708796的博客
02-23 239
vue学习
vue_basic
rzx520520520的博客
04-19 1211
11
尚硅谷Vue_basic
qq_26127905的博客
04-09 1461
v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。报错时因为使用的是开发版本vue,文件大,并且有各种调试信息.,生产中使用生产版本的就行,当然也可以关闭这个报错信息,：Vue中有很多的指令，且形式都是：v-?2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。1. M：模型(Model) ：data中的数据。
Vue-basic 07.数据代理
呵呵哒!的博客
07-06 71
Vue-basic 07.数据代理
basicData.vue
05-04
basicData.vue
vue-basic:让我们学习Vue.js
03-30
在“vue-basic”这个项目中，我们将深入学习Vue.js的基础知识，包括组件化开发、数据绑定、指令系统、计算属性和侦听器等核心概念。 1. **Vue.js简介** Vue.js由尤雨溪开发，旨在简化前端开发，通过声明式的数据...
vue-basic-1.md
12-16
vue-basic-1.md
vue_basic_demo:vue_basic_oa 总和 vue_basic_pc
08-04
base_pc_project 项目设置 npm install npm 运行 lint --fix 为开发编译和热重载 npm run serve 为生产编译和缩小 npm run build 运行你的测试 npm run test Lints 和修复文件 npm run lint ...
vue-basic:vue2、vue3入门的简单demo，最简单的入门admin框架搭建
08-04
vue3的各种小demo集合 建议使用 yarn install 目录结构 ┌─package.json 包管理 ├─public │ ├─favicon.ico │ ├─img │ ├─index.html │ └─robots.txt 反爬虫 ├─src │ ├─App.vue │ ├─api 接口...
vue ref和reactive区别
灰海
08-25 6212
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1549
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
vue3使用-watch监听总结
最新发布
weixin_44072254的博客
09-01 209
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
【已解决】Vue Duplicate keys detected: ‘[object Object]’
qq_34419312的博客
08-28 1038
【已解决】Vue Duplicate keys detected: ‘[object Object]’
el-table利用折叠面板 type=“expand“ 嵌套el-table，并实现 明细数据多选，选中明细数据后返回原数据得嵌套格式
m0_47483157的博客
08-31 352
【代码】el-table利用折叠面板 type="expand" 嵌套el-table，并实现 明细数据多选，选中明细数据后返回原数据得嵌套格式。
vue之函数式组件
qq_40278396的博客
08-27 884
在 Vue.js 中， 是用来定义函数式组件的一种方式。函数式组件是专门设计用于表现层的轻量级组件，通常没有状态和实例，它们依赖于传入的 来渲染内容，因此效率更高。
vue手机端 搜索框调起带搜索键盘，点击确认自动关闭
qq_42740298的博客
08-29 362
vue手机端 搜索框调起带搜索键盘，点击确认自动关闭
比较一下React与Vue
qq_60504665的博客
08-29 562
需要注意的是，选择合适的前端框架并非一蹴而就的决策，需要在实际项目中实践和评估。通过比较虚拟DOM树和真实DOM树的差异，React仅更新需要变化的部分，提高了应用的性能2。拥有一个庞大的生态系统，包括大量的第三方库、工具和框架（如Redux、React Router等），为开发者提供了丰富的选择12。通过响应式数据绑定来实时追踪数据变化，只更新变化的部分，减少了不必要的重新渲染，提高了页面的响应速度13。鼓励将UI分解为小的、独立的、可复用的组件，这种方式使得代码更加模块化，易于理解和维护1。
六、vue进阶知识点
m0_59362850的博客
08-31 1082
单向数据流:父级 prop 的数据更新，会向下流动，影响子组件。① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数。①.父子关系（图中B和C组件和A组件构成父子关系）②.非父子关系（组件B与C构成非父子关系）① 父中给子添加属性传值 ② 子props 接收 ③ 使用。为组件的prop指定验证要求，不符合要求，控制台就会有。①父组件通过props将数据传递给子组件。②子组件利用$emit通知父组件修改更新。Prop定义：组件上注册的一些自定义属性。不同的组件关系和组件通信方案分类。
vue socket
09-08
Vue.js is a popular JavaScript framework ...Please note that this is just a basic example, and you may need to further configure and customize the socket connection based on your specific requirements.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值