Vue2(0基础入门)

环境准备

安装脚手架

vuecli:

npm install -g @vue/cli

vite:

npm init vue@latest
  • -g 全局安装,任意目录都可以使用vue脚本

image.png

进入目录创建项目:

在目录的终端输入:vue ui

image.png

image.png

image.png

image.png

安装devtool(这个网页是安装好了自动跳转的)
image.png

运行项目:
image.png

修改端口号

image.png

devServer:{  
  port: 7070  
}

文档地址:
https://webpack.docschina.org/configuration/dev-server/#devserverproxy

代理问题

之前所有关于/api的地址都会走代理:

devServer:{  
  port: 7070,  
  proxy: {  
    '/api': {  
      target: 'http://localhost:5008',  
      changeOrigin: true  
    }  
  }

🌰:
当我输入:http://localhost:7070/api/user/search/1

会自动跳转到http://localhost:5008/api/user/search/1

项目结构

├─assets
├─components
├─router
├─store
└─views

  • assets - 静态资源

  • components - 可重用组件

  • router - 路由

  • store - 数据共享

  • views - 视图组件

以后还会添加

  • api - 跟后台交互,发送 fetch、xhr 请求,接收响应
  • plugins - 插件

Vue组件

<script setup>  
  
</script>  
  
<template>  
  
</template>  
  
<style scoped>  
  
</style>
  • template 模板部分
  • srcipt 代码部分 js数据和行为
  • style 样式

App.Vue

  • 顶层组件

模板从javascript中提取数据:

<template>  
<h1>{{meg}}</h1>  
</template>


<script>  
const options = {  
  data: function (){  
    return {meg : "你好!"};  
  }  
};  
export default options;  
</script>

基础操作

Js属性绑定值

<input type="text" v-bind:value="name">

使用v-bind:value 绑定script中的值

简写:<input type="date" :value="age">

事件绑定

<div>  
  <input type="button" value="点我" v-on:click="m1"> 
   <input type="button" value="点我" @click="m1">  
</div>


function m1(){  
  alert("嘻嘻哈哈")  
}

当点击button的时候,会触发m1方法

v-on: 简写: @

双向绑定

网页上的数据改变,js中的属性值也会改变

在template中使用v-model绑定script中的值

image.png

Axios

  • Axios是什么?
    • 用于发送异步 HTTP 请求(包括 GET、POST、PUT、DELETE 等)来与服务器进行交互。
  • 对请求和响应有统一的拦截

也就是说可以使用Axios来获取后端的数据,然后显示在前端

使用Get方法

import axios from "axios";

function sendReq(){

  axios.get('https://jsonplaceholder.typicode.com/posts')

      .then(response => {

        console.log(response.data)

      })

}

使用Post方法

function sendPost(){

  axios.post('https://jsonplaceholder.typicode.com/posts',{

    tittle: 'foo',

    body: 'bar',

    userId: 1,

  }).then(resp => {

      console.log(resp)

  })

}

核心思想

前端传递的值到后端,需要符合后端的要求!
比如说:一个类,或者指定的属性

默认配置

核心思想:创建一个实例,在实例里面修改配置,后期都可以使用这个配置
image.png
baseURL:会将配置好的url和之后写的url进行拼接

image.png

withCredentials: 前后端都允许携带cookie,保持Session的一致性
image.png

状态码:
image.png

拦截器

拦截器的作用:
允许你在请求被发送或响应被处理之前,对它们进行统一的修改或处理。

  1. 统一修改请求头:在发送请求之前,你可以添加或修改请求头,例如添加认证令牌(如 JWT tokens)、CORS 头等。

  2. 统一修改请求参数:可以在发送请求前修改或添加查询参数、请求体等。

  3. 统一处理响应数据:在响应数据到达客户端之前,你可以对它们进行处理,比如数据格式化、状态码检查等。

  4. 错误处理:可以统一捕获和处理请求或响应过程中发生的错误,比如网络错误、超时、非200状态码等。

请求头中会自带一些信息:通过在请求头中添加认证令牌(如 Authorization 头),可以验证用户的身份,允许服务器识别和授权用户。

_axios.interceptors.request.use(

  function(config){

    config.headers = {

      Authorization:  'Bearer'

    }

    return config;

  },function(error){

    return Promise.reject(error);

  }

)

image.png

响应后做一个统一的处理

_axios.interceptors.response.use(

  function(config){

    return config

  },

  function(error){  // 这里响应后如果出现错误了可以做一个统一的处理

    if(error.response.status === 201){

      console.log('请求内容不存在')

      return Promise.resolve(201)

    }

    if(error.response.status === 404){

      console.log('请求参数不正确')

      return Promise.resolve(201)

    }

  }

)

Vue基础

Vue条件渲染

通过前端获取的数据,存储在数组中,然后通过Vue组件:v-if 条件判断

<div>  
  <div class="tbody">  
    <input type="button" value="获取远程数据" @click="get()">  
  </div>  <div v-if="items.length > 0">  
    已获取数据  
  </div>  
  <div v-else>  
    未获取数据  
  </div>  
</div>
async function get() {  
  const resp = await axios.get('https://jsonplaceholder.typicode.com/posts');  
  console.log(resp.data)  
  items.value = resp.data;  
}  
  
// 创建一个响应式数组来存储数据  
const items = ref([]);

image.png

当我点击获取数据的时候,v-if会自己判断是否条件成立,如果条件成立的话,那么先显示div内容,否则不会显示

  • 8
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
东南亚位于我国倡导推进的“一带一路”海陆交汇地带,作为当今全球发展最为迅速的地区之一,近年来区域内生产总值实现了显著且稳定的增长。根据东盟主要经济体公布的最新数据,印度尼西亚2023年国内生产总值(GDP)增长5.05%;越南2023年经济增长5.05%;马来西亚2023年经济增速为3.7%;泰国2023年经济增长1.9%;新加坡2023年经济增长1.1%;柬埔寨2023年经济增速预计为5.6%。 东盟国家在“一带一路”沿线国家中的总体GDP经济规模、贸易总额与国外直接投资均为最大,因此有着举足轻重的地位和作用。当前,东盟与中国已互相成为双方最大的交易伙伴。中国-东盟贸易总额已从2013年的443亿元增长至 2023年合计超逾6.4万亿元,占中国外贸总值的15.4%。在过去20余年中,东盟国家不断在全球多变的格局里面临挑战并寻求机遇。2023东盟国家主要经济体受到国内消费、国外投资、货币政策、旅游业复苏、和大宗商品出口价企稳等方面的提振,经济显现出稳步增长态势和强韧性的潜能。 本调研报告旨在深度挖掘东南亚市场的增长潜力与发展机会,分析东南亚市场竞争态势、销售模式、客户偏好、整体市场营商环境,为国内企业出海开展业务提供客观参考意见。 本文核心内容: 市场空间:全球行业市场空间、东南亚市场发展空间。 竞争态势:全球份额,东南亚市场企业份额。 销售模式:东南亚市场销售模式、本地代理商 客户情况:东南亚本地客户及偏好分析 营商环境:东南亚营商环境分析 本文纳入的企业包括国外及印尼本土企业,以及相关上下游企业等,部分名单 QYResearch是全球知名的大型咨询公司,行业涵盖各高科技行业产业链细分市场,横跨如半导体产业链(半导体设备及零部件、半导体材料、集成电路、制造、封测、分立器件、传感器、光电器件)、光伏产业链(设备、硅料/硅片、电池片、组件、辅料支架、逆变器、电站终端)、新能源汽车产业链(动力电池及材料、电驱电控、汽车半导体/电子、整车、充电桩)、通信产业链(通信系统设备、终端设备、电子元器件、射频前端、光模块、4G/5G/6G、宽带、IoT、数字经济、AI)、先进材料产业链(金属材料、高分子材料、陶瓷材料、纳米材料等)、机械制造产业链(数控机床、工程机械、电气机械、3C自动化、工业机器人、激光、工控、无人机)、食品药品、医疗器械、农业等。邮箱:market@qyresearch.com
东南亚位于我国倡导推进的“一带一路”海陆交汇地带,作为当今全球发展最为迅速的地区之一,近年来区域内生产总值实现了显著且稳定的增长。根据东盟主要经济体公布的最新数据,印度尼西亚2023年国内生产总值(GDP)增长5.05%;越南2023年经济增长5.05%;马来西亚2023年经济增速为3.7%;泰国2023年经济增长1.9%;新加坡2023年经济增长1.1%;柬埔寨2023年经济增速预计为5.6%。 东盟国家在“一带一路”沿线国家中的总体GDP经济规模、贸易总额与国外直接投资均为最大,因此有着举足轻重的地位和作用。当前,东盟与中国已互相成为双方最大的交易伙伴。中国-东盟贸易总额已从2013年的443亿元增长至 2023年合计超逾6.4万亿元,占中国外贸总值的15.4%。在过去20余年中,东盟国家不断在全球多变的格局里面临挑战并寻求机遇。2023东盟国家主要经济体受到国内消费、国外投资、货币政策、旅游业复苏、和大宗商品出口价企稳等方面的提振,经济显现出稳步增长态势和强韧性的潜能。 本调研报告旨在深度挖掘东南亚市场的增长潜力与发展机会,分析东南亚市场竞争态势、销售模式、客户偏好、整体市场营商环境,为国内企业出海开展业务提供客观参考意见。 本文核心内容: 市场空间:全球行业市场空间、东南亚市场发展空间。 竞争态势:全球份额,东南亚市场企业份额。 销售模式:东南亚市场销售模式、本地代理商 客户情况:东南亚本地客户及偏好分析 营商环境:东南亚营商环境分析 本文纳入的企业包括国外及印尼本土企业,以及相关上下游企业等,部分名单 QYResearch是全球知名的大型咨询公司,行业涵盖各高科技行业产业链细分市场,横跨如半导体产业链(半导体设备及零部件、半导体材料、集成电路、制造、封测、分立器件、传感器、光电器件)、光伏产业链(设备、硅料/硅片、电池片、组件、辅料支架、逆变器、电站终端)、新能源汽车产业链(动力电池及材料、电驱电控、汽车半导体/电子、整车、充电桩)、通信产业链(通信系统设备、终端设备、电子元器件、射频前端、光模块、4G/5G/6G、宽带、IoT、数字经济、AI)、先进材料产业链(金属材料、高分子材料、陶瓷材料、纳米材料等)、机械制造产业链(数控机床、工程机械、电气机械、3C自动化、工业机器人、激光、工控、无人机)、食品药品、医疗器械、农业等。邮箱:market@qyresearch.com

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值