vue系列
文章平均质量分 79
小小liang
一个在深圳捡破烂的前端
展开
-
浅谈用户头像上传
目录<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>后台管理系统</title> <link rel="stylesheet" href="/asset原创 2020-10-03 20:09:39 · 187 阅读 · 0 评论 -
浅谈路由守卫与登录权限相关设置
目录路由守卫路由的执行步骤路由守卫相关权限操作点击当前组件,显示对应title使用路由守卫的方式实现登录跳转判断!**router/index.js**路由的配置**LoginOut.vue**组件 之登录按钮路由守卫作用:监听路由的变化关于更新你点击的页面,显示对应的标题!这就需要在监听路由的跳转,实时的显示对应的标题!官网:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B原创 2020-10-01 20:51:32 · 262 阅读 · 0 评论 -
浅谈vue路由基础
目录路由 VueRouter代表的是网页的一个位置,而#后面的的字符就是该位置的标志符!前端路由和后端路由的区别路由的原理路由的安装和使用使用第一种方式路由的基本使用普通组件和路由组件对象的区别路由的高亮显示和重定向路由的传递参数方式1:?参数方式2:/:id/:name **动态路由**方式3路由的嵌套路由懒加载路由的传递参数 => 方式之编程式导航方式1 **某个组件之中.vue** => 编程式导航路由导航守卫全局前置路由守卫 => 带有next()路由 VueRouter官原创 2020-10-01 19:35:57 · 107 阅读 · 0 评论 -
vue之配置属性
目录Vue配置属性vue配置属性之elvue配置属性之datavue配置属性之methodsVue配置属性之watch使用watch属性监听 firstname + lastname = fullnamewatch监听url路径的变化Vue配置属性之computedcomputed 之 数组的翻转vue配置属性之filters自定义全局过滤器:过滤器(filter)封装一个时间过滤器局部过滤器一个大小写的过滤器人民币3位数的过滤器封装一个小说字数过滤器methods,watch,computed属性的区别原创 2020-10-01 14:48:15 · 666 阅读 · 0 评论 -
vue项目之中的模糊搜索功能
目录对于vue之中的模糊搜索功能后端前端**Shelf.vue****search.vue**对于vue之中的模糊搜索功能需求:后端这是模糊搜索的接口:查询的字段为 titleconst express = require('express');const router = express.Router();const { formatData} = require('../utils/tools');const mongo = require('../utils/mon原创 2020-09-13 21:03:45 · 561 阅读 · 0 评论 -
vue之响应式属性和数据双向绑定
目录响应式数据的原理属性特性之值属性输出特性之存储器属性Vue实例中的响应式数据的原理v-model的原理:响应式数据的原理响应式属性:能监听到修改操作,并更新视图如何设置一个属性为响应式属性(属性特性)值属性:拥有值的属性configurable => 配置属性(一个控制开关)enumerable => 可枚举型writable => 可写性value => 属性的值特别说明:1. 传统方式添加的属性,所有属性特性默认为true2. 通过Obje原创 2020-09-03 22:20:33 · 989 阅读 · 0 评论 -
v浅谈vue之vant框架
目录vant框架的使用使用一个Tabbar 标签栏App.vue封装为一个MainTabbar.vue组件使用一个Swipe 轮播图**Home.vue**组件使用轮播图使用一个 Gird 宫格 实现商品列表展示**Home.vue**组件**goodsDetails.vue**详情页组件商品列表之中 点击图片显示商品的预览 大图片详情页**Details.vue**之中详情页**Details.vue**之购物车先获取到购物车的数据 渲染页面!**store/index.js**渲染页面 **Cart.v原创 2020-09-03 22:11:13 · 3281 阅读 · 4 评论 -
浅谈插槽和修饰符
目录事件修饰符Vue插槽简单的插槽使用默认插槽的使用具名插槽的使用作用域插槽编译时的作用域作用域插槽 之旧版本插槽 之新版本默认插槽具名插槽作用域插槽事件修饰符@click.stop=“事件处理函数”作用:阻住事件冒泡的修饰符@link.prevent=“事件处理函数”作用:阻住a链接的跳转(自动跳转),表单的提交按钮(自动刷新)@click.capture=“事件处理函数”默认的情况下:事件处于冒泡阶段(事件冒泡和捕获只能存在一个)作用: @click.capture 使得原创 2020-09-01 23:02:44 · 157 阅读 · 0 评论 -
vue之element框架的使用
目录vue常见的框架elementUI 饿了么 **常用**使用组件使用组件之layout布局 实现头部使用组件之小图标使用组件之链接使用组件之侧边栏使用组件之表格 => 删除使用组件之表单vue常见的框架封装了大量的组件,以供我们使用!elementUI => PC端 移动端vantUI => 有赞 => 电商项目 移动端iView => 腾讯 => PC端ant-design => 阿里elementUI 饿了么 常用官网:https原创 2020-08-31 22:48:12 · 583 阅读 · 0 评论 -
浅谈路由守卫的权限设置
目录路由守卫路由的执行步骤路由守卫相关操作点击当前组件,显示对应title使用路由守卫的方式实现登录跳转判断!**router/index.js**路由的配置**LoginOut.vue**组件 之登录按钮路由守卫作用:监听路由的变化关于更新你点击的页面,显示对应的标题!这就需要在监听路由的跳转,实时的显示对应的标题!官网:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%原创 2020-08-31 22:36:45 · 702 阅读 · 0 评论 -
浅谈vue两者导航
目录VueRouter结合vue-cli创建路由 =>(route/index.js) =>里面存放着是关于路由的相关!router之中的配置参数显示路由内容之 的配置参数导航声明式导航编程式导航VueRouter结合vue-cli官网:https://router.vuejs.org/zh/创建项目:vue create myvue在package.json之中配置脚本指令 npm start"start":"npm run start创建路由 =>(route原创 2020-08-31 22:35:40 · 161 阅读 · 0 评论 -
浅谈vue-router
目录路由 VueRouter代表的是网页的一个位置,而#后面的的字符就是该位置的标志符!前端路由和后端路由的区别路由的原理路由的安装和使用使用第一种方式路由的基本使用普通组件和路由组件对象的区别路由的高亮显示和重定向路由的传递参数方式1:?参数方式2:/:id/:name方式3路由的嵌套路由懒加载路由的传递参数 => 方式之编程式导航方式1 **某个组件之中.vue** => 编程式导航路由导航守卫全局前置路由守卫 => 带有next()路由 VueRouter官网:https://原创 2020-08-31 22:33:52 · 175 阅读 · 0 评论 -
浅谈vuex
目录Vuexvuex的简单使用**store/index.js****main.js**Vuex内的store对象内的属性state 单一状态树getters 类似于计算属性**store/index.js**文件**其他组件中引用getters中处理后的数据**mutations**store/index.js**文件**其他.vue**文件mutations 的响应式数据mutations 的中的定义常量actions 属性对异步的处理**组件中触发事件****store/index.js**状态管理文原创 2020-08-30 22:25:01 · 240 阅读 · 0 评论 -
浅谈登录和退出
目录登录和退出登录**router/index.js**路由的配置**Login.vue**组件**Home.vue**组件登录和退出需求:1:点击登录的时候,跳转到首页2:假如用户点击的是 用户列表 那么返回到用户列表 => 则需要使用全局路由守卫 记录这个path3:点击退出的时候,返回到登录界面,清空token!登录需求:点击登录的时候,先验证表单把当前的用户名,存储在本地存储之中 (用户名 密码 验证码 token)并且把头部的登录隐藏 显示退出按钮!原创 2020-08-29 09:13:57 · 471 阅读 · 0 评论 -
浅谈登录验证码的前后端处理
目录登录之验证码 和 登录前端方面**LoginOut.vue**组件**router/index.js****network/request.js**后端方面工具库的封装**utils/mongo.js****utils/token.js****utils/tools.js**关于跨域的处理关于后端的 接口的处理 **router/index.js****router/mlogin.js****router/vcode.js**登录之验证码 和 登录需求:一开始显示验证码点击验证码的时候,刷新原创 2020-08-28 17:04:53 · 1726 阅读 · 0 评论 -
Vue组件之style - lang - scoped 和 vue模板 sass安装
目录Vue组件之style - lang - scopedvue模板Vue组件之style - lang - scopedlang这是标明你书写css的样式类型 有着 scss css less 默认是css<style lang="scss"></style>scoped作用:就是设置当前组件的样式,只能在当前组件起作用注意点:就是别的组件修改当前组件的时候,是默认不课被修改的!原因:这是因为webpack打包的时候,会把js,css等文件一起打原创 2020-08-28 17:03:23 · 5206 阅读 · 0 评论