![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
V_zcm
全栈学习中。
展开
-
实习日志-06
1.element走马灯文字图片联动 2.点击标签,联动文字和图片原创 2022-08-22 13:39:07 · 419 阅读 · 0 评论 -
Express-01
它可以当一个翻译官,比如系统传的是二进制的内容,应用软件不懂,中间件就可以编译成应用软件理解的内容;(4)这个时在app,js,加上express自带可以解析json数据的中间件,可以解析body传过来的json格式的数据,这样就可以正常运行接口的返回的内容了。ps:这个中途又遇到了奇怪的问题,说文档权限不够,我设置了完全控制也不行,重启也不行,直接换了一个盘安装文件,就解决了。任何请求接口,都会经过中间件,中间件可以执行方法,中间件也是写在app.js文件里面和路由端口在一起的。......原创 2022-08-21 23:10:12 · 202 阅读 · 0 评论 -
VUE-06 制作购物车
使用vue3写购物车首页和购物车组件,还有store全局文件原创 2022-08-20 18:48:16 · 605 阅读 · 0 评论 -
Vue基础-05
pinia和store的安装和使用原创 2022-08-20 17:41:57 · 1126 阅读 · 0 评论 -
Vue基础-04
路由的配置和使用,二级路由的使用。原创 2022-08-19 00:41:26 · 1185 阅读 · 0 评论 -
Vue3-03基础
这部分主要是组合式API vue3的写法。原创 2022-08-18 22:19:48 · 198 阅读 · 0 评论 -
Vue基础-02
本节:依旧是明歌的视频。原创 2022-08-17 18:59:40 · 184 阅读 · 0 评论 -
Vue-基础01
这部分是:B站明歌的视频笔记原创 2022-08-17 13:51:34 · 206 阅读 · 0 评论 -
实习05-技术
1.点击文字,下划线会自动出现。原理点击父级元素,子级元素会显示。}//触摸A联动显示B,最好是父级元素包含子级元素的关系。子级元素先设置隐藏,父级别元素,再设置显示。.父级元素hover.子级元素{本节总结一下自己最近写的一些功能。//可以直接改变元素的颜色,移动位置。2.给图片加一层灰色的蒙版。.........原创 2022-07-14 19:37:50 · 310 阅读 · 0 评论 -
VUE-34 组件2的运用
组件就是可以把一些内容变成一个个小插件,可以避免重复写,减少代码的冗余。写在JS文件里面,在HTML里面<script>引入,这样就可以模块化,更方便。1.js文件格式2.HTML文件在开头引入链接:<script type="text/javascript" src="js/component/productpublish.js"></script>。...原创 2022-02-07 00:45:34 · 333 阅读 · 0 评论 -
VUE-33 循环不同样式
本节:循环内容没问题,那么怎么循环内容里,不同的样式?1.循环输出数据。重点:定义冒号,属性变成变量,可以循环不同的内容2.循环的数据3.定义变量的样式完整代码:<template> <div class="container"> <div class="out"> <!-- 保证不换行 --> <div> <div class="top">..原创 2022-01-06 17:34:51 · 1219 阅读 · 0 评论 -
VUE-32 createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 405
本节:报错405,可能是前端传给后台服务器的请求方式不对,所以找不到。最简单的解决办法是,看是不是get和post的问题。原创 2021-12-30 09:59:43 · 5733 阅读 · 0 评论 -
VUE-31 循环输出数组内容
本节:循环输出数组内容例子:1.在div的内容写: v-for="(i, index) in contentData" :key="'i-' + index" 循环输出<div style="" v-for="(i, index) in contentData" :key="'i-' + index"> <div class="content">{{ i.content1 }}</div> <div clas...原创 2021-12-25 17:26:05 · 1470 阅读 · 0 评论 -
VUE-30 报错解决 Duplicate keys detected: ‘##‘. This may cause an update error.
当用表格,或者有循环的时候,key不是唯一的时候,就会报错。所以只需要在循环的位置,或者表格的位置就加上。:key="ii + 1",然后在定义一下,这个变量就可以了。原创 2021-12-24 22:01:43 · 654 阅读 · 0 评论 -
Vue-29 “Invalid prop: type check failed for prop “model”. Expected Object, got Array ”
本节:我经常遇到的vue报错。前台页面报错“Invalid prop: type check failed for prop “model”. Expected Object, got Array ”错误是:期望对象,得到的是数组解决办法:把定义的变量,[ ]变成 { },就可以了。2.还有就是明明定义的方法,可是却找不到方法,这时候,你就得看你的methods到底放在了哪里,位置是不是错了。...原创 2021-12-21 16:40:49 · 600 阅读 · 0 评论 -
Vue- 29 代码框架
本节:vue的代码框架<divid="app"></div><script>varapp=newVue({el:'#app',data:{message:'HelloVue!',created:function(){},//页面最开始运行的程序...原创 2021-12-16 22:35:51 · 950 阅读 · 0 评论 -
Vue-28 VSCode 自动格式化代码的设置
本节:代码自动格式化的配置首先,下载 ESLint然后,三步走:1.点击设置2.点这页3.出现一个页面,把全部内容变成这个文件{ "workbench.colorTheme": "Visual Studio Light", "files.autoSaveDelay": 1, "php.validate.executablePath": "", "security.workspace.trust.untrustedFile......原创 2021-12-16 16:08:51 · 545 阅读 · 0 评论 -
VUE-27根据用户ID,查找用户信息element
本节:在搜索框输入用户ID,查找到对应的用户信息。主要是把表单的内容设置成v-if ,写方法定义真假,真的时候,显示内容,假的时候,不显示内容。1.div(1.)输入框绑定,要接收的用户id(2.)按钮,定义点击事件,调取接口(3.)设置2个div表单,绑定 v-if = “变量名”,一个为真,一个为假2.script(1.)定义变量(2.)点击方法,调取接口搜索方法3.路由配置import ad...原创 2021-10-26 20:49:09 · 4114 阅读 · 0 评论 -
VUE-26 element 修改用户信息
本节:修改用户信息,点击修改,获取用户id,修改对应的用户信息。1.div(1.)点击修改,获取修改的用户ID,传参数,写一个获取id的点击事件,连接获取id接口。ps:在element表单里面,要使用自定义的变量,必须使用<template slot-scope="scope"> </template>,而且点击使用的变量:scope.row.变量名。scope.row.组合等于表单里面的指针<template slot-scope="...原创 2021-10-26 17:54:26 · 1535 阅读 · 0 评论 -
VUE-25 element获取服务器图片
本节:element获取服务器的图片1.div,用element写内容,不是和数组一样,循环指向就可以导出图片,而是需要用<template slot-scope= "scope">标签,加上服务器地址+scope.row.数组具体指向,才可以导出图片。 <el-table-column prop="address" label="图片"> <template slot-scope="scope"><img...原创 2021-10-18 16:21:18 · 867 阅读 · 2 评论 -
VUE-24 element分页的创建
本节:创建分页,而且会随着页数点击变化内容。1.div2.script,定义变量和方法。3.完整代码<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/element-ui@2.14.1/lib/index.js"></script><template> <div> <...原创 2021-10-18 16:11:52 · 86 阅读 · 0 评论 -
VUE-23 axios的引入,全局路径的定义
本节:aixos的引入;定义一个全局变量,存放路径,这样就不需要每一个网页都重复的敲这个路径,可以直接省略,避免冗余。在main.js里面:1.import axios from 'axios'//1.aixos的引入2.axios.defaults.baseURL = "http://www.**.com:8761";//2.定义要成为全局变量的路径...原创 2021-10-18 11:14:07 · 128 阅读 · 0 评论 -
VUE-22 全局变量判断用户是否登陆
本节:定义一个全局变量创建common(变量名自定义)还是一个公共的组件,可以用来记录用户登录的ID和判断登陆的状态。1.创建一个common文件夹,里面创建common.js文件,文件内容:var data = { isLogin: false,// 记录是否登录 token: "", // 记录服务器发过来的用户的token,用户信息}export default data;2.在main.js(路由器配置文件)import common from...原创 2021-10-18 11:12:50 · 1118 阅读 · 0 评论 -
VUE-21 路由器的创建的创和使用二层路由
在main.js里面:5步法import Vue from 'vue'import App from './App.vue'import VueRouter from 'vue-router'//1.添加vue的路由import routes from './router/router'//2.添加你新创建的路由器Vue.config.productionTip = falseVue.use(VueRouter) //3.引入路由器//4.添加vue的路由器const router原创 2021-10-15 10:12:28 · 88 阅读 · 0 评论 -
VUE-17 图片的获取,购物车商品数量的添加与减少,计算整个购物车商品的价格(循环)
将图片从服务器调用到页面上,购物车数量的增加与减少。1.div2.script:计算整个购物车商品的价钱;购物车商品的数量增加和减少;3.服务器的配置1.import指针from"../pages/user/shoppinglist" (.vue的文件名)2.constroutes=[{path:"/网站路径的名字",component:指针},]完整代码:<template> <div&g...原创 2021-09-26 18:04:13 · 809 阅读 · 0 评论 -
VUE-16 json格式的转换
一般我们从服务器拿到的数据是数组格式可以直接调用,但是当它是json格式的时候,我们要用转换一下再调用。1.div:在数组里面指一个参数,再指一个参数。2.script,编写方法完整代码:<template> <div> <div> <div>用户个人信息</div> <div>用户名称:{{ userData.name }}</div> &...原创 2021-09-26 17:42:45 · 441 阅读 · 0 评论 -
VUE-15 时间戳的使用
计算机的时间计算方式是从1970年1月1日开始计算的一串数字,而要转换成人看得懂的数字,要使用时间戳。1.在public 里面创建一个.html的文档,编写时间戳的功能(可直接百度)<!DOCTYPE html><html lang=""><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2021-09-26 16:26:00 · 198 阅读 · 0 评论 -
VUE-14 连接接口步骤的总结
步骤:创建一个页面,配置好路由。div:1. 输入框要绑定传参的变量,才可以传到服务器;是输出内容的话,要循环定义一个数组来接收服务器的数据,然后{{指针名.具体变量}} {{goods.name}}。2.按钮,点击事件调用接口功能。script:1.需要用到的变量要先定义好。2.创建方法,调用接口,要注意是post还是get方式传参,post是需要传参的,所以即便是没有参数,中间也需要放一个{}。3.连接服务器的接口。4.赋值,或者在服务器输出内容。...原创 2021-09-24 10:56:16 · 555 阅读 · 0 评论 -
VUE-13 简单组件
header组件就是可以把一些内容变成一个个小插件,可以避免重复写,减少代码的冗余。header的引入(每一个需要用header的地方都要调用):1.在首页(你需要的页面)div里面的头部,引入header,名字可自定义<div><myheader></myheader></div>2.在script 里引入header的路径:importmyheaderfrom"../../components/Header...原创 2021-09-23 17:39:37 · 231 阅读 · 0 评论 -
VUE-12 删除信息
本节目的:学会如果删除用户信息1.html(1.)点击删除按钮,传递对应的商品id2.script(1.)在data(){return{}里,定义需要传参的删除数组(2.)在method:{}里,创建方法,连接删除的接口3.一样的路由要配置:import add from "../pages/admin/goods_add" //第一个add是指针,要和compoent的一致,第二个add是.vue文件的名字const routes = [{...原创 2021-09-19 17:29:21 · 165 阅读 · 0 评论 -
VUE-11 如何修改信息
本节目的:学会如何修改信息。1.html(1.)输入框绑定要修改的数据Id,方便接收要修改的内容(2.)点击修改按钮,获取要修改的id(3.)点击修改,上传修改的信息2.script(1.)定义数组接收要修改的信息(2.)接收要修改的商品id,调用获取id的接口(3.)点击修改,调用修改接口3.路由的配置import add from "../pages/admin/goods_add" //第一个add是指针,要和c...原创 2021-09-19 17:19:44 · 531 阅读 · 0 评论 -
VUE-09 增加数据的功能(增加一个新的商品信息)
本节目的:在页面上可以看到,增加信息,比如:添加一个新的品牌, 新的用户信息,新的商品信息。1.html,在输入框,进行数据的绑定,接收内容,点击上传2.script:方法功能,使用aixos接口的调用3.路由的配置importaddfrom"../pages/admin/goods_add" //第一个add是指针,要和compoent的一致,第二个add是.vue文件的名字constroutes=[{path:"/main...原创 2021-09-19 16:43:34 · 495 阅读 · 0 评论 -
VUE-08 axios2个数组对应输出
本页主要学习:axios 从服务器调出信息,在页面输出1.html的代码:2.script的代码:原创 2021-09-16 14:43:21 · 104 阅读 · 0 评论 -
VUE-10 Element的安装
本节目的:1.element的安装 | Element 官方网址在终端输入:npm i element-ui -S2.引入element文件包,在main.js文件输入:importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);3.随便引入一个element的元素,测试看是否有效果,有效果说明安装成功!<...原创 2021-09-16 09:16:06 · 257 阅读 · 0 评论 -
VUE-07 axios循环输出信息
本页主要学习,通过axios从服务器调取信息,之后显示到界面上。1.html代码2.script代码3.路由配置(做vue任何界面都要进行路由配置,才可以访问)完整的html,script 代码:<template> <div> <div style="display:flex" v-for="(user,index) in userList" :key="'user-' +index"> {{use...原创 2021-09-15 22:13:47 · 555 阅读 · 0 评论 -
VUE-06 axios的路由跳转功能,父页面和子页面的结合
本页主要学习:axios的路由跳转功能1.html代码的编写:2.script的代码编写:(1) html,script完整代码:<template> <!-- 商品管理首页 --><div style="display:flex;"> <!-- display:flex是让包含着的div盒子不换行,vw 百分之xx屏幕 --> <div style="width:10vw">后台管理系统</di.原创 2021-09-15 21:57:39 · 2015 阅读 · 0 评论 -
VUE-05 登陆与注册,双绑,进行跳转
一.登陆界面流程:(1.)创建一个.vue页面(2.)编写登陆html代码(3.)编写script代码,引入axios(4.)调用服务器接口(5.)判断密码是否正确(6.)vue路由的配置1、html代码:如图所示:2、 script代码 如图所示:3、路由配置 如图所示:2.注册流程1.html代码 如图所示:2.script 代码 如图所示:3.路由配置 如图所示:最后:登陆的完整代码<...原创 2021-09-14 21:18:26 · 335 阅读 · 0 评论 -
VUE-04 axios 安装和引入使用,全局路径的定义
axios是什么?是干什么的?(就是从后台调取数据的功能)Axios是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios:前端通信框架,因为vue的边界很明确,就是为了处理DOM,所以并不具备通信功能,此时就需要额外使用一个通信框架与服务器交互;当然也可以使用jQuery提供的AJAX通信功能。1.安装axios查看是否在正确的目录下下载的,在终端输入dir看见package.json ,那你的目录就是对的。终端输入npm install原创 2021-09-14 17:50:22 · 714 阅读 · 0 评论 -
VUE-03 双层路由
1.在scr创建一个新的路由文件夹router和文件router.js2.router.js的配置内容(router.js是子路由)双层路由标准代码:ps:(import 定义名 form "路径"import Test from "路径"import Demo01 from "路径"const routes = [ { path: "设置路径1", component: Test, children: [{ path: "/路径...原创 2021-09-13 19:50:17 · 669 阅读 · 0 评论 -
VUE-02 路由的使用
1.打开项目终端运行 :npm install vue-router安装 Vue Router2.在component 文件夹里面创建文件Test.vue3.main.js进行路由配置4.在原有的App.vue里面添加下面标签 即可渲染如: http://localhost:8080/#/test要在App.vue加router-view标签: <router-view></router-view> 如下图...原创 2021-09-13 16:40:34 · 98 阅读 · 0 评论