Vue
六代目专机
这个作者很懒,什么都没留下…
展开
-
后台前端简版实现
先加载Home组件 再重定向到welcome welcome页面加载到Home组件的router-view中1.Home.vue<template> <div class="basic-layout"> <div :class="['nav-side', isCollapse ? 'fold' : 'unfold']"> <!-- 系统LOGO --> <div class="logo"> ...原创 2021-11-08 22:29:42 · 512 阅读 · 1 评论 -
JWT的前后端实现
1.什么是JWT以及JWT流程2.后端实现router.post('/login',async (ctx)=>{ try { const {userName,userPwd} = ctx.request.body; //返回指定字段有三种方式 //1.userId userName userEmail state role deptId roleList //2.{'userId'}:1 1返回 //3. findOne(...原创 2021-11-08 22:15:46 · 425 阅读 · 0 评论 -
Vue开发网络请求封装配置
1.config.js(用于网络请求的一些配置)使用vite 在dev命令后面加上--mode 指定模式 后面可以通过获取/** * 环境配置封装 *///获取开发模式 如果没有则默认为productionconst env = import.meta.env.MODE || 'production';//根据获取到的开发模式决定采用哪一种配置//每一个配置里面有上线api地址和mockApi地址const EnvConfig = { dev:{ ba.原创 2021-11-08 21:35:25 · 966 阅读 · 0 评论 -
前端布局与样式-ps左键点击自动选择图层
在ps中选择图层时要注意勾选这两个原创 2021-10-29 23:33:04 · 369 阅读 · 0 评论 -
Vue-Cli的一些配套插件的使用
1.vue-router的使用//router的配置//指定路径和要引用的组件的名字const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', //懒加载 即切换到这个路径才会加载 component: () => import(/* webpackChunkName: "about" *.原创 2021-06-15 21:55:32 · 137 阅读 · 0 评论 -
Vue3的Compoisition API 初览
1.Compoisition APICompositionAPI字面意思是组合API,它是为了实现基于函数的逻辑复用机制而产生的,将组成组件的内容划分为各种逻辑,并将这些逻辑通过Composition Api*(组合APi)来明朗化。2.setup函数如果setup返回一个对象,则该对象的属性将合并到组件模板的渲染上下文中:<template> <div>{{ count }} {{ object.foo }}</div>&l...原创 2021-06-13 10:52:35 · 287 阅读 · 0 评论 -
Vue中的插件
插件就是把通用的功能封装起来 const myPlugin = { // 插件运行的时候走的方法 // app 是vue实例 install(app, options) { app.provide("name", "HZX"); app.directive("focus", { mounted(el) { el.focus(); }, });..原创 2021-06-09 17:53:23 · 114 阅读 · 0 评论 -
自己写一个Vue中的数据校验插件
const app = Vue.createApp({ data() { return { name: "hzx", age: 28 }; }, //自定义的语法 rules: { age: { //自定义的函数 validate: (age) => { return age > 25; }, //校验失败后返回的..原创 2021-06-09 17:46:25 · 133 阅读 · 0 评论 -
Vue中的render函数
render函数主要将template转换为虚拟DOM// template -> render -> h ->虚拟DOM(JS对象) -> 真实DOM -> 真实页面 const app = Vue.createApp({ template: ` <div > <test :level="2"> ..原创 2021-06-09 17:39:34 · 97 阅读 · 0 评论 -
Vue中的teleport传送门功能
1.利用teleport制作mask蒙板<style> .area { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background: green; } .mask {原创 2021-06-09 17:29:18 · 296 阅读 · 0 评论 -
Vue中的自定义指令
1.自定义指令自定义指令就是类似于v-on v-bind那样的指令,只不过是自己定义的2.局部自定义指令const app = Vue.createApp({ //局部指令需要注册后才能使用 directives template: ` <div> <input v-focus/> </div> `, }); /..原创 2021-06-09 17:24:13 · 85 阅读 · 0 评论 -
Vue中的mixin语法
1.mixin语法mixin就是在组件中混入数据的语法 mixin混入组件里没有数据的时候会使用混入的数据 组件data优先级高于mixindata优先级 如果是生命周期函数先执行mixin里面的再执行组件里面的 methods里面的情况和data里面的情况一样2.局部mixinconst app = Vue.createApp({ data() { return { numb...原创 2021-06-09 17:11:43 · 343 阅读 · 0 评论 -
Vue中的状态动画
1.状态动画<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-06-08 22:19:25 · 138 阅读 · 0 评论 -
Vue列表动画的实现
1.列表动画的实现 <style> .v-enter-from { opacity: 0; transform: translateY(30px); } .v-enter-active { transition: all 0.5s ease-in; } .v-enter-to { opacity: 1; transform: translateY.原创 2021-06-08 22:02:22 · 151 阅读 · 0 评论 -
Vue组件和元素的切换动画实现
1.多个单元素标签切换动画// 多个单元素标签之间的切换<style> .v-enter-from{ opacity: 0; } .v-enter-active{ transition: opacity 3s ease-in; } .v-enter-to{ opacity:1; }.v-leave-from{ opacity:1; }.v-leave-acitve{.原创 2021-06-08 20:01:38 · 259 阅读 · 0 评论 -
使用Vue实现单元素单组件的入场和出场动画
1.单元素单组件入场动画<style> // 动画开始时效果 .v-enter-from{ opacity:0 } //动画持续时的效果 .v-enter-active{ transition: all .3s ease-in; } //动画结束时候的效果 .v-enter-to{ opacity:1; }.原创 2021-06-08 17:42:23 · 1323 阅读 · 0 评论 -
Vue动画之transition和keyframes关键帧动画
1.实现keyframes关键帧动画效果利用data控制类名来控制过渡效果。<style> @keyframes leftToRight { 0% { transform: translateX(-100px); } 50% { transform: translateX(-50px); } 100% { transform: t.原创 2021-06-08 15:17:59 · 970 阅读 · 0 评论 -
Vue中的ref和v-once和provide,inject
1.v-oncev-once只会让数据渲染一次,即使再次改变数据也不会再次渲染。const app = Vue.createApp({ data(){ return { count:1 } }, template:` <div @click="count+=1" v-once> .原创 2021-06-07 14:52:03 · 167 阅读 · 0 评论 -
Vue动态组件和异步组件
1.动态组件当我们想要动态切换展示的组件时,就需要动态组件这种语法。可以随时动态切换组件 const app = Vue.createApp({ data() { return { currentItem: "input-item" }; }, methods: { handleClick() { if (this.currentItem === "input-item") { ..原创 2021-05-10 19:21:12 · 66 阅读 · 0 评论 -
Vue中的插槽
1.插槽的作用当我们使用组件的时候,如果想让这个组件展示我们定制的内容,这个时候就需要插槽这个语法了。相当于把自己要展示的内容插入组件const app = Vue.createApp({ data(){ return { text: '提交' } }, template: .原创 2021-05-10 13:07:23 · 67 阅读 · 0 评论 -
v-model中的自定义修饰符
1.自定义修饰符 const app = Vue.createApp({ data() { return { num: "a", }; }, template: ` <div> <counter v-model.uppercase="num"/> </div>`, }); //原创 2021-05-09 11:05:07 · 1209 阅读 · 0 评论 -
Vue中父子组件间如何通过事件进行通信
1.子组件通过事件和父组件进行通信由于Vue中单向数据流的概念,父组件传递给子组件的值,子组件只能展示不能修改,所以需要使用事件与父组件通信修改父组件中的值const app = Vue.createApp({ data(){ return {count:2} }, methods:{ hanldeAddOne(){ this.count +=1;原创 2021-05-09 10:56:17 · 366 阅读 · 0 评论 -
Vue中的Non-props
1.Non-props概念:如果我们不用props属性但是也想使用传过来的值,这就是Non-props的含义。 const app = Vue.createApp({ data() { return { num: 1, }; }, template: ` <div> <counter msg="hello" /> ...原创 2021-05-08 20:41:03 · 226 阅读 · 0 评论 -
Vue中的单向数据流
1.单向数据流单项数据流的概念:子组件可以使用父组件传递过来的数据但是不能修改这个数据原创 2021-05-08 20:17:40 · 1882 阅读 · 0 评论 -
Vue组件间传值及传值校验
1.组件间传值 Vue的组件间传值使用html属性的方式app.component('test',{ // 利用props属性接收传过来的属性值 props:['content'], template: '<div>{{content}}</div>'})//根组件const app = Vue.createApp({ data:{ num: 123 }, template: ..原创 2021-05-08 17:45:00 · 314 阅读 · 0 评论 -
简单了解Vue中的组件
1.组件的定义 组件其实就是把一整个页面分成很多个小的部分,比如一个页面可以分成头部,尾部等等。这样子,就可以像组装零件一样将组件组合起来形成页面,大大提高了代码的复用性,代码组织起来也更有逻辑。2.全局组件 全局组件也就是作用域是全局的组件,也就是在这个页面的任何位置都可以使用的组件<script> //将全局组件hello和world组合起来形成了一个页面 const app = Vue.createApp({ te...原创 2021-05-06 22:23:02 · 135 阅读 · 0 评论 -
Vue基础之生命周期,修饰符
1.生命周期函数 生命周期函数就是在某一时刻会自动执行的函数,Vue有以下这些生命周期函数// 实例生成之前自动执行 beforeCreate() { console.log("beforeCreate"); }, // 实例生成之后自动执行 created() { console.log("Created"); }, // 组件渲染之前自动执行 befor...原创 2021-04-08 21:20:41 · 132 阅读 · 0 评论 -
Vue基础之常用指令
1. v-on: v-on指令是常见指令之一,主要用来在dom上绑定事件。其中v-on: 可以用 @代替例子如下v-on:click="handleClick"2.v-bindv-bind 用来为标签属性绑定动态值,其中v-bind: 可以用 : 代替例子如下// message是动态值v-bind:title="message"3.v-model v-model用来为输入控件双向绑定数据 用户输入改变就会改变绑定的数据 数据改变也会改变控件的展示...原创 2021-03-30 09:41:15 · 112 阅读 · 0 评论