vue
关注
分享
扫一扫
礼礼。
这个作者很懒，什么都没留下…
展开
-
【let var const】
块级作用域let和const有块级作用域,var没有let和const在同一作用域中都不可以重复说明,var可以推荐使用letJS文件引入方法：新建aa.js文件，在html文件中引入var会直接改变window对象，是不合理的，当声明的变量与window变量正好一样是，就会覆盖window变量，让其不能正常操作显示let 不会直接改变window对象，当声明的变量与window变量正好一样是，不会覆盖window变量，更推荐使用传值：传址null和undefined函数没有返回值，参数原创 2022-06-28 19:48:52 · 309 阅读 · 1 评论 -
【提交评论、制作购物车加购总计页面】
制作一个评论提交功能购物车加购总计页面的制作代码如下：<template> <div> <header>我的购物车</header> <div class="container"> <div class="item" v-for="(item,index) in shopCar" :key="index"> <div class="logo">原创 2022-05-09 15:11:26 · 271 阅读 · 0 评论 -
【时间戳 过滤器】
实现效果：2022-05-05 14:37:03视频教程、、、、、、、<p>完整版：{{date | dateString}}</p><p>年-月-日：{{date | dateString('YYYY-MM-DD')}}</p><p>时分秒：{{date | dateString('HH:mm:ss')}}</p>//<!--将获取到的当前时间的值date传递给dateString,具体格式由dateString自原创 2022-05-05 15:32:45 · 374 阅读 · 0 评论 -
【点击按钮显示/隐藏 带动画效果】
实现点击按钮后带动画显示内容，再次点击后进行隐藏，具体参考这个视频教程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta NAME="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <title>动画效果</title原创 2022-05-05 12:01:57 · 1313 阅读 · 0 评论 -
axios请求方式的基本使用和并发请求
axios的基本使用：axios({ url:'http://123.207.32.32:8000/home/multidata',}).then(res => { console.log(res);})axios({ url:'http://123.207.32.32:8000/home/data', //专门针对GET请求的参数拼接 //（事实上就是将http://123.207.32.32:8000/home/data?type=pop&page=1拆分成了这种形式.原创 2022-04-27 17:20:40 · 1519 阅读 · 0 评论 -
【点击分类 进入商品页面 继续点击 进入商品详情页面】
实现思路：主页面（商品分类）：点击类别按钮，跳转商品页面商品页面（商品列表）：点击某个商品，跳转商品详情页商品详情页（调用接口）：调用接口，渲染商品详细信息主页面：先创建好这四个分类的页面（Inseason 、 Place 、Effect 、NutritionClass ）//Inseason ： 当季 <div class="item item1" @click="centerRouter('Inseason')"> <img src=""/>原创 2022-04-27 11:48:20 · 5003 阅读 · 0 评论 -
将两个单页面修改成通过点击按钮相互嵌套的
需要修改两个地方：1.router.js文件//添加hidden:true和parentPath:'/goods_list'这两处 {path: '/add_new_goods',component: AddNewGoods , name:'添加新商品', meta: {hidden:true,accessType: 3,parentPath:'/goods_list'}},2.GoodsList.vue文件(需要添加按钮的文件)<router-link :to="{path: '/a.原创 2021-12-09 16:49:47 · 605 阅读 · 0 评论 -
【利用若依代码生成和vue快速生成一个验证表单】
在构建区结合左右勾勒出下图这样的布局构建好后点击“复制代码”按钮，在项目中粘贴粘贴好后修改这部分代码，改成适合自己项目的格式即可代码如下：<template> <div> <el-container class="home-container"> <!-- 侧边栏 --> <el-aside :width="isCollapse ? '64px' : '230px'"> <!.原创 2021-12-07 12:15:47 · 4902 阅读 · 2 评论 -
【在列表中插入文字链接选项，点击后通过对应的参数跳转到相应的位置】
在Tab中加入一列‘消息类型’，其中包含五中子类型，点击后跳转到对应的页面查看详情，如下图所示下拉框<div class="" style="margin-bottom:10px;margin-right:30px;"> <span class="screen_name" style="margin-right:10px;">消息类型</span> <el-select v-model="msgType" style="width:150px;" c原创 2021-12-02 10:46:04 · 187 阅读 · 0 评论 -
【制作侧部导航栏，并添加消息提示】
整体：提示：这里简述项目相关背景：<template> <el-aside width="auto" :class="isCollapse?'menu-collapsed':'menu-expanded'"> 顶部头像/图片 导航栏 </el-aside></template>顶部图片/头像：提示：放置两个大小不同的图片，展开侧部导航栏时切换成大图片展示，否则显示小的，绑定changeCollapse点击事件<div.原创 2021-11-30 08:47:05 · 2778 阅读 · 0 评论 -
【 filters过滤器的使用方法：动态的给数值后加单位，￥，$等等】
可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>定义本地的过滤器：filters: {原创 2021-11-24 08:51:46 · 425 阅读 · 0 评论 -
【文本溢出隐藏】
方法：设置文本框的最小宽度，添加横向滚动条，让横向滚动条呈隐藏状态1.A-B2.图片+商品名称3.原创 2021-11-23 13:15:26 · 500 阅读 · 0 评论 -
【分页常见问题】
如何用el-cow方法固定位置例如下图，想让分页栏偏右一些，根据大小给定比例，List item如果给它8份的大小，那么倩倩就得让它右移16份（8+16=24）2、如何配置分页方法呢？F12查看数据，就可以看到数据已经可以拿到了如何从让后台的数据跟着转变由于总条数不是固定的，所以这里需要将总条数绑定给vue实例，默认给0条数据divreturnmethods点击后进行分页：传递两个参数pageNow和pageSize当前页绑定size这个值，current.原创 2021-11-22 17:33:27 · 316 阅读 · 0 评论 -
【表单验证】
表单验证视频教程原创 2021-11-19 18:36:54 · 537 阅读 · 1 评论 -
【Tab表单 删除/编辑】
删除：添加一个确认气泡框（elementUI复制修改），再次确认是否删除发现一个小问题，还没确认删除呢就已经删除了，此时需要取消删除按钮的点击事件，给“好的”按钮添加触发点击方法@onConfirm="点击事件"就解决了编辑：查看视频教程...原创 2021-11-19 18:32:25 · 282 阅读 · 0 评论 -
【在表格下方创建“添加”按钮，完成添加用户信息，点击后自动添加等功能】
视频教程在Tab表格下方建立一个添加按钮，实现在页面上添加用户信息的功能1.在elementUI中找到Click,当前使用的是第一种效果，复制2.在表单下面：创建按钮、复制代码、3.修改绑定show，让它默认为打开状态true给按钮绑定一个点击事件，点击时实现该效果的展示/关闭修改该弹框的样式（一般不给定背景色，所以只需要把它默认给定的背景色，字体颜色去除即可，宽度：100%，高度：600px，表单一般需要左对齐，所以居中也去除）在elementUI中找到合适的表单，选择性复制到代原创 2021-11-19 17:24:23 · 2013 阅读 · 0 评论 -
激活的索引跟随路由的路径而改变
视频教程如果是在此处写了固定路由，每次刷新页面后总是会跳转到指定的这个标签解决方法：使用router即可动态切换原创 2021-11-19 14:44:46 · 187 阅读 · 0 评论 -
【创建用户表格】
视频教程复制elementUI这种效果的代码对复制过来的代码进行修改先处理数据，修改所需要的数据最终结果：第一列：编号第二列：姓名鼠标移动到姓名上后会自动弹出一个弹框，展示姓名和住址两项信息第三、四、五列：生日、性别、住址第六列：放置一个搜索框在这个搜索栏中输入关键字，达到数据过滤的效果：回到elementUI中复制这行代码同时当前列下还包含的是两个按钮（编辑/删除）下面进行从后端动态获取数据后端新建数据库，写入所需要的字段安装/引入axios原创 2021-11-19 14:36:42 · 160 阅读 · 0 评论 -
2. 主页展示轮播图
视频笔记在主页上添加轮播图从elementUI中复制就行在assets文件夹下新建一个存放图片的文件夹indexImgs,将所需的图片放入并重新命名引入这几张图片此时就需要定义一个数组imgs[]后面遍历的时候就只需要遍历这个imgs即可，（将4修改成imgs）修改图片路径的展示方式原来的修改后的...原创 2021-11-19 12:00:22 · 575 阅读 · 0 评论 -
【在表单中添加两列新字段，动态传输数据】
1.在设备状态后添加两个字段：商品数、订单数，并获取动态数据2.鼠标移动到订单数上，触发出弹框（动态显示订单时间）规定自动触发、右上方显示判断：订单数=0时不显示 <el-table-column prop="eqmtSt" label="设备状态" align="center" min-width="80"></el-table-column> <el-table-column prop="goodsCount" label="商品数" a原创 2021-11-18 16:21:29 · 179 阅读 · 0 评论 -
1. elementUI创建页面间的跳转
————————————视频笔记————————————————- 第一步：创建新项目vue- 第二步：删除多余的组件删除多余的代码，如下图所示- 第三步：创建新组件1.创建主页在router/index.js文件下注册该页面将index.vue 主页 设置为默认显示状态2.对“主页”进行构建布局在elementUI中复制需要的代码，选择性提取其中，这表示菜单子选项被选中时触发的点击事件key,keypath指代的就是上图中index=" " 的索引值1234，默认原创 2021-11-13 16:27:47 · 9017 阅读 · 2 评论 -
2021-11-11
<template slot-scope="scope"> //@click="deleteVersion(scope.row.franchiseeId)" 根据franchiseeId删除账户 //:disabled="scope.row.lastLoginTime != null"禁用当前按钮 <el-button type="text" style="margin-left: 10px;" class="router_hover" @click="deleteVers..原创 2021-11-11 09:49:33 · 217 阅读 · 0 评论 -
添加新页面
原创 2021-11-11 09:06:31 · 258 阅读 · 0 评论 -
点击禁用按钮，切换成启用按钮，同时当前行的颜色变为浅灰色
currentStatus == 'ACTIVE'是后端传来的数据，currentStatus 包括ACTIVE和DISABLE两种状态ACTIVE是此时禁用按钮的值DISABLE是此时启用按钮的值1.禁用状态下当前行呈现浅灰色：当按钮展示的是“启用”时，说明当前时处于禁用状态，当前行应该是灰色（给整行覆盖一层浅灰色样式即可）2.给表格列表区分奇偶数，呈现不同颜色绑定事件，行数是偶数，显示白色；否则 显示绿色...原创 2021-10-28 16:53:50 · 1575 阅读 · 0 评论 -
添加用户对话框
1.创建“添加用户”按钮定义一个处理函数@click=“addUser”，默认为显示状态true2.创建对话框(标题+主体+底部按钮)3.在data处进行邮箱号码的正则验证方法4.监听对话框的关闭，关闭后自动进行清空重置表单内容5.添加新用户，传入到表格中...原创 2021-10-28 15:29:15 · 159 阅读 · 0 评论 -
vue-router 的基本创建
一、创建路由组件1.在终端运行安装指令安装成功此时会发现src目录下多了一个带有index.js的文件夹router如果没有，可手动建立初始：在index.js文件中写入一下代码main.js里写入把不需要的东西都删除删除自带的HelloWorld.vue文件，将App.vue文件里多余的内容也删除，在components文件夹下新建子组件，如Home.vue此时 他就是一个非常干净的网站，啥也没有可以先创建两个组件，来实现组件间的自由切换（组件名随意）分别给两个子组件原创 2021-07-29 13:42:38 · 222 阅读 · 0 评论 -
vue
vue的优点前后端分离的模式模块化思想，使得层次分明，用于后期维护MVVM模式，使得代码耦合度不高MVVM框架是一种软件架构模式，是MVC的加强版Model层：模型层。数据层的域模型，主要用于抽出VM层中视图的ModelView层: 视图层。用于数据绑定的声明、指令的声明、时间绑定的声明ViewModel层：...原创 2021-07-06 09:41:23 · 409 阅读 · 0 评论 -
vue的重要指令
vue的重要指令v-if:根据表达式值的真假条件渲染元素，删除DOM元素后重建。其变量一般是true/false(隐藏/显示)v-show:根据表达式的真假值，修改元素的display属性，实现显示/隐藏v-for：循环指令v-model：表单数据的双向绑定，是一个语法糖，包括v-on和v-bind两个操作v-on:绑定一个value属性 v-bind:给当前元素绑定input事件v-on: @ 监听指定元素的DOM事件v-on可以监听多个方法v-bind: : 动态绑定 在标签上绑定属原创 2021-07-05 17:27:52 · 85 阅读 · 0 评论 -
电商系统大体概括
学习笔记来自 全栈小刘 老师的授课视频vue：vue-router:路由Element-UI：前端UI组件库Axios：网络数据请求Echarts：绘制相关的图形报表原创 2021-07-02 22:42:35 · 82 阅读 · 4 评论 -
axios
哔哩哔哩——原视频链接Axios(即ajax i/o system)本质上：它是对原生XMLHttpRequest的封装，可用于浏览器和node.js的HTTP客户端它支持多种请求方式axios(config)axios.request(config)axios.get(url[,config])axios.deletd(url[,config])axios.head(url[,config])axios.post(url[,data[,config]])axios.put(url[,原创 2021-07-02 16:47:31 · 102 阅读 · 0 评论 -
vuex的核心概念
1.什么是单一状态树呢？state:是用来存放状态信息的单一状态树：又叫单一数据源2. getters深入学习请观看哔哩哔哩ilovecoding老师的视频可看作是store(仓库)的计算属性，就是在数据经过一系列变化后，才会显示在页面上，这个过程中就会用到getters这个计算属性3.mutation哔哩哔哩ilovecoding老师的视频提交mutation是更改store中状态的唯一方法mutation很类似于事件，必须是同步函数每个mutation都具有一个事件类型(type原创 2021-07-02 16:18:41 · 67 阅读 · 0 评论 -
vuex——从单页面到多页面的状态管理切换
让两个组件共享一个counter计数功能——————学习笔记——————如何理解下图中三者的关系state:状态view:视图层actions（最终修改了state）以下图为例1.创建好文件后，打开App.vue，编译（创建一个message,然后在data里定义message）检查效果开始创建多个页面（如：HelloVuex.vue）这是App.vue（在里面添加了计数功能）它俩现在都想使用“counter计数功能”这个状态比如 我们也想在HelloVuex.vu原创 2021-07-02 11:21:23 · 662 阅读 · 2 评论 -
vuex的基本认识
Vuex：是一个专门为Vue.js应用程序开发的状态管理模式。遇到多个组件共享状态时，可使用vuex。它可以提供一个在多个组件间共享状态的插件它带来的最大的便捷是：响应式场景：多个组件共享数据或者是跨组件传递数据时vuex有哪几种属性1. state：vuex的基本数据，用来"存储变量"2. geeter：从基本数据(state)派生的数据，相当于"state的计算属性"3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一.原创 2021-07-01 11:15:32 · 148 阅读 · 0 评论 -
动态路由的使用——如何动态获取用户路由
创建一个新组件（如：User.vue）2.新建完成后在里面写入所需要的页面内容3 需跳转该页面，所以需要在 idex.js文件中给User.vue这个组件配置映射关系并导入3.1导入：3.2 映射/配置4 在App.vue组件中设置显示方式5 运行起来6 效果如何做到动态路由，在路径后面还可以动态使用用户zhangsan呢？1动态绑定然后在idex.js文件中进行配置（改变之前的就行）下图中abc那儿应该和上图中/..原创 2021-07-01 09:24:06 · 474 阅读 · 0 评论 -
router-link的属性
1. to属性：用于指定跳转的路径<router-link to="/shouye">首页</router-link>2. tag属性：可指定<router-link>之后渲染成什么组件，都行比如想将它渲染成<button>标签(渲染之后依然具有a标签的属性)<router-link to="/shouye" ta="button" >首页</router-link>3. replace属性：可让浏览器左上方的那两个箭头原创 2021-06-30 18:59:54 · 333 阅读 · 0 评论 -
配置路由的映射
1.创建对两个的路由组件2.配置两个映射关系（1）（2）.导入（3）更改第二步3.使用路由：通过<router-link>和<router-view>比如：我们可以设置两个标签，当点击那个标签，在浏览器的网址输入框就会显示那个标签包含的路径url，在网页上也会随之显示该标签对应的网页1.在App.vue中编写两个标签（首页、关于）现在给这两条语句上面（下面）添加一条代码<router-view></router-view>,就会..原创 2021-06-30 17:42:35 · 193 阅读 · 0 评论 -
vue-router的安装与配置
安装vue-router的 步骤1.在src文件夹下创建router文件夹——新建index.js文件（在 此文件中配置所有路由相关的信息）//1.从vue-router中导入vueRouter这个对象importVu二Routerfrom 'vue-router'//从vue 里导入Vueimport Vue from 'vue'//2.使用它//（1）通过vue.use传入插件，来安装这个插件Vue.use(VueRouter)//（2）创建VueRouter对象const原创 2021-06-30 16:40:11 · 185 阅读 · 0 评论 -
什么是路由router,前端渲染，后端渲染，前端路由，后端路由
听课笔记1.路由router路由 是一个网络工程里的专业术语，是一个映射表 ，决定了数据包的指向，它决定数据包从来源到目的地的路径，将输入端的数据转移到合适的输出端后端渲染*就拿淘宝来说，*在淘宝搜索框中输入一个网址url:www.taobao.com，*此时这个url就会传动服务器，服务器会对其进行解析，解析此时需要什么样的网页，判断出此时想要请求的是淘宝的首页，*服务器就会在后台这边通过JSP技术直接写好该网页（包含CSS，HTML，Java(它的作用是：从数据库中 读取数据并将它动态的原创 2021-06-30 16:02:25 · 238 阅读 · 0 评论 -
webpack-图片处理
1.保存两张图片test.jpq和timg.jpg，右击，点击属性，查看图片大小2.将这两张图片复制粘贴到项目的img文件中3.将其中一张作为背景图4.现在来试一下当前文件中能否应用这张图片npm run build指令，回车，会发现报错（因为当前没有合适的loader去处理这个文件） 5 使用loader处理该文件（配置）（1）（2）复制此行代码（3）粘贴到指令运行区，回车，等待安装（4）复制选中的代码，粘贴到webpack.config.js文件中这条语句的意思是：这.原创 2021-06-30 10:12:19 · 242 阅读 · 0 评论 -
webpack-less文件的处理
.原创 2021-06-29 16:36:39 · 201 阅读 · 0 评论