- 博客(80)
- 收藏
- 关注
原创 事件循环Eventloop
程序运行需要有它自己专属的内存空间,可以把这块内存空间简单的理解为进程每个应用至少有一个进程,进程之间相互独立,即使要通信,也需要双方同意。
2023-11-12 20:15:02 288
转载 前端vue入门(纯代码)36_history和hash模式
对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。hash模式:地址中永远带着#号,不美观。若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。兼容性较好。history模式:地址干净,美观。兼容性和hash模式相比略差。应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
2023-07-25 21:32:44 103
原创 前端vue入门(纯代码)34_两个新的生命周期钩子
1、可以让不展示的路由组件保持挂载,不被销毁2、当组件在< keep-alive >内切换,它的 activated 和 deactived 这两个生命周期钩子函数将会被对应执行。3、如果同时使用include,exclude,那么exclude优先于include, 下面的例子Cats组件不会被挂载
2023-07-14 23:03:20 106
原创 前端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 436
原创 前端vue入门(纯代码)25_路由vueRouter
一个路由就是一组映射关系key为路径,value可能是function或Component。
2023-07-10 14:08:01 162
原创 前端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 493
原创 前端vue入门(纯代码)17
: 引入第三方样式库bootstrap.css。 并在文件中引入:拆分改写完后,展示:github接口地址:【】这是github维护的一个简单测试接口,其中xxx为:输入的内容,github接口就会返回xxx相关的数据。axios的get请求url拼接参数有2种方式:方式1:字符串+拼接方式2:采用ES6语法,地址字符串采用反单引号【``】,同时使用**【${}】**【不是单引号,不是单引号!!!】目前效果的展示以及动图中两个错误的解决办法如下:请求数据解释:目前代码为:然后,
2023-06-28 18:15:03 339
原创 前端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 282
原创 前端vue入门(纯代码)15
1、准备样式① 过度样式② 动画样式定义动画使用动画v-enter-active:进入过程中的动画v-leave-active:离开过程中的动画2、使用包裹要过度的元素知识补充: 关键帧 @keyframes 动画名 { … } 让包裹的元素一开始就有出场动画【有以下两种方式,but如果写成了,没有冒号,那等式右边的就成一个字符串,所以必须要有冒号】完整代码 样式css分析进入、离开的起点进入、离开的过程进入、离开的终点2、引入animate.css库3、基础用法必须配置
2023-06-25 21:21:22 667
原创 前端vue入门(纯代码)14
本篇内容在TodoList案例的基础上添加个编辑按钮,要求:(1)点击编辑按钮后,编辑事项,此时编辑按钮隐藏,输入框自动获取焦点(2)编辑完后当输入框失去焦点,保存编辑后的内容页面展示: 用和二选一来展示。 【补充一个点】:v-show=“undefined”【判断为false,页面不展示】;v-show=“!undefined”【判断为true,页面展示】handleEdit(todo):将props传过来的数据todo传入函数handleEdit(
2023-06-24 19:54:49 417
原创 前端vue入门(纯代码)13
图解消息发布与订阅 【举例】C组件想给A组件传递数据: Student组件给School组件传递数据的使用步骤:安装pubsub:(安装不成功、使用管理员权限运行)引入pubsub-js库【该库安装在node_modiles文件中】: (订阅和发布都要引入)订阅者订阅:发布者发布:订阅者取消订阅:完整代码:注意1:“取消订阅方式和“全局事件总线”不同,取消订阅得指定订阅返回的id,且每次返回的id都不同,而“全局事件总线”指定的是“自定义事件名称”注意2:订阅【
2023-06-23 14:37:13 364
原创 前端vue入门(纯代码)11
全局事件总线实现了任意组件间的通信,有效简化了开发过程中一些数据传递的操作,同时也提高了程序的性能,但是值得注意的是,全局事件总线之所以叫全局,是因为任何组件都可以访问,这就导致如果大量组件都绑定了全局事件总线,难免会造成代码混乱,且自定义事件名可能发生重复的问题,所以在开发中,使用全局事件总线时要根据实际业务情况进行选择。全局事件总线:一种组件间通信的方式,适用于任意组件间通信。new Vue({
2023-06-21 20:17:40 1122
原创 前端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 445
原创 前端vue入门(纯代码)09
自定义组件链接(1)利用props传值实现 通过props也可以实现,先定义父子组件,school是父组件,student是子组件。props传值:父组件需要提前给子组件一个函数【getStudentName】,子组件用props声明接收那个函数【getStudentName】 注意:使用props属性时,需要使用冒号来区别传入的是双引号里面的内容还是字符串,这里我们传的是一个函数,因此需要用冒号去识别函数名具体写法对应是:首先需要用props声明接收父组件传的函数【getStuden
2023-06-19 22:26:07 794
原创 前端vue入门(纯代码)08
它们都是浏览器的一种本地存储数据的方式它们只是存在本地,即浏览器中,不会发送到服务器localStorage:永久存在浏览器中【不管是否关闭浏览器】,除非手动删除sessionStorage:当浏览器被关闭时,自动消失,存储的数据被清空存储内容大小一般支持5MB左右(不同浏览器可能还不一样)。LocalStorage存储的内容,需要手动清除才会消失。【需要手动清空缓存,不然就算关闭了浏览器,LocalStorage中存储的数据还在】
2023-06-15 21:50:34 822
原创 前端vue入门(纯代码)07
一共拆分为4个组件:整个TodoList案例的页面结构【html】和样式设置【style】:【还未实现动态交互】静态页面展示:前期知识准备: 【false:input框不勾选】 【true:input框勾选】 【键盘按键事件:按下回车按键,调用add()方法】 是会返回触发事件触发的源头元素。【这个源头元素指的是,当我点击子元素,虽然父元素的点击事件也会被触发(冒泡机制),但子元素才是事件的源头元素。】生成全球唯一的ID:uuidnanoid【是uuid的精简版】:问题一: 把数据添加到list
2023-06-14 15:02:52 636
原创 前端vue入门(纯代码)06
Vue中自定义的插件,插件就是包含install方法的一个对象,install的第一个参数是Vue构造函数,第二个以后的参数是插件使用者传递的数据,本质:包含install方法的一个对象,install方法的第一个参数是Vue构造函数,第二个参数及其以后的参数是插件使用者传递的数据。功能:主要是用于增强功能,可以把他看作是一个工具库,可以提供很多强大的功能,比如一些强大的自定义指令,一些强大的工具方法,过滤器等。Vue文件中的样式style标签上,有一个特殊的属性:scoped。
2023-06-11 16:40:20 580
原创 前端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 1287
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人