![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue前端
文章平均质量分 85
neneduck
不管何时何地,永远保持热爱,永远积极向上!!!
展开
-
前端vue入门(纯代码)36_history和hash模式
对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。hash模式:地址中永远带着#号,不美观。若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。兼容性较好。history模式:地址干净,美观。兼容性和hash模式相比略差。应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。转载 2023-07-25 21:32:44 · 84 阅读 · 0 评论 -
前端vue入门(纯代码)35_导航守卫
星光不问赶路人,时光不负有心人。原创 2023-07-24 16:43:29 · 118 阅读 · 0 评论 -
前端vue入门(纯代码)34_两个新的生命周期钩子
1、可以让不展示的路由组件保持挂载,不被销毁2、当组件在< keep-alive >内切换,它的 activated 和 deactived 这两个生命周期钩子函数将会被对应执行。3、如果同时使用include,exclude,那么exclude优先于include, 下面的例子Cats组件不会被挂载原创 2023-07-14 23:03:20 · 90 阅读 · 0 评论 -
前端vue入门(纯代码)33_缓存路由组件
如果我一贫如洗,你将会是我最后一件行李。原创 2023-07-14 18:57:49 · 134 阅读 · 0 评论 -
前端vue入门(纯代码)32_编程式路由导航
星光不问赶路人,时光不负有心人。原创 2023-07-14 15:43:01 · 335 阅读 · 0 评论 -
前端vue入门(纯代码)31_route-link的repalce属性
如果夜里十二点我还回你消息,那么意味着什么,意味着我是真的很喜欢玩手机。原创 2023-07-13 22:24:54 · 334 阅读 · 0 评论 -
前端vue入门(纯代码)30_路由的props配置
喜欢的东西太贵了,我一咬牙,狠下心决定不喜欢了!原创 2023-07-12 23:38:47 · 191 阅读 · 0 评论 -
前端vue入门(纯代码)29_路由的params参数
手机里的钞票薄情寡义,身上的赘肉不离不弃!原创 2023-07-12 13:56:46 · 325 阅读 · 0 评论 -
前端vue入门(纯代码)28_路由的命名
不要问我借钱,大家都是同样的年纪,你没有钱,我能有吗?原创 2023-07-11 20:17:00 · 246 阅读 · 0 评论 -
前端vue入门(纯代码)27_路由的query参数
传递参数-- 跳转并携带query参数,to的字符串写法 --> < router-link :to = " /home/message/detail?id=666&title=你好 " > 跳转 < router-link :to = " {query:{id:666,title:'你好'} " > 跳转原创 2023-07-11 19:45:34 · 412 阅读 · 0 评论 -
前端vue入门(纯代码)26_多级路由
如果耐不住寂寞,你就看不到繁华。原创 2023-07-10 22:24:39 · 251 阅读 · 0 评论 -
前端vue入门(纯代码)25_路由vueRouter
一个路由就是一组映射关系key为路径,value可能是function或Component。原创 2023-07-10 14:08:01 · 142 阅读 · 0 评论 -
前端vue入门(纯代码)24_Modules
目的:让代码更好维护,让多种数据分类更加明确。修改store.jsnamespaced : true , //开启命名空间 state : {namespaced : true , //开启命名空间 state : {//方式一:自己直接读取 this . $store . state . personAbout . list //方式二:借助mapState读取: ... mapState('countAbout' , [ 'sum' , 'school' , 'subject' ]) ,原创 2023-07-08 19:39:43 · 474 阅读 · 0 评论 -
前端vue入门(纯代码)23_多组件共享
我不喜欢去银行,就好像太监不喜欢去妓院一样,有些东西你没有,去了也是难受。原创 2023-07-07 17:27:48 · 265 阅读 · 0 评论 -
前端vue入门(纯代码)22_四个map
女为悦己者容,男为悦己者穷。!!!原创 2023-07-06 23:01:00 · 96 阅读 · 0 评论 -
前端vue入门(纯代码)21_vuex
努力不一定成功,但是,不努力一定很轻松!!!原创 2023-07-06 16:39:55 · 162 阅读 · 0 评论 -
前端vue入门(纯代码)20
总以为自己还很年轻,却忽略了岁月的脚步,当身边的一道道风景变成了回忆,才忽然发现,风景依然在,而人已非少年。!!!原创 2023-07-04 20:47:47 · 265 阅读 · 0 评论 -
前端vue入门(纯代码)19
html结构1子组件中:-- 定义插槽 -->插槽默认内容...父组件中:html结构1html结构2原创 2023-06-30 18:05:47 · 431 阅读 · 0 评论 -
前端vue入门(纯代码)18
vue-resource插件的使用原创 2023-06-29 16:28:52 · 302 阅读 · 0 评论 -
前端vue入门(纯代码)17
: 引入第三方样式库bootstrap.css。 并在文件中引入:拆分改写完后,展示:github接口地址:【】这是github维护的一个简单测试接口,其中xxx为:输入的内容,github接口就会返回xxx相关的数据。axios的get请求url拼接参数有2种方式:方式1:字符串+拼接方式2:采用ES6语法,地址字符串采用反单引号【``】,同时使用**【${}】**【不是单引号,不是单引号!!!】目前效果的展示以及动图中两个错误的解决办法如下:请求数据解释:目前代码为:然后,原创 2023-06-28 18:15:03 · 309 阅读 · 0 评论 -
前端vue入门(纯代码)16
是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应,也就是说,jQuery中ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。是 XMLHttpRequest 的升级版,使用js脚本发出网络请求,但是与 XMLHttpRequest 不同的是,fetch 方式使用 Promise,相比 XMLHttpRequest 更加简洁,是为了取代传统xhr的不合理的写法而生的。原创 2023-06-27 21:46:16 · 269 阅读 · 0 评论 -
前端vue入门(纯代码)15
1、准备样式① 过度样式② 动画样式定义动画使用动画v-enter-active:进入过程中的动画v-leave-active:离开过程中的动画2、使用包裹要过度的元素知识补充: 关键帧 @keyframes 动画名 { … } 让包裹的元素一开始就有出场动画【有以下两种方式,but如果写成了,没有冒号,那等式右边的就成一个字符串,所以必须要有冒号】完整代码 样式css分析进入、离开的起点进入、离开的过程进入、离开的终点2、引入animate.css库3、基础用法必须配置原创 2023-06-25 21:21:22 · 640 阅读 · 0 评论 -
前端vue入门(纯代码)14
本篇内容在TodoList案例的基础上添加个编辑按钮,要求:(1)点击编辑按钮后,编辑事项,此时编辑按钮隐藏,输入框自动获取焦点(2)编辑完后当输入框失去焦点,保存编辑后的内容页面展示: 用和二选一来展示。 【补充一个点】:v-show=“undefined”【判断为false,页面不展示】;v-show=“!undefined”【判断为true,页面展示】handleEdit(todo):将props传过来的数据todo传入函数handleEdit(原创 2023-06-24 19:54:49 · 387 阅读 · 0 评论 -
前端vue入门(纯代码)13
图解消息发布与订阅 【举例】C组件想给A组件传递数据: Student组件给School组件传递数据的使用步骤:安装pubsub:(安装不成功、使用管理员权限运行)引入pubsub-js库【该库安装在node_modiles文件中】: (订阅和发布都要引入)订阅者订阅:发布者发布:订阅者取消订阅:完整代码:注意1:“取消订阅方式和“全局事件总线”不同,取消订阅得指定订阅返回的id,且每次返回的id都不同,而“全局事件总线”指定的是“自定义事件名称”注意2:订阅【原创 2023-06-23 14:37:13 · 359 阅读 · 0 评论 -
前端vue入门(纯代码)12
TodoList-全局事件总线原创 2023-06-22 17:19:11 · 1033 阅读 · 0 评论 -
前端vue入门(纯代码)11
全局事件总线实现了任意组件间的通信,有效简化了开发过程中一些数据传递的操作,同时也提高了程序的性能,但是值得注意的是,全局事件总线之所以叫全局,是因为任何组件都可以访问,这就导致如果大量组件都绑定了全局事件总线,难免会造成代码混乱,且自定义事件名可能发生重复的问题,所以在开发中,使用全局事件总线时要根据实际业务情况进行选择。全局事件总线:一种组件间通信的方式,适用于任意组件间通信。new Vue({原创 2023-06-21 20:17:40 · 1107 阅读 · 0 评论 -
前端vue入门(纯代码)10
/如果是自定义事件的话,就需要把该删掉的东西【'checkAllTodo','clearAllTodo'】删掉。//get有什么作用?当有人读取isAll时,get就会被调用,且返回值就作为isAll的值。// value就是:v-model绑定的值false【未勾选】 or true【勾选】//get什么时候调用?2.所依赖的数据发生变化时。TodoList案例中的子组件TodoHeader给父组件App传递数据。//set什么时候调用?//全选框是否勾选 【&&:且】// 清空所有已完成。原创 2023-06-20 20:58:58 · 433 阅读 · 0 评论 -
前端vue入门(纯代码)09
自定义组件链接(1)利用props传值实现 通过props也可以实现,先定义父子组件,school是父组件,student是子组件。props传值:父组件需要提前给子组件一个函数【getStudentName】,子组件用props声明接收那个函数【getStudentName】 注意:使用props属性时,需要使用冒号来区别传入的是双引号里面的内容还是字符串,这里我们传的是一个函数,因此需要用冒号去识别函数名具体写法对应是:首先需要用props声明接收父组件传的函数【getStuden原创 2023-06-19 22:26:07 · 774 阅读 · 0 评论 -
前端vue入门(纯代码)08
它们都是浏览器的一种本地存储数据的方式它们只是存在本地,即浏览器中,不会发送到服务器localStorage:永久存在浏览器中【不管是否关闭浏览器】,除非手动删除sessionStorage:当浏览器被关闭时,自动消失,存储的数据被清空存储内容大小一般支持5MB左右(不同浏览器可能还不一样)。LocalStorage存储的内容,需要手动清除才会消失。【需要手动清空缓存,不然就算关闭了浏览器,LocalStorage中存储的数据还在】原创 2023-06-15 21:50:34 · 809 阅读 · 0 评论 -
前端vue入门(纯代码)07
一共拆分为4个组件:整个TodoList案例的页面结构【html】和样式设置【style】:【还未实现动态交互】静态页面展示:前期知识准备: 【false:input框不勾选】 【true:input框勾选】 【键盘按键事件:按下回车按键,调用add()方法】 是会返回触发事件触发的源头元素。【这个源头元素指的是,当我点击子元素,虽然父元素的点击事件也会被触发(冒泡机制),但子元素才是事件的源头元素。】生成全球唯一的ID:uuidnanoid【是uuid的精简版】:问题一: 把数据添加到list原创 2023-06-14 15:02:52 · 619 阅读 · 0 评论 -
前端vue入门(纯代码)06
Vue中自定义的插件,插件就是包含install方法的一个对象,install的第一个参数是Vue构造函数,第二个以后的参数是插件使用者传递的数据,本质:包含install方法的一个对象,install方法的第一个参数是Vue构造函数,第二个参数及其以后的参数是插件使用者传递的数据。功能:主要是用于增强功能,可以把他看作是一个工具库,可以提供很多强大的功能,比如一些强大的自定义指令,一些强大的工具方法,过滤器等。Vue文件中的样式style标签上,有一个特殊的属性:scoped。原创 2023-06-11 16:40:20 · 539 阅读 · 0 评论 -
前端vue入门(纯代码)05
5.props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。【props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。3、通过vue实例的$refs属性拿到这个组件的引用,之后可以通过这个引用调用子组件的方法,或者获取子组件的数据。3.如果props中的属性和data中的属性相同,那么显示的为props中的属性,原创 2023-06-11 16:36:37 · 1257 阅读 · 0 评论 -
前端vue入门(纯代码)05 -文件不能修改
将当前路径退回到最外层文件夹,也就是使用vscode打开文件夹时的文件夹路径。3.发现依旧不能修改,然后去下面路径下去修改,发现还是不能修改。原创 2023-06-11 16:35:18 · 175 阅读 · 0 评论 -
前端vue入门(纯代码)04---全网最详细的Vue脚手架入门
Ctrl + C或 Ctrl +shift + C【以管理员的方式运行】Vue CLI叫做脚手架。,翻译为命令行接口工具,俗称脚手架。:创建Vue项目:运行该Vue项目。原创 2023-06-08 14:24:30 · 445 阅读 · 0 评论 -
前端vue入门(纯代码)03
补:Vue2生命周期在Vue中,使用v-bind:style 动态绑定元素的内联样式对象语法: 的对象语法---->简写: 样式名如果有-,则改成驼峰式命名。指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。 简写=》 **1、:**在Vue实例创建之前 ,其实应该是说 先初始化生命周期,将生命周期定义在 Vue 实例中(生命周期函数有多少个,都叫啥,什么时候调用这些生命周期),然后接着 Vue 内部自带的事件修饰符(例如:once)定义,原创 2023-06-05 20:38:04 · 347 阅读 · 0 评论 -
前端vue入门(纯代码)02
11.条件渲染在首次渲染的时候,如果条件为假,什么也不操作,页面当作没有这些元素。当条件为真的时候,开始局部编译,动态的向DOM元素里面添加元素。当条件从真变为假的时候,开始局部编译,卸载这些元素,也就是删除。不管条件是真还是假,第一次渲染的时候都会编译出来,也就是标签都会添加到DOM中。之后切换的时候,通过display: none;样式来显示隐藏元素。可以说只是改变css的样式,几乎不会影响什么性能。12.列表渲染vue中key的原理filter()方法的使用:返回数组,包原创 2023-05-17 14:20:15 · 206 阅读 · 0 评论 -
前端vue入门(纯代码)01
02模板语法03.数据绑定双向数据绑定:数据不仅能从data流向页面,还能从页面流向data。04._el与data的两种写法05_MVVM模型M:模型Model —>也就是data中的数据V:视图View —>也就是模板代码VM:视图模型ViewModel —>也就是Vue实例(vm)06.数据代理1.回顾Object.defineProperty()方法的使用注意:通过Object.defineProperty()方法添加的属性是:Vue中的数据代理原创 2023-05-04 20:44:41 · 209 阅读 · 0 评论