Vue
关注
分享
扫一扫
文章平均质量分 53
一写代码就开心
一起学编程呀，头秃的那种。
学完之后，找一份java，python开发的工作不成问题
展开
-
如何查看 当前安装的vue版本
如果你使用的是 Vue CLI 创建的项目，可以在项目的根目录中找到 package.json 文件。在该文件中，可以查找 “vue” 的依赖项，并查看其版本号。原创 2023-07-08 22:22:34 · 8071 阅读 · 1 评论 -
VUE2.0 学习（二十九）路由router，一篇文章讲清楚vue关于路由的所有东西
目录router概念使用路由安装注册创建两个组件App组件路由配置子组件路由总结路由传参命名路由params 参数如何接收参数router-link的replace属性编程式路由导航pushreplace缓冲路由组件路由身上的特有的生命钩子函数全局路由守卫（权限）独享路由守卫组件内路由守卫history 模式hash模式router概念使用路由安装注册创建两个组件App组件路由配置创建文件，专门写路由文件里面的东西子组件路由总结组件来源切换，就是组件的挂载 和 销毁原创 2021-10-30 17:28:02 · 469 阅读 · 1 评论 -
VUE2.0 学习（二十八）vuex 综合学习，项目中如何使用vuex，一步一步带你使用
目录什么是vuex什么是vuex他是一个插件原创 2021-10-28 21:41:10 · 444 阅读 · 0 评论 -
VUE2.0 学习（二十七）组件中的插槽，默认插槽，具名插槽，作用域插槽
目录默认插槽具名插槽（有名字的插槽）作用域插槽默认插槽我们自己写一个组件，这个组件里面有一个插槽，代码是具名插槽（有名字的插槽）作用域插槽组件A里面的有一个插槽，并且数据是在A组件里面，B组件是要使用A组件，但是B组件要将A组件里面的数据进行不同的展示，数据是一样的，但是展示的格式是不一样的。这个需要咋做先看A组件的写法B组件...原创 2021-10-26 21:46:13 · 244 阅读 · 0 评论 -
VUE2.0 学习（二十六）vue-resource 插件，这个是前段往后端发送请求的插件
目录安装插件使用插件安装插件使用插件原创 2021-10-26 21:15:16 · 214 阅读 · 0 评论 -
VUE2.0 学习（二十五）axios 用这个库往后端发送请求，前段解决跨域问题，不需要麻烦后端
目录安装使用配置代理服务器，解决跨域问题方法一方法二总结安装使用配置代理服务器，解决跨域问题官网找到这个进行配置在这个文件里面配置方法一以上的弊端就是不能配置多个代理方法二总结...原创 2021-10-26 20:49:46 · 139 阅读 · 0 评论 -
VUE2.0 学习（二十四）nextTick这个函数式vue里面的，他的作用是什么
目录总结总结原创 2021-10-25 20:33:18 · 118 阅读 · 0 评论 -
VUE2.0 学习（二十三）消息订阅与发布，也就是各个组件之间互通信，需要借助第三方的库，pubsub.js
目录原理实现安装库发布消息订阅消息原理实现安装库发布消息两个组件之间通信，一个组件是发布消息，一个组件是订阅消息。发布消息的代码是订阅消息原创 2021-10-25 20:30:25 · 176 阅读 · 0 评论 -
VUE2.0 学习（二十二）全局事件总线，也就是各个组件之间互通信
目录原理符合什么要求，才可以做事件总线实现总结实现任意的组件之间的通信原理符合什么要求，才可以做事件总线1 所有的组件都可以看到2 可以调用到 $on $off $emit实现总结原创 2021-10-25 20:03:10 · 162 阅读 · 0 评论 -
VUE2.0 学习（二十一）组件的自定义事件，子传给父数据，解绑自定义事件
目录子传给父数据使用自定义事件进行子给父传参（绑定）第一种写法第二种写法解绑自定义事件组件上面如何使用原生的dom事件总结这个事件是给组件使用的子传给父数据之前我们使用的方法是propos的方式进行儿子给父亲传参。现在使用自定义事件的方式，进行儿子给父亲传数据使用自定义事件进行子给父传参（绑定）第一种写法第二种写法解绑自定义事件组件上面如何使用原生的dom事件直接这样写，组件会将原生的dom 事件当做是自定义的事件总结...原创 2021-10-25 19:31:51 · 169 阅读 · 0 评论 -
VUE2.0 学习（二十）浏览器本地存储localStorage 和 sessionStorage
目录localStoragesessionStorage两者区别localStorage<script type="text/javascript" > let p = {name:'张三',age:18} // 保存一个数据 function saveData(){ localStorage.setItem('msg','hello!!!') localStorage.setItem('msg2',666) localStorage.setItem(原创 2021-10-24 17:15:06 · 2569 阅读 · 0 评论 -
VUE2.0 学习（十九）综合项目，代办事项项目（一）生成随机数，使用nanoid库，需求的确定，各个组件之间的传参
目录使用nanoid库需求思路实现父亲把数据给儿子的方法儿子把数据给父亲使用nanoid库首先是安装 npm install nanoid安装完成之后，以上就安装完成如何使用呢？在自己需要用这个库的组件的页面先引入，因为这个库是分别暴露的，所以引入的时候写法是这样的使用需求实现以上的功能思路写4个组件，头部组件，底部组件，列表组件，列表中每一item组件。APP.vue 组件将头部组件，底部组件，列表组件都引入，这样页面就可以展示出来了因为数据是存在在list里面的，各原创 2021-10-24 16:16:56 · 389 阅读 · 3 评论 -
VUE2.0 学习（十八）利用scoped属性，解决css样式名字冲突
目录问题解决问题vue里面，每一个页面的css样式，最后都汇总到一个文件里面了，那么不同的组件里面的css样式的名字一样咋办，听哪个组件的。解决原创 2021-10-24 14:29:44 · 344 阅读 · 0 评论 -
VUE2.0 学习（十七）自己定义Vue插件
目录使用位置创建一个插件文件使用插件输出作用总结使用位置我们定义完成插件之后，这个插件就是一个js文件，里面的东西就是一个对象，之后需要在main.js里面引入，因为插件需要在vue对象创建之前进行使用。创建一个插件文件使用插件输出输出的是vue的构造函数作用总结以后网上下载的插件，直接在我们的项目里面引入就可以使用...原创 2021-10-23 19:33:02 · 269 阅读 · 0 评论 -
VUE2.0 学习（十六）ref 属性，props属性
目录ref 属性props属性需求实现1（简单接受）实现2（复杂接收）实现3props 属性总结mixins属性（混合）局部引入混合文件全局引入混合文件总结ref 属性在vue项目里面，我们在js里面要获取页面的标签里面的东西，我们不用原生的js语句，我们可以在页面的标签上加一个ref属性，写法如下js里面获取是props属性需求一个组件，多个地方用，但是里面需要渲染的数据是不一样的，那么我们需要在这个组件里面写这个属性，这个属性就是接受传到这个组件里面的东西实现1（简单接受）原创 2021-10-23 19:14:27 · 603 阅读 · 0 评论 -
VUE2.0 学习（十五）用脚手架插件项目，并且对创建的项目的目录进行解释
目录目录分析vue.config.jspages属性lintOnSave 属性设置淘宝镜像，不然下载很慢Vue的学习（十三）用vue cli2这个版本的脚手架创建vue的项目目录分析以上是是刚创建的脚手架，我们什么也没有做了，创建之后打开就是这样的我们启动项目，是在cmd里面进入到这个文件夹里面，然后执行npm run serve.那么执行这个语句，首先找的这个项目的地方是哪里呢？vue.config.js这个文件是自己创建的，也就是在创建了脚手架之后，自己想要改一些基础的配置，原创 2021-10-23 19:14:18 · 166 阅读 · 0 评论 -
VUE2.0 学习（十四）Vue的原型对象，单文件组件
目录原型对象作用单文件组件写vue页面的插件入门的vue页面原型对象作用单文件组件就是以vue为后缀的文件。写vue页面的插件入门的vue页面原创 2021-10-23 15:55:23 · 665 阅读 · 0 评论 -
VUE2.0 学习（十三）Vue组件化编程
目录组件入门代码（非单文件组件）创建组件注册组件（局部注册）注册组件（全局注册）使用组件入门总结组件名字如何起组件的嵌套（入门）VueComponent组件入门代码（非单文件组件）创建组件 // 创建学校组件 const school = Vue.extend({ template:` <div> <h1>{{name}}</h1> &l原创 2021-10-23 14:27:14 · 112 阅读 · 0 评论 -
VUE2.0 学习（十二）Vue的生命周期函数
目录前段的透明度前段的透明度原创 2021-10-18 21:59:06 · 307 阅读 · 0 评论 -
VUE2.0 学习（十一）Vue 中的内置指令，以及自定义的指令
目录之前学过的指令v-textv-htmlv-clock之前学过的指令v-textv-htmlv-clock原创 2021-10-17 18:28:27 · 194 阅读 · 0 评论 -
VUE2.0 学习（十）Vue 中的过滤器
目录js库网站格式化的多个方法通过计算属性实现过滤器实现（局部过滤器）多个过滤器的使用全局过滤器js库网站这个网站里面有很多的第三方的插件，其中对于时间操作的插件是以上的两个插件都可以对时间进行操作这个插件咋用，格式化的多个方法通过计算属性实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-原创 2021-10-17 16:24:12 · 140 阅读 · 0 评论 -
VUE2.0 学习（九）前段进行 列表过滤进行模糊查询，对查询出来的数据进行升序降序
目录使用场景使用watch进行监听的具体代码使用计算属性进行模糊查询升序降序使用场景列表展示的数据比较多，我们想要进行模糊搜索，在这么多的数据里面找到我们需要的。也就是后端一下子把所有的数据都返回，我们前端进行模糊搜索的时候，不会调用后端的接口，直接进行模糊搜索，如何实现使用watch进行监听的具体代码页面遍历过滤后的list数据使用watch进行监听 watch:{ keyword:{ immediate:tru原创 2021-10-14 21:59:12 · 541 阅读 · 0 评论 -
VUE2.0 学习（九）列表渲染v-for，为什么需要写key，key的作用与原理
目录v-for遍历数组v-for 遍历对象总结v-for遍历数组data里面有一个数组，我们要在页面上面进行遍历这个数组v-for 遍历对象总结原创 2021-10-14 20:43:23 · 176 阅读 · 0 评论 -
VUE2.0 学习（八）条件渲染v-show，v-if，template标签
目录需求方法 `属性v-show`v-show动态设置值v-if对比v-else-ifv-elsetemplate标签总结需求根据一定的条件，让页面上面的某一个区域div进行展示，或者不展示方法 属性v-show就是进行判断，vue里面有一个指令v-show，他为true，那么对应的标签就会展示，为false，就不展示v-show的值还可以是表达式，只要表达式的返回值是Boolean值就可以v-show动态设置值v-if他的值也是true或者false对比切换频率高的用v-sho原创 2021-10-13 21:30:03 · 640 阅读 · 0 评论 -
VUE2.0 学习（六）Vue 里面绑定样式，追加样式，对象形式绑定class
目录动态绑定class样式绑定多个，以数组形式绑定，追加样式对象形式绑定class总结动态绑定class样式我们有一个需求，点击了一个按钮，当前的背景进行变化，这个就是动态的绑定样式了。以上就是动态写法，前面的class是固定的，就是基础的样式，我们在后面动态的绑定样式点击事件的方法是以上就动态的绑定样式了绑定多个，以数组形式绑定，追加样式以后我们想要改变样式，或者追加样式，直接动态的改变这个数组就可以了对象形式绑定class对象里面，以true 和 false的形式确原创 2021-10-13 21:02:01 · 736 阅读 · 0 评论 -
VUE2.0 学习（五）一篇文章读懂监听属性watch，他的两种写法，以及深度监视和简写方式
目录监听属性前提使用监视属性的代码（第一种方法监视）handlerimmediatedeep第二种方法监视监视的范围总结监听多级结构中某个属性的变化监视属性的简写方式计算属性和 监听属性的区别总结为什么vue项目里面的定时器，一般写成箭头函数，其他的写成普通函数监听属性前提我们根据前面学过的知识，今天点击一个按钮，页面上面的数据进行变化，直接给按钮一个点击事件，写法是<!DOCTYPE html><html lang="en"><head> <原创 2021-10-12 21:59:43 · 691 阅读 · 0 评论 -
VUE2.0 学习（三）计算属性
目录需求第一个实现方法（插值语法的实现）第二种方法（method方法实现）第三种方法（计算属性）计算属性简写需求页面有3个输入框，第一个输入框写姓，第二个输入框写名，第三个输入框就自动的把前两个输入框的写的东西进行拼接，进行展示，那么实现方法有哪些呢？第一个实现方法（插值语法的实现）以上就实现了只要上面的输入框里面的值变化，那么第三个姓名后面的东西就变化。我们看代码，直接拼接，如果我想要有复杂的变化，比如将输入的东西翻转之后，小写之后再展示，这个是在代码里面可以实现，但是如果把这些都写在原创 2021-10-07 19:27:04 · 439 阅读 · 0 评论 -
VUE2.0 学习（二）键盘事件进行开发
目录键盘事件@keyup如何知道键盘的代码值键盘的tab建只有多个按键一起按下才可以触发事件键盘事件@keyup回车键按下之后弹起才会触发对应的方法如何知道键盘的代码值有的键盘上面的名字是两个单词组成的，有大小写比如有一个按键是CapsLk我们需要都是小写，并且单个单词用- 进行链接键盘的tab建我们想要在按下tab建的时候，触发一个事件方法。那么我们的写法是也就是配合@keydown 进行使用只有多个按键一起按下才可以触发事件其他按键不管用，只有特定的案件按下才可原创 2021-10-07 17:18:23 · 260 阅读 · 0 评论 -
VUE2.0 学习（一）HTML单页面使用vue技术
目录先下载vue.js入门先下载vue.js将开发版本 和 生产版本都下载入门html 页面引入vue.js 之后，全局配置一下，将浏览器控制台的开发者版本的提示给关闭如果我们不配置，代码是 <script type="text/javascript" src="../js/vue.js"></script>以上只是引入，在浏览器控制台会有<!DOCTYPE html><html lang="en"><head&g原创 2021-10-07 11:34:51 · 6150 阅读 · 0 评论 -
vue权限项目（一）创建vue项目，实现登录功能，登录页面的代码的介绍
目录创建vue项目实现登录功能登录页面样式创建vue项目实现登录功能创建登录组件页面创建路由// @ 这个自动会到src文件夹下在vue项目里面 @ 代表的就是src目录以上写完，启动项目，就可以到这个登录页面了登录页面样式我们首先把elementUI官网里面的表单样式复制过来，把登录的按钮也复制过来。开始写公共的样式，在这个文件夹下写样式只是写了公共的样式，如何让所有的vue页面都使用，在main.js里面进行导入// 导入全局样式import './assets/原创 2021-08-14 12:55:54 · 1257 阅读 · 0 评论 -
vue 某一个方法里面数据，要以表单的形式往后端传，如何设置
在main.js 里面全局引入这个，并且全局配置import qs from 'qs' // axios自带的工具不需要安装npm依赖Vue.prototype.$qs=qsthis.$qs.stringify(this.entity), {headers: {'Content-Type':'application/x-www-form-urlencoded'}}以上设置完...原创 2021-05-23 18:42:00 · 369 阅读 · 0 评论 -
vue 中，将对象直接以表单的形式往后端传，只需要在main.js里面加一个配置
只需要在main.js里面写下面的那段代码，那么，以后往后端传的时候，就是表单的形式// 在main.js中配置如下代码axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'axios.defaults.transformRequest = [function (data) { let ret = '' for (const it in data) { ret += encode原创 2021-05-23 18:24:03 · 440 阅读 · 0 评论 -
vue 项目中从session中获取对象，并且使用里面的属性
django后端传给前段一个json对象，vue接收后如何保存在session中，并且可以在其他的页面从session中拿出对象，用这个对象里面的属性后端传值以上是django项目，后端返回给前段的一个json对象前段获取利用JSON.stringify(）这个函数，将后端返回的json格式保存在session中window.sessionStorage.setItem("yhxx",JSON.stringify(res.data.data))保存后我们在浏览器查看现在我们要从这个s原创 2021-05-23 16:41:30 · 8661 阅读 · 0 评论 -
cmd命令如何启动vue项目
确保自己的电脑安装了node环境没有安装的自己百度安装进入到项目里面如果没有这个目录，也是进入这个地址执行npm install这样项目里面就有这个依赖目录了原创 2021-04-05 23:39:36 · 6859 阅读 · 0 评论 -
VUE项目后台管理系统（七）弹框形式新增用户信息，关闭添加用户对话框，重置表单。表单的验证规则
目录弹框关闭添加用户对话框，重置表单表单的验证规则添加的方法弹框页面有一个按钮，一点击，弹出框，并且在这个里面添加数据以上的代码就是官网 的弹框有一个属性默认弹框是false <!-- 添加用户dialog对话框 --> <el-dialog align="left" title="添加用户" :visible.sync="addUserVisible" width="50%" @close="closeAdduserDialog" > <!--原创 2021-04-04 18:35:39 · 1912 阅读 · 0 评论 -
VUE项目后台管理系统（六）分页展示，模糊查询列表，清空输入框后，查询全部数据
目录分页展示模糊查询列表清空输入框后，查询全部数据分页展示官网的拿过来就可以 <!-- 分页功能 --> <el-pagination align="left" @size-change="SizeChange" @current-change="CurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1,2,5,10]" :page-size="queryInfo.pagesize"原创 2021-04-04 17:57:52 · 1554 阅读 · 0 评论 -
VUE项目后台管理系统（五）右边主体中的面包屑展示 和 table表格的展示，编辑删除按钮，标签上面的文字提示
目录面包屑的展示table 表格卡片一行里面不同标签的间隔输入框里面的删除按钮表格的展示开关的展示鼠标放到标签上面的文字提示面包屑的展示从官网找到对应的代码拿到这段代码table 表格卡片如果一行里面有不同的标签，那么这些标签如果有间隔的话，可以使用这些一行里面不同标签的间隔输入框里面的删除按钮在输入框里面只要加了那一个属性就可以了。这个的原理是，只要点击了那个X,那么就会触发事件，我们可以在官网里面找到我们可以绑定这个事件表格的展示从官网找到对应的表格，复制过来原创 2021-04-04 16:50:56 · 747 阅读 · 0 评论 -
VUE项目后台管理系统（四）左边菜单动态展示，不仅可以折叠，而且点击不同的菜单，右边展示不同的页面
目录左边菜单动态的展示左边菜单的属性介绍遍历菜单左边菜单折叠效果不同的菜单右面展示不同的页面左边菜单动态的展示首先后端的接口要返回菜单的list集合，是json格式，我使用的是python接口def getmaenu(request): if request.method == 'GET': data = { "code": 200, "msg": '登录成功', "data":[{原创 2021-04-02 23:47:54 · 5243 阅读 · 0 评论 -
VUE项目后台管理系统（三）退出功能，清除cookie，跳转到首页，控制有cookie才可以进其他页面
目录路由导航守卫路由导航守卫import Vue from 'vue'import VueRouter from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Login from '@/components/Login'Vue.use(VueRouter)const routes= [ { path: '/', name: 'HelloWorld', r原创 2021-03-28 16:58:50 · 1987 阅读 · 0 评论 -
VUE项目后台管理系统（二）登录页面的代码
目录表单的验证规则登录事件钩子函数的写法登录页面，从官网找一个form表单，以上箭头的地方变为我们的表单的验证规则从官网找到，复制到自己的项目里面登录事件前段传的是表单，不是json格式，那么就需要这样写返回给前段的数据钩子函数的写法...原创 2021-03-28 16:26:24 · 629 阅读 · 0 评论