![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue基础
文章平均质量分 95
VillanelleS
Und wenn du lange in einen Abgrund blickst, blickt der Abgrund auch in dich hinein.
Friedrich Nietzsche
展开
-
Vue进阶之Vue项目实战(一)
git hooks提供的pre-commit等,可以在开发的时候,在提交对应的时机,发生一些作用。2.创建文件pre-commit.mjs 在husky/pre-commit.mjs。pre-commit:预提交 执行提交后会先预提交一下,失败的话全部打回,不会提交。husky是一个钩子工具,但是钩子本身不是husky的,钩子是属于git的。加依赖,devDependencies加。以后写脚本的时候可以尝试用zx写。node版本:20.11.1。pnpm版本:9.0.4。帮助轻松拦截hooks。原创 2024-05-03 14:30:30 · 1340 阅读 · 0 评论 -
Vue2进阶之Vue2高级用法
App.vuemain.jsApp.vuemain.jsglobal注入到new Vue实例上,然后在App.vue的实例中执行自己当前的data与Vue实例执行顺序有关,先进行当前实例化声明(全局注入),然后再实例化声明的时候注入我们内部的mixin,是外部的的global更高一点像Vue-router、Vuex等也是插件,通过插件注入进去的Vue-routerVue-router关于插件的内容Vuexinstall的方法,将全部内容挂载到Vue的构造函数上,通过use方法挂载到Vue实原创 2024-04-18 09:23:50 · 1180 阅读 · 0 评论 -
Vue2项目练手——通用后台管理项目第八节
全部代码:Login.vue全部代码:CommonAside.vue全部代码:router/index.js全部代码:全部代码:CommonHeader.vue全部代码:main.js全部代码:项目到此Vue2部分也就结束了原创 2023-09-08 11:34:32 · 448 阅读 · 0 评论 -
Vue2项目练手——通用后台管理项目第七节
新增的代码:mock.js全部代码:全部代码:安装cookie全局代码:router/index.js全部代码:mock.js全部代码:api/index.js全部代码:Login.vue全部代码:CommonHeader.vue全部代码:原创 2023-09-07 16:22:55 · 918 阅读 · 3 评论 -
Vue2项目练手——通用后台管理项目第六节
使用的组件和前面的表格使用的一致。mock.js新增代码:全部代码:index.js新增代码全部代码:Users.vue新增代码全部代码:新增和编辑功能Users.vue新增代码:全部代码:新增代码:全部代码:原创 2023-09-07 10:36:27 · 470 阅读 · 0 评论 -
Vue2项目练手——通用后台管理项目第五节
src/components/CommonAside.vuesrc/components/CommonHeader.vueMain.vue全部代码:tabs.js全部代码:原创 2023-09-01 17:47:56 · 1616 阅读 · 2 评论 -
Vue2项目练手——通用后台管理项目第四节
mock官方文档前端用来模拟后端接口的工具,通过拦截前端发起的请求,自己定义一些数据src/api/mockServeData/home.jsmain.js安装echarts柱状图:饼状图全部代码:原创 2023-09-01 10:54:52 · 1139 阅读 · 0 评论 -
Vue2项目练手——通用后台管理项目第三节
Home.vue全部代码:axios中文文档下载axiossrc/utils/request.jsHome.vue原创 2023-08-31 17:54:26 · 625 阅读 · 2 评论 -
Vue2项目练手——通用后台管理项目第二节
路由重复跳转会出现bug解决路由重复bug问题:CommonAside.vue顶部header组件搭建与样式修改右边用户菜单栏使用的组件store/tab.jsmain.jsCommonHeader.vueCommonAside.vueMain.vue原创 2023-08-30 16:58:29 · 846 阅读 · 0 评论 -
Vue2项目练手——通用后台管理项目第一节
有时候会出现版本不一致不能运行的情况。先vue create创建一个项目,然后安装element-ui组件和vue-router,less等组件main.jspages/Users.vuepages/Main.vuepages/Home.vuepages/Login.vueApp.vueApp.vueCommonAsidesrc/pages/Mall.vuesrc/pages/pageOne.vuesrc/pages/PageTwo.vuesrc/com原创 2023-08-26 17:23:36 · 1570 阅读 · 0 评论 -
Vue基础27之VueUI组件
基于Vue框架的国产UI组件(饿了么出品)原创 2023-03-21 16:34:52 · 674 阅读 · 0 评论 -
Vue基础26之路由第五节
对于一个url来说,什么是hash值?——#及其后面的内容就是hash值hash值不会包含在http请求中,即:hash值不会带给服务器hash模式:(1)地址中永远带着#号,不美观(2)若以后将地址通过第三方手机app分享,若app校验合格,则地址会被标记为不合法(3)兼容性较好history模式(1)地址干净,美观(2)兼容性和hash模式相比略差(3)应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。原创 2023-03-21 15:07:59 · 586 阅读 · 0 评论 -
Vue基础25之路由第四节
HomeMessage.vueBanner.vue补充一个$router的api:gogo函数的参数表示浏览器历史记录前进/后退几步(正数为前进,负数为后退)缓存路由组件Home.vueHomeNews.vueHomeMessage.vue两个新的生命周期钩子保留缓存组件功能后新增的需求HomeMessage.vueHome.vue独享路由守卫src/router/index.js组件内路由守卫About.vue组件内守卫:原创 2023-03-21 09:49:31 · 574 阅读 · 0 评论 -
Vue基础24之路由第三节
作用:让路由组件更方便的收到参数。原创 2023-03-16 16:45:16 · 427 阅读 · 0 评论 -
Vue基础23之路由第二节
作用:可以简化路由的跳转如何使用(1)给路由命名:name : 'hello' , //给路由命名 path : 'welcome' , component : Hello } ] } ] } ](2)简化跳转--简化前,需要写完整的路径--> < router-link to = " /demo/test/welcome " > 跳转原创 2023-03-16 11:56:41 · 670 阅读 · 0 评论 -
Vue基础22之路由第一节
编写router配置项://引入VueRouter import VueRouter from "vue-router";//引入路由组件 import About from "@/components/About";//创建router实例对象,去管理一组一组的路由规则并暴露router export default new VueRouter({实现切换(active-class可配置高亮样式)原创 2023-03-15 17:08:35 · 631 阅读 · 0 评论 -
Vue基础21之Vuex第二节
Persons.vuesrc/store/index.jsCalculation.vuePersons.vueApp.vuesrc/store/countOptions.jsmain.jssrc/store/index.jsPersons.vueCalculation.vueApp.vue原创 2023-03-14 15:00:20 · 380 阅读 · 0 评论 -
Vue基础20之Vuex第一节
Calculation.vuesrc/store/index.jsApp.vuestore/index.jsCalculation.vue借助mapState生成计算属性,从state中读取数据(对象写法)Calculation.vue借助mapState生成计算属性,从state中读取数据(数组写法)Calculation.vue(2)在main.js中创建vm时传入store配置项基本使用(1)初始化数据、配置actions、配置mutatio原创 2023-03-14 10:04:02 · 150 阅读 · 0 评论 -
Vue基础19之插槽
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件分类:默认插槽、具名插槽、作用域插槽使用方式:(1)默认插槽:父组件中:< Category > < div > html结构1 < Category > < div > html结构1 < div > html结构1原创 2023-03-07 15:39:26 · 265 阅读 · 0 评论 -
Vue基础18之github案例、vue-resource
以this.dataObj为主,依次替换this.info中的属性的值,但是this.dataObj中没有的数据,还是沿用this.info中的。this.info,…this.dataObj}:通过字面量的形式合并一下对象。与axios一致,只需要将axios替换成this.$http就行。5.vue-resource(插件库)对xhr的封装。在index.html中使用link引入。"用户输入的内容不得为空""用户输入的内容不得为空""用户输入的内容不得为空"原创 2023-03-06 18:09:41 · 1081 阅读 · 0 评论 -
Vue基础17之配置代理
优点:配置简单,请求资源时直接发给前端(8080)即可。缺点:不能配置多个代理,不能灵活的控制请求是否走代理。工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)原创 2023-03-06 15:24:25 · 4516 阅读 · 0 评论 -
Vue基础16之过度与动画、TodoList-动画效果
TransitionEffect.vueMoreTransition.vueThirdAnimation.vue作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名。图示:写法:(1)准备好样式:(2)使用包裹要过度的元素,并配置name属性:(3)备注:若有多个元素需要过度,则需要使用:,且每个元素都要指定key值在清单被添加时与删除时候加上动画MyList.vue原创 2023-02-27 12:06:12 · 828 阅读 · 0 评论 -
Vue基础15之消息订阅与发布、TodoList消息订阅与发布、TodoList编辑功能
School.vueStudent.vue(4)提供数据:pubsub.publish(‘xxx’,数据)(5)最好在beforeDestroy钩子中,用pubsub.unsubscribe(pid)去App.vueMyItem.vueApp.vueMyItem.vueMyList.vue使用this.$set(对象名,“属性值”,设置值) 来增加对象的属性,使得Vue能够检测到数据变化,有get和set方法MyItem.vuenextTick指定的回调函数会在dom原创 2023-02-22 16:47:01 · 348 阅读 · 0 评论 -
Vue基础14之TodoList组件自定义事件、全局事件总线、TodoList全局事件总线
App.vueHeader.vueFooter.vueApp.vueMyHeader.vueMyFooter.vue使用一个中间者x组件作为桥梁,实现任意组件之间能够通信main.js实现Student.vue与School.vue组件之间通信School.vueStudent.vueVue原型身上的$on,$off,$emit不仅VC能调用到,Vm也可以但是以下写法会报错:因为new Vue代码执行完毕后,意味着整个App组件(包括子组件School)都放到页原创 2023-02-21 15:05:38 · 918 阅读 · 0 评论 -
Vue基础13之浏览器本地存储、TodoList本地存储、组件自定义事件
关闭浏览器之后重新打开,数据仍还在,除非自行清除内存数据会话存储只能在一次会话中保存数据,浏览器关闭标志着一次会话的结束,所以,关闭浏览器后,保存的数据就不在了使用watch对todos进行监视,并将每次修改都存放在localStorage中School.vueStudent.vueTeacher.vueStudent.vueSchool.vueStudent.vueStudent.vue在Student上销毁Student.vue在App上可以绑定销毁原创 2023-02-17 14:20:34 · 849 阅读 · 0 评论 -
Vue基础12之TodoList案例第二篇
跟勾选框那个类似List.vueItem.vuereduce专门做条件统计的可以筛选出数组中想要的,例如,学生中年龄大于18的,订单中金额大于1000的,一堆人中男士有几个人等等局部代码:整体代码:结果展示:操作分析:比如有两项的todo都已完成,则todo.done有两项是true,使用reduce并对每次的todo.done进行判断,则最后的x值为2Footer.vueFooter.vue清除已完成任务App.vueFooter.vue原创 2023-02-08 15:50:24 · 708 阅读 · 0 评论 -
Vue基础11之TodoList案例第一篇
样式结构:Header.vueList.vueItem.vueFooter.vue初始化列表List.vueItem.vueHeader.vueList.vueList.vueItem.vue在Item.vue中的checkbox使用v-model双向绑定,虽然也能实现功能,但是不推荐,因为有点违反原则,因为修改了props值,Vue的检测是浅度检测,props中是todo对象时,使用todo.done改值后,地址值并没有修改,则Vue检测不到,所以未报错原创 2023-02-06 16:15:00 · 513 阅读 · 0 评论 -
Vue基础10之插件、scoped与lang的样式
作用:让样式在局部生效,防止冲突写法:原创 2023-01-31 09:26:37 · 597 阅读 · 0 评论 -
Vue基础9之脚手架的使用、ref属性、props配置项和mixin混入
文件目录介绍package.json文件main.jsassests文件index.html页面-- 针对IE浏览器的一个特殊配置,含义是让IE浏览器以最高的渲染级别渲染页面 --> < meta http-equiv = " X-UA-Compatible " content = " IE=edge " >原创 2023-01-17 17:30:30 · 1131 阅读 · 0 评论 -
Vue基础8之Vue组件化编程、非单文件组件与单文件组件
h2>学校地址:{{address}}学生姓名:{{name}}学校地址:{{address}}学校地址:{{address}}学校名称:{{name}}学校名称:{{schoolName}}学校名称:{{name}}学生姓名:{{name}}老师姓名:{{name}}学校名称:{{name}}原创 2022-12-23 15:54:17 · 1053 阅读 · 0 评论 -
Vue基础7之生命周期
用定时器实现错误:用methods实现原因:所以上述方法不可行生命周期:没有加template时的效果:使用template时候的效果:常用的生命周期钩子:关于销毁Vue实例:原创 2022-12-20 17:58:46 · 503 阅读 · 0 评论 -
Vue基础6之收集表单数据、过滤器、内置指令和自定义指令
收集表单数据:过滤器调用步骤:script调用步骤:过滤器:定义:对要显示的数据进行特定格式化后显示(适用于一些简单逻辑的处理)语法:备注:我们学过的指令:v-bind:单向绑定解析表达式,可简写为 :xxxv-model:双向数据绑定v-for:遍历数组/对象/字符串v-on:绑定事件监听,可简写为@v-if:条件渲染(动态控制节点是否存在)v-else:条件渲染(动态控制节点是否存在)v-show:条件渲染(动态控制节点是否展示)v-text 指令:可以解析 html原创 2022-12-18 14:26:07 · 719 阅读 · 0 评论 -
Vue基础5之绑定样式、条件渲染、列表渲染与Vue检测数据改变的原理
v-for指令:若在列表中同时存在输入框时会出现以下问题:出现问题的原因是Vue在生成虚拟dom时候使用对比(diff)算法,下面是运行过程图:就能得到正确结果,其运行过程如下所示:面试题:Vue、React中的key有什么作用? (key的内部原理)原创 2022-11-23 23:57:07 · 291 阅读 · 0 评论 -
Vue基础4之计算属性与监视属性
并限制姓的长度不满足插值语法的简洁要求计算属性:千万不能将fullName理解成函数调用,fullName是vm的属性第二种用计算属性的写法加上控制台输出没有控制台输出在绑定事件时候,@xxx=“yyy” ,调用函数是一个语句时候,yyy可以直接写成语句第三种用监视属性写监视属性监视属性watch:当创建实例时候不知道要监测谁,后续根据用户行为是否监视再进行添加深度监视深度监视:(1)Vue中的watch默认不监测对象内部值的改变(一层)(2)配置deep:true可原创 2022-11-17 19:43:03 · 488 阅读 · 0 评论 -
Vue基础3之事件处理
事件的基本使用:Vue中的事件修饰符:a标签的页面不会跳转showTip事件不会触发不使用self时候,点击按钮,会发生冒泡,打印两次,但是event.target还是button事件,所以两次输出的当前操作的元素都是button事件使用self时候,点击按钮,但是由于外层的div当前操作元素是button不是div,所以外层即便冒泡也不会打印输出鼠标滚轮滚动,即便滚动到最底部,也能依旧触发该事件,但是如果是页面滚动条事件的话,到底部之后就再不会触发该事件了。正常运行原创 2022-11-08 10:49:25 · 3885 阅读 · 0 评论 -
Vue基础2之MVVM模型和数据代理
VM:视图模型(ViewModel):Vue实例对象。通过一个对象代理对另一个对象中属性的操作(读/写)//控制属性是否可以被修改,默认值是false。//控制属性是否可以被删除,默认值是false。M:模型(model):对应data中的数据。//控制属性是否可以枚举,默认值是false。V:视图(View):模板代码。"有人读取age属性了""有人修改age属性了"// age不能枚举。// age不能修改。// age不能删除。原创 2022-10-12 18:17:28 · 369 阅读 · 0 评论 -
Vue基础1之Vue的特点、第一个实例、模板语法和数据绑定
console.log("函数的this对象是Vue对象,",this) //此处的this是Vue的实例对象。//data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。// data的第二种写法:函数式 经常用于Vue组件中。// name:"幸福中学"// name:"张三"// name:"张三"//data的第一种写法。//此处的this是Vue的实例对象。// data的第一种写法:对象式。原创 2022-10-12 10:11:24 · 370 阅读 · 0 评论