![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
文章平均质量分 82
心醉瑶瑾前
不知乘月几人归,落月摇情满江树。
展开
-
VUE3 TypeError: Cannot read properties of undefined (reading ‘push‘) 错误提示
VUE 3 TypeError: Cannot read properties of undefined (reading ‘push‘) 错误提示 的解决方案之一原创 2022-06-25 21:25:28 · 3396 阅读 · 0 评论 -
关于vue+axios+jwt登录的问题
JWT Filterpackage com.zuijin.vue2blog.component;import com.zuijin.vue2blog.common.utils.JwtUtil;import com.zuijin.vue2blog.service.UserComDetailsService;import org.springframework.beans.factory.annotation.Value;import org.springframework.security.aut原创 2022-05-08 13:47:59 · 776 阅读 · 0 评论 -
博客网页代码块渲染-显示行号,一键复制,全屏显示,mac风格(基于mavon-editor或wangEditor)
效果预览亮点:mac风格代码块,一键复制,全屏浏览,点击按住文字空白区域可左右滑动(感觉有待优化),双击关闭全屏浏览。。。。。。样式可自行优化前提条件(待渲染的代码块格式)<pre> <code > print("hello world") print("我是醉瑾”) </code></pre>code为pre的直接子元素,code除了代码文本无直接子元素。pre元素不需要任何类名,实际上wangEditor的编辑器输出中代码块格原创 2022-04-29 14:40:46 · 2570 阅读 · 4 评论 -
VUE学习(二十二)、路由
VUE学习(二十二)、路由一、路由的基本使用1、安装路由插件,在main.js中使用插件main.js(下同)//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'//引入VueRouterimport VueRouter from 'vue-router'//引入路由器import router from './router'//关闭Vue的生产提示Vue.config.productionTip = fal原创 2022-02-11 13:12:27 · 723 阅读 · 0 评论 -
VUE学习(二十一)、Vuex(getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码)
VUE学习(二十一)、Vuex(getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码)一、Vuex普通实现求和案例演示实现1、引入Vuex(store文件下index.js)//该文件用于创建Vuex中最为核心的storeimport Vue from "vue";/* 此处不写在App.vue中的原因 是因为应该先Vue.use(Vuex)再创建store实列对象 但是es6规定import语句先执行,原创 2022-02-10 14:38:51 · 816 阅读 · 0 评论 -
VUE学习(二十)、插槽
VUE学习(二十)、插槽一、默认插槽1、Category.vue<template> <div class="category"> <h3>{{title}}分类</h3> <!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) --> <slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot> </div></template><script原创 2022-02-08 13:01:18 · 313 阅读 · 0 评论 -
VUE学习(十九)、Github用户搜索案例
VUE学习(十九)、Github用户搜索案例演示项目文件1、main.js//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'//关闭Vue的生产提示Vue.config.productionTip = false//创建vmnew Vue({ el:'#app', render: h => h(App), beforeCreate() { // 挂载全局事件总线 Vue.prototyp原创 2022-02-08 10:01:28 · 188 阅读 · 0 评论 -
VUE学习(十八)、VUE脚手架配置代理
VUE学习(十八)、VUE脚手架配置代理前提是后端已存在一、App.vue<template> <div> <button @click="getStudents">获取学生信息</button> <button @click="getCars">获取汽车信息</button> </div></template><script>import原创 2022-02-07 19:42:52 · 362 阅读 · 0 评论 -
VUE学习(十七)、Vue封装的过度与动画
VUE学习(十七)、Vue封装的过度与动画Vue封装的过度与动画作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。图示:写法:准备好样式:元素进入的样式:v-enter:进入的起点v-enter-active:进入过程中v-enter-to:进入的终点元素离开的样式:v-leave:离开的起点v-leave-active:离开过程中v-leave-to:离开的终点使用<transition>包裹要过度的元素,并原创 2022-02-07 17:45:25 · 730 阅读 · 2 评论 -
VUE笔记文章列表
VUE笔记文章列表1、VUE学习(一)、基于简单js引入的Vue快速入门——简单实例使用_醉瑾_的博客-CSDN博客2、VUE学习(二)、计算属性vs侦听属性——基于案例的对比_醉瑾_的博客-CSDN博客3、VUE学习(三)、绑定样式——class和style_醉瑾_的博客-CSDN博客4、VUE学习(四)、条件渲染——v-if与v-show_醉瑾_的博客-CSDN博客5、VUE学习(五)、列表渲染之:key原理、列表过滤、列表排序_醉瑾_的博客-CSDN博客6、VUE学习(六)、vue 监测数原创 2022-02-07 09:49:33 · 672 阅读 · 0 评论 -
VUE学习(十六)、全局事件总线及TodoList案例事件总线实现
VUE(十六)、全局事件总线及TodoList案例事件总线实现1、父给子传 props、全局事件总线(没必要)2、子给父传 props(父亲先给儿子一个函数,儿子调用这个函数)、自定义事件、全局总线(没必要)3、多层传递 适合用全局事件总线思想:创建一个用于全局可访问的组件(没有其他作用,仅作为数据传递),再将VUE原型上添加一个值为这个组件对象,一般称之为$bus1、main.js//引入Vueimport Vue from "vue";//引入Ap原创 2022-02-07 09:32:57 · 190 阅读 · 0 评论 -
VUE学习(十五)、组件自定义事件及todoList案例自定义事件完成
VUE学习(十五)、组件自定义事件及todoList案例自定义事件完成项目文件组件的自定义事件一种组件间通信的方式,适用于:子组件 ===> 父组件使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。绑定自定义事件:第一种方式,在父组件中:<Demo @zuijin="test"/> 或 <Demo v-on:zuijin="test"/>第二种方式,在父组件中:<Demo ref原创 2022-02-07 09:27:46 · 159 阅读 · 0 评论 -
VUE学习(十四)、TodoList案例(基于props实现组件间通信通)
VUE学习(十四)、TodoList案例(基于props实现组件间通信通)一、案例演示二、案例组件目录[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iazGFqL3-1643951037720)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220203094643969.png)]三、编码1、MyFooter组件<template> <div clas原创 2022-02-04 13:09:09 · 374 阅读 · 0 评论 -
VUE学习(十三)、ref属性、props配置项、minix混入、自定义插件、scoped样式
VUE学习(十三)、ref属性、props配置项、minix混入、自定义插件、scoped样式一、ref属性<template> <div> <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button> <School ref="sch"/> </div></tem原创 2022-02-02 09:44:53 · 408 阅读 · 0 评论 -
VUE学习(十二)、vue脚手架的使用
VUE学习(十二)、vue脚手架的使用一、安装vue-cli1、配置淘宝镜像配置淘宝镜像防止有时候安装脚手架网络卡顿npm config set registry https://registry.npm.taobao.org2、全局安装@vue/clinpm install -g @vue/cli3、创建一个项目vue create hello-world(vue版本、语法转换、语法检查)4、启动项目npm run serve访问生成地址即可5、也可使用vue ui命原创 2022-01-30 09:56:52 · 1596 阅读 · 0 评论 -
VUE学习(十一)、组件——非单文件组件、单文件组件
VUE学习(十一)、组件——非单文件组件、单文件组件一、非单文件组件一个文件包含有n个组件1、基本使用<body> <!-- Vue中使用组件的三大步骤: 一、定义组件(创建组件) 二、注册组件 三、使用组件(写组件标签) 一、如何定义一个组件? 使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别; 区别如下: 1.el不要写,原创 2022-01-28 22:29:00 · 1340 阅读 · 0 评论 -
VUE学习(十)、生命周期
VUE学习(十)、生命周期1、生命周期<body> <!-- 生命周期: 1.又名:生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或 组件实例对象。 --> <!-- 准备好一个容器--> <div id="root"> <h2 v原创 2022-01-27 20:14:25 · 138 阅读 · 0 评论 -
VUE学习(九)、内置指令、自定义指令
VUE学习(九)、内置指令、自定义指令1、v-text指令<body> <!-- 我们学过的指令: v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染(动态控制节点是否存存在) v-else : 条件渲染(动态控制节点是否存存在) v-show : 条件渲染 (动态控制节原创 2022-01-27 16:23:39 · 101 阅读 · 0 评论 -
VUE学习(八)、过滤器
VUE学习(八)、过滤器过滤器: vue3已经不推荐使用过滤器 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}} 2.使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名” 备注:原创 2022-01-27 10:10:01 · 895 阅读 · 0 评论 -
VUE学习(七)、收集表单数据
VUE学习(七)、收集表单数据收集表单数据: 若:<input type=“text”/>,则v-model收集的是value值,用户输入的就是value值。 若:<input type=“radio”/>,则v-model收集的是value值,且要给标签配置value值。 若:<input type=“checkbox”/> 1.没有配置input的value属性,那么收集的就是checked(勾选 or原创 2022-01-26 18:03:33 · 214 阅读 · 0 评论 -
VUE学习(六)、vue 监测数据改变原理
Vue监视数据的原理: 1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性,Vue默认不做响应式处理 (2).如需给后添加的属性做响应式,请使用如下API: Vue.set(target,propertyName/index,value) 或 vm.$set(target,propertyName/index,value原创 2022-01-23 21:34:39 · 960 阅读 · 2 评论 -
VUE学习(五)、列表渲染之:key原理、列表过滤、列表排序
VUE学习(五)——列表渲染之:key原理、过滤、排序1、认识基本列表——v-for指令遍历列表<!-- v-for指令: 1.用于展示列表数据 2.语法:v-for="(item, index) in xxx" :key="yyy" in 和 of 都是一样的 3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)--><html> <head> <meta charset="UTF-8" /> <t原创 2022-01-02 20:25:23 · 896 阅读 · 0 评论 -
VUE学习(四)、条件渲染——v-if与v-show
VUE学习(四)、条件渲染——v-if与v-show1、简单认识v-if与v-show<body><div id="app"> <!-- a=!a 取反操作 --> <button @click="vif=!vif">切换显示隐藏</button> <div v-if="vif" style="background-color: red; width: 200px; height原创 2021-12-31 15:26:44 · 1677 阅读 · 0 评论 -
VUE学习(三)、绑定样式——class和style
VUE学习(三)、绑定样式——class和style绑定样式: 1. class样式 写法:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于:类名不确定,要动态获取。 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。 数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。 2. style样式 :style="{fontSize: xxx}"其中xxx是动态值。 :style="[a,b]"其中a、b是样式对象(如下边 vue原创 2021-12-30 09:57:39 · 1002 阅读 · 0 评论 -
VUE学习(二)、计算属性vs侦听属性——基于案例的对比
VUE学习(二)、计算属性vs侦听属性——基于案例的对比一、姓名案例——计算属性1、插值语法实现<body> <!-- 准备好一个容器--> <div id="root"> <!-- v-model是v-model:value简写 --> <!-- {{xx}} 插值语法中可以实现各类需求,如firstName大写 firstName.toUpperCase()等等功能 但是,这会使{{}}中的内容变得臃肿混乱,此时原创 2021-12-29 20:38:44 · 461 阅读 · 0 评论 -
VUE学习(一)、基于简单js引入的Vue快速入门——简单实例使用
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。原创 2021-12-29 14:23:32 · 2449 阅读 · 0 评论