VUE
关注
分享
扫一扫
V_zcm
全栈学习中。
展开
-
实习日志-06
1.element走马灯文字图片联动 2.点击标签，联动文字和图片原创 2022-08-22 13:39:07 · 561 阅读 · 0 评论 -
Express-01
它可以当一个翻译官，比如系统传的是二进制的内容，应用软件不懂，中间件就可以编译成应用软件理解的内容；（4）这个时在app,js，加上express自带可以解析json数据的中间件，可以解析body传过来的json格式的数据，这样就可以正常运行接口的返回的内容了。ps:这个中途又遇到了奇怪的问题，说文档权限不够，我设置了完全控制也不行，重启也不行，直接换了一个盘安装文件，就解决了。任何请求接口，都会经过中间件，中间件可以执行方法，中间件也是写在app.js文件里面和路由端口在一起的。......原创 2022-08-21 23:10:12 · 241 阅读 · 0 评论 -
VUE-06 制作购物车
使用vue3写购物车首页和购物车组件，还有store全局文件原创 2022-08-20 18:48:16 · 686 阅读 · 0 评论 -
Vue基础-05
pinia和store的安装和使用原创 2022-08-20 17:41:57 · 1204 阅读 · 0 评论 -
Vue基础-04
路由的配置和使用,二级路由的使用。原创 2022-08-19 00:41:26 · 1250 阅读 · 0 评论 -
Vue3-03基础
这部分主要是组合式API vue3的写法。原创 2022-08-18 22:19:48 · 252 阅读 · 0 评论 -
Vue基础-02
本节：依旧是明歌的视频。原创 2022-08-17 18:59:40 · 215 阅读 · 0 评论 -
Vue-基础01
这部分是：B站明歌的视频笔记原创 2022-08-17 13:51:34 · 226 阅读 · 0 评论 -
实习05-技术
1.点击文字，下划线会自动出现。原理点击父级元素，子级元素会显示。}//触摸A联动显示B，最好是父级元素包含子级元素的关系。子级元素先设置隐藏，父级别元素，再设置显示。.父级元素hover.子级元素{本节总结一下自己最近写的一些功能。//可以直接改变元素的颜色，移动位置。2.给图片加一层灰色的蒙版。.........原创 2022-07-14 19:37:50 · 336 阅读 · 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 · 375 阅读 · 0 评论 -
VUE-33 循环不同样式
本节：循环内容没问题，那么怎么循环内容里，不同的样式？1.循环输出数据。重点：定义冒号，属性变成变量，可以循环不同的内容2.循环的数据3.定义变量的样式完整代码：<template> <div class="container"> <div class="out"> <!-- 保证不换行 --> <div> <div class="top">..原创 2022-01-06 17:34:51 · 1269 阅读 · 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 · 5791 阅读 · 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 · 1528 阅读 · 0 评论 -
VUE-30 报错解决 Duplicate keys detected: ‘##‘. This may cause an update error.
当用表格，或者有循环的时候，key不是唯一的时候，就会报错。所以只需要在循环的位置，或者表格的位置就加上。:key="ii + 1"，然后在定义一下，这个变量就可以了。原创 2021-12-24 22:01:43 · 708 阅读 · 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 · 655 阅读 · 0 评论 -
Vue- 29 代码框架
本节：vue的代码框架<divid="app"></div><script>varapp=newVue({el:'#app',data:{message:'HelloVue!',created:function(){},//页面最开始运行的程序...原创 2021-12-16 22:35:51 · 989 阅读 · 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 · 676 阅读 · 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 · 4412 阅读 · 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 · 1633 阅读 · 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 · 929 阅读 · 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 · 99 阅读 · 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 · 150 阅读 · 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 · 1168 阅读 · 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 · 105 阅读 · 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 · 858 阅读 · 0 评论 -
VUE-16 json格式的转换
一般我们从服务器拿到的数据是数组格式可以直接调用，但是当它是json格式的时候，我们要用转换一下再调用。1.div：在数组里面指一个参数，再指一个参数。2.script，编写方法完整代码：<template> <div> <div> <div>用户个人信息</div> <div>用户名称：{{ userData.name }}</div> &...原创 2021-09-26 17:42:45 · 477 阅读 · 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 · 219 阅读 · 0 评论 -
VUE-14 连接接口步骤的总结
步骤：创建一个页面，配置好路由。div:1. 输入框要绑定传参的变量，才可以传到服务器；是输出内容的话，要循环定义一个数组来接收服务器的数据，然后{{指针名.具体变量}} {{goods.name}}。2.按钮，点击事件调用接口功能。script：1.需要用到的变量要先定义好。2.创建方法，调用接口，要注意是post还是get方式传参，post是需要传参的，所以即便是没有参数，中间也需要放一个{}。3.连接服务器的接口。4.赋值，或者在服务器输出内容。...原创 2021-09-24 10:56:16 · 592 阅读 · 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 · 292 阅读 · 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 · 196 阅读 · 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 · 593 阅读 · 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 · 528 阅读 · 0 评论 -
VUE-08 axios2个数组对应输出
本页主要学习：axios 从服务器调出信息，在页面输出1.html的代码：2.script的代码：原创 2021-09-16 14:43:21 · 125 阅读 · 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 · 288 阅读 · 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 · 613 阅读 · 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 · 2064 阅读 · 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 · 372 阅读 · 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 · 746 阅读 · 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 · 750 阅读 · 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 · 113 阅读 · 0 评论