vue 基础回顾

vue 基础回顾

一、重要文件

  • node_modules：当前项目依赖的 js 包
  • assets：静态资源存放目录(图片)
  • components：公共组件存放目录
  • App.vue：主组件，页面的入口文件
  • main.js：整个项目入口文件
  • package.json：项目配置信息、依赖包管理
  • vue.config.js： vue-cli 配置文件

二、常用配置及操作

（1）修改端口

在 vue.vonfig.js 文件中做以下配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {port: 7070}
})

三、基本使用方法

1. vue 组件

  • <template> （结构）
    • 只有一个根元素
    • 写html代码
  • <style> （样式）
    • 编写 CSS
    • 全局样式： 影响所有组件
    • 局部样式：影响当前组件
  • <script> （逻辑）
    • 空值模板的数据和行为

2. 文本插值

  • 作用：用来绑定 data 方法返回的对象属性
  • 用法：{{插值表达式}}
<template><div><h1>Hello, {{ name }}</h1><p>You are {{ age }} years old.</p></div>
</template><script>
export default {name: 'HelloWorld',data() {return {name: '河狸',age: 18}}
}
</script>

3. 属性绑定

  • 作用：为标签的属性绑定 data 方法中返回的属性

  • 用法：v-bind:xxx，简写为 :xxx

<template><div><div><input type="text" v-bind:value="name"></div><div><input type="number" v-bind:value="age"></div><div><img :src="src"/></div></div>
</template><script>
export default {name: 'HelloWorld',data() {return {name: '河狸',age: 18,src: 'https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs=1&pid=ImgDetMain'}}
}
</script>

4.事件绑定

  • 作用：为元素绑定对应的事件

  • 用法：v-on:xxx，简写为 @xxx

<template><div><input type="image" id="image" alt="Login" :src="src" v-on:click="handle1" /><input type="image" id="image" alt="Login" :src="src" @click="handle2" /></div></template><script>
export default {name: 'HelloWorld',data() {return {name: '河狸',age: 18,src: 'https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs=1&pid=ImgDetMain'}},methods: {handle1() {alert('我是小河狸~')},handle2() {alert('我是大笨蛋~')}}
}
</script>

5.双向绑定

作用：表单输入项和 data 方法中的属性进行绑定，任意一方改变都会同步给另一方

用法：v-model

<template><div><div><input type="text" v-model="name"></div><div><input type="text" v-bind:value="name"></div><div><button @click="handle3">改名</button></div></div>
</template><script>
export default {name: 'HelloWorld',data() {return {name: '河狸',age: 18,src: 'https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs=1&pid=ImgDetMain'}},methods: {handle1() {alert('我是小河狸~')},handle2() {alert('我是大笨蛋~')},handle3() {this.name = '呆呆的小河狸'}}
}
</script>

6. 条件渲染

  • 作用：根据表达式的值来动态渲染页面元素

  • 用法：v-if、v-else、v-else-if

<template><div><h1>Hello, <nobr v-if="age <=20">小河狸</nobr><nobr v-else-if="age <=50">大河狸</nobr><nobr v-else>超大河狸</nobr></h1><p>You are {{ age }} years old.</p></div><div><div><input type="text" v-model="name"></div><div><input type="number" v-model="age"></div><div><input type="image" id="image" alt="Login" :src="src" v-on:click="handle1" /><input type="image" id="image" alt="Login" :src="src" @click="handle2" /></div><div><button @click="handle3">改名</button></div></div></template><script>
export default {name: 'HelloWorld',data() {return {name: '河狸',age: 18,src: 'https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs=1&pid=ImgDetMain'}},methods: {handle1() {alert('我是小河狸~')},handle2() {alert('我是大笨蛋~')},handle3() {this.name = '呆呆的小河狸'}}
}
</script>

7. axios

Axios 是一个基于 promise 的 网络请求库，作用于浏览器和 node.js 中。使用Axios可以在前端项目中发送各种方式的HTTP请求。

  • 安装命令：npm install axios

  • 导入：import axios from 'axios'

参数说明：

  • url：请求路径
  • data：请求体数据，最常见的是JSON格式数据
  • config：配置对象，可以设置查询参数、请求头信息

注：在使用axios时，经常会遇到跨域问题。为了解决跨域问题，可以在 vue.config.js 文件中配置代理：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {port: 7070,proxy: {'/api': {target: 'http://localhost:8080',pathRewrite: {'^/api': ''}}}}
})

axios的post请求示例：

axios.post('/api/admin/employee/login',{username:'admin',password: '123456'}).then(res => {console.log(res.data)}).catch(error => {console.log(error.response)})

axios的get请求示例：

axios.get('/api/admin/shop/status',{headers: {token: ‘xxx.yyy.zzz’}})

axios提供的统一使用方式示例二（可以发送各种方式的请求）：

axios({url: '/api/admin/employee/login',method:'post',data: {username:'admin',password: '123456'}}).then((res) => {console.log(res.data.data.token)axios({url: '/api/admin/shop/status',method: 'get',params: {id: 100},headers: {token: res.data.data.token}})}).catch((error) => {console.log(error)})

四、路由 Vue-Router

vue 属于单页面应用，所谓路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容。

1. 路由组成

  • VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件
  • ：路由链接组件，浏览器会解析成
  • ：路由视图组件，用来展示与路由路径匹配的视图组件

2. 路由配置

具体配置方式：

  1. 在路由文件中配置路由路径和视图的对应关系：
//维护路由表，某个路由路径对应哪个视图组件
const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},{path: '/404',component: () => import('../views/404View.vue')},{path: "/:catchAll(.*)", // 不识别的path自动匹配404redirect: '/404',}
]
  1. 在视图组件中配置 router-link标签，用于生成超链接。在视图组件汇总配置router-view标签

点击不同的 router-link标签，router-view标签显示不同的视图

<router-link to="/">Home</router-link> 
<router-link to="/about">About</router-link> 
<router-link to="/test">Test</router-link> 
<!--视图组件展示的位置-->
<router-view/>
  1. 通过 js 实现路由跳转
<template><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><input type="button" value="路由跳转" @click="jump"/>        <router-view/>
</template><script>export default {methods: {jump() {this.$router.push('/about')}}}
</script>

3. 嵌套路由

1.在 src/router/index.js 中配置路由映射规则（嵌套路由配置）

   {path: '/c',component: () => import('../views/container/ContainerView.vue'),redirect: '/c/pi',//嵌套路由（子路由），对应的组件会展示在当前组件内部children: [//通过children属性指定子路由相关信息（path、component）{path: '/c/p1',component: () => import('../views/container/P1View.vue')},{path: '/c/p2',component: () => import('../views/container/P2View.vue')},{path: '/c/p3',component: () => import('../views/container/P3View.vue')}]}

2.在ContainerView.vue 布局容器视图中添加，实现子视图组件展示

<el-main><router-view/>
</el-main>

3.在ContainerView.vue 布局容器视图中添加，实现路由请求

<el-aside width="200px"><router-link to="/c/p1">P1</router-link><br><router-link to="/c/p2">P2</router-link><br><router-link to="/c/p3">P3</router-link><br>
</el-aside>

注意：子路由变化，切换的是【ContainerView 组件】中 <router-view></router-view> 部分的内容

五、状态管理 vuex

在多个组件之间共享数据，并且共享的数据是响应式的，即数据的变更能及时渲染到模板。

vuex 采用集中式存储管理所有组件的状态。

1. 概念

  • state：状态对象，集中定义各个组件共享的数据
  • mutations：类似于一个事件，用于修改共享数据，要求必须是同步函数
  • actions：类似于mutation，可以包含异步操作（ajax），通过调用mutation来改变共享数据

2.简单案例

import { createStore } from 'vuex'
import axios from 'axios'export default createStore({state: {name: "小河狸"},getters: {},mutations: {setName(state, newname) {state.name = newname}},actions: {setNamebyAxios(context) {axios({url: '/api/home',method: 'get'}).then(res => {context.commit('setName', res.data.data)})}},modules: {}
})

<template><div class="about"><div class="about"><h1>hi {{ $store.state.name }}</h1></div><input type="button" value="修改数据" @click="jump"/><input type="button" value="修改数据" @click="jump1"/></div>
</template><script>
export default {methods: {jump() {this.$store.commit('setName', '大河狸')},jump1() {this.$store.dispatch('setNamebyAxios')}}
}
</script>

六、TypeScript

1. 常用类型

TS中的常用类型如下：

类型例备注
字符串类型string
数字类型number
布尔类型boolean
数组类型number[],string[], boolean[] 依此类推
任意类型any相当于又回到了没有类型的时代
复杂类型type 与 interface
函数类型() => void对函数的参数和返回值进行说明
字面量类型“a”|“b”|“c”限制变量或参数的取值
class 类class Animal

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/788479.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LabVIEW专栏二、调用子VI

LabVIEW专栏二、调用子VI

该节目标是创建带子vi&#xff0c;修改vi属性&#xff0c;测试可重入和不可重入的区别 一 、设置子VI 把VI封装成为子VI&#xff0c;可以帮助模块化程序&#xff0c;简化代码结构。 任何VI本身都可以成为别的VI的子VI。 1.1、设置输入输出端子 1、在前面板空白处&#xff0…
阅读更多...
Matlab|基于关键场景辨别算法的两阶段鲁棒微网优化调度

Matlab|基于关键场景辨别算法的两阶段鲁棒微网优化调度

目录 主要内容 部分代码 结果一览 下载链接 主要内容 该模型主要求解的是微网两阶段鲁棒优化调度问题&#xff0c;与目前大部分用CCG算法不同&#xff0c;模型创新性的采用关键场景辨别法&#xff0c;通过少量的迭代辨别出最恶劣的场景&#xff0c;针对光伏出力的…
阅读更多...
obs直播推流 + ffmpeg参数

obs直播推流 + ffmpeg参数

OBS 启动参数设为 --startstreaming &#xff0c; 可以让它启动后自动开始直播 对应ffmpeg参数&#xff1a; echo off :loop ffmpeg -re -i a.mp4 -r 24 -c:v libx264 -preset ultrafast -profile:v baseline -g 24 -keyint_min 24 -x264-params nal-hrdcbr -b:v 2500k -minr…
阅读更多...
mybatis批量新增数据

mybatis批量新增数据

数据量大的时候如果在循环中执行单条新增操作&#xff0c;是非常慢的。那么如何在mybatis中实现批量新增数据呢&#xff1f; 方法 insert 标签的 foreach 属性可以用于批量插入数据。您可以使用 foreach 属性遍历一个集合&#xff0c;并为集合中的每个元素生成一条插入语句。…
阅读更多...
洛谷P1000超级玛丽游戏题解[Python, Rust, Go]

洛谷P1000超级玛丽游戏题解[Python, Rust, Go]

题目 打印超级玛丽字符图像 小技巧 直接复制题目的超级玛丽符号首行会有空格问题&#xff0c;一直AC不过&#xff0c;一行一行地复制就OK了&#x1f44c;。 Rust 题解 fn main() {println!(" ********************####....#.#..###.....##....###...…
阅读更多...
pip和conda 设置安装源

pip和conda 设置安装源

pip和conda 设置安装源 conda查看 channels添加 channels移除 channelschannels 配置文件 pip查看 index-url添加 index-url移除 index-urlindex-url 配置文件 常用源 conda 查看 channels conda config --show channels添加 channels conda config --add channels https:/…
阅读更多...
企业周年庆3d云展厅促进了客企间交流与互动

企业周年庆3d云展厅促进了客企间交流与互动

在数字化浪潮席卷而来的今天&#xff0c;传统的展示方式已难以满足现代人对信息获取与体验的高标准需求。为此&#xff0c;一种革命性的展示方式——线上3D虚拟展厅应运而生&#xff0c;以其独特的魅力逐渐引领展示方式的革新。 线上3D虚拟展厅开发&#xff0c;不仅为参与者带来…
阅读更多...
JVM垃圾收集——相关概念

JVM垃圾收集——相关概念

本贴讲解的内容包括System.gc()、内存溢出、内存泄漏、STW机制以及垃圾收集的串行、并行、并发三种情况&#xff0c;还有强引用、软引用、弱引用、虚引用四种引用。 1、System.gc()的理解 在默认情况下&#xff0c;通过System.gc()或者Runtime.getRuntime().gc()的调用&#…
阅读更多...
k8s 加 jenkins 和 gitlab 结合 maven生成快速devops平台内网快速部署

k8s 加 jenkins 和 gitlab 结合 maven生成快速devops平台内网快速部署

要实现Docker、Jenkins和GitLab的结合&#xff0c;以及通过Maven生成快速DevOps平台内网快速部署&#xff0c;可以按照以下步骤进行操作&#xff1a; 安装Docker&#xff1a;首先需要在服务器上安装Docker&#xff0c;可以根据操作系统的不同&#xff0c;参考Docker官方文档进行…
阅读更多...
提升常州小程序软件开发的搜索排名：关键步骤解析

提升常州小程序软件开发的搜索排名：关键步骤解析

在移动互联网的浪潮中&#xff0c;小程序作为连接用户与服务的桥梁&#xff0c;其重要性日益凸显。对于常州的小程序软件开发企业来说&#xff0c;如何让自己的产品在浩如烟海的互联网信息中脱颖而出&#xff0c;提升搜索排名&#xff0c;成为了亟待解决的问题。本文将为您解析…
阅读更多...
HarmonyOS 应用开发之自定义组件冻结功能

HarmonyOS 应用开发之自定义组件冻结功能

自定义组件处于非激活状态时&#xff0c;状态变量将不响应更新&#xff0c;即Watch不会调用&#xff0c;状态变量关联的节点不会刷新。通过freezeWhenInactive属性来决定是否使用冻结功能&#xff0c;不传参数时默认不使用。支持的场景有&#xff1a;页面路由&#xff0c;TabCo…
阅读更多...
完美解决layui多图上传时，动态给每个图片增加参数

完美解决layui多图上传时，动态给每个图片增加参数

需求&#xff1a;当我在使用layui框架上传多图时&#xff0c;我想动态给每一张图都把它的名称传给后台 data: {id: function(){return $(#id).val();} } 这是官网给的动态传参的方法 我自己根据官网给的案例设置 data:{filesIndex:function(index, file){return file.name}},…
阅读更多...
什么是智慧公厕？智慧旅游下的智慧公厕功能和特点

什么是智慧公厕？智慧旅游下的智慧公厕功能和特点

智慧旅游下的智慧公厕功能和特点&#xff1f;智慧旅游是景区、公园、游乐场、文化场馆等领域的一种信息化解决方案&#xff0c;智慧公厕是智慧旅游极为重要的一部分&#xff0c;能大大提升游客满意度。智慧公厕采用物联网、互联网、大数据、云计算等技术&#xff0c;实现旅游景…
阅读更多...
gitlab备份与恢复

gitlab备份与恢复

1.1.1 查看系统版本和软件版本 cat /etc/debian_version cat /opt/gitlab/embedded/service/gitlab-rails/VERSION 1.1.2 数据备份 打开/etc/gitlab/gitlab.rb配置文件&#xff0c;查看一个和备份相关的配置项 sudo vim /etc/gitlab/gitlab.rb gitlab_rails[backup_path] &q…
阅读更多...
ffmpeg点对点音视频udp协议传输

ffmpeg点对点音视频udp协议传输

参考&#xff1a;https://zhuanlan.zhihu.com/p/636152437?utm_id0 ffmpeg查看可用设备&#xff1a; ffmpeg -list_devices true -f dshow -i dummy1、音频 局域网内两台设备间 设备1-音频&#xff1a; ffmpeg -f dshow -i audio"麦克风阵列 (适用于数字麦克风的英特…
阅读更多...
使用Excel连接Azure DevOps自动退出的问题

使用Excel连接Azure DevOps自动退出的问题

Azure DevOps Server (原名TFS)是微软公司的软件开发管理平台&#xff0c;也是著名的软件开发过程管理工具&#xff1b;系统中记录了软件开发过程中的需求、问题、缺陷和迭代计划等各种软件开发工作项数据。 对于工作项数据的批量操作(例如新增和编辑)&#xff0c;Excel是一个非…
阅读更多...
zabbix图表时间与服务器时间不一致问题

zabbix图表时间与服务器时间不一致问题

部署完zabbix后&#xff0c;有时候会发现zabbix服务器的时间明明是对的&#xff0c;但是图标的时间不对&#xff0c;通过以下的配置可以快速解决。 登录zabbix-nginx容器 docker exec -u root -it docker-compose-zabbix-zabbix-web-nginx-mysql-1 bash修改php配置文件 vi /e…
阅读更多...
SpringData ElasticSearch - 简化开发，完美适配 Spring 生态

SpringData ElasticSearch - 简化开发，完美适配 Spring 生态

目录 一、SpringData ElasticSearch 1.1、环境配置 1.2、创建实体类 1.3、ElasticsearchRestTemplate 的使用 1.3.1、创建索引 设置映射 1.3.2、简单的增删改查 1.3.3、搜索 1.4、ElasticsearchRepository 1.4.1、使用方式 1.4.2、简单的增删改查 1.4.3、分页排序查…
阅读更多...
Linux系统下安装jdk与tomcat【linux】

Linux系统下安装jdk与tomcat【linux】

一、yum介绍 linux下的jdk安装以及环境配置&#xff0c;有两种常用方法&#xff1a; 1.使用yum一键安装。 2.手动安装&#xff0c;在Oracle官网下载好需要的jdk版本&#xff0c;上传解压并配置环境。 这里介绍第一种方法&#xff0c;在此之前简单了解下yum。 yum 介绍 yum&…
阅读更多...
57 npm run build 和 npm run serve 的差异

57 npm run build 和 npm run serve 的差异

前言 npm run serve 和 npm run build 的差异 这里主要是从 vue-cli 的流程 来看一下 我们经常用到的这两个命令, 他到传递给 webpack 打包的时候, 的一个具体的差异, 大致是配置了那些东西? 经过了那些流程 ? vue-cli 的 vue-plugin 的加载 内置的 plugin 列表如下, 依次…
阅读更多...
最新文章

Copyright @ 2022~2023