- 博客(37)
- 收藏
- 关注
RSS订阅原创 十三：编程式路由导航push和replace,缓存路由组件keep-alive，新的生命周期钩子activated和deactivated，路由守卫，history和hash模式，组件库
如上图所示：切换组件News到Message时，News组件被销毁，组件内填的信息都会丢失；为了实现上图文字逐渐变浅的过程，以往是使用beforeDestory和mounted两个钩子的，但使用这两个钩子在页面跳转时也不能使定时器停下；通过路由规则,即只有点击进入，触发路由规则进入该组件，进入该组件时被调用；顾名思义单独写在某个组件里的路由守卫，其余的路由守卫都需要写在路由配置里。实现路由跳转，push是默认带缓存，replace是覆盖缓存。作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2023-10-15 00:56:01
277
原创 十二：路由基本使用，嵌套路由，query参数，命名路由，params参数，路由props配置，router-link的replace属性
key+value=路由，路由就是一组key与value的对应关系；一个路由器（router）管理多个路由；vue-router是vue一个插件库，专门用来实现SPA应用；
2023-10-12 23:14:30
212
原创 十一：Vuex，getters，mapState，mapGetters，mapActions，mapMutations，多组件共享数据，vuex模块化
vuex在Vue中实现集中式状态（数据）管理的一个vue插件，集中式就像一个老师给一群学生上课，状态就是数据；vuex对vue应用中多个组件的共享数据进行集中式的管理（读、写），适用于任意组件间通信多个组件依赖于同一状态时；来自不同组件的行为需要变更同一状态（数据）
2023-10-10 22:26:34
252
原创 十：配置代理，插槽
首先需要在脚手架上安装axios库然后引入axios后发送ajax请求；cmd通过运行服务器，然后通过axios会发现获取失败，跨域，违反了同源策略，即协议名，主机名，端口号有不同；解决跨域问题有以下方法：（1）：后端写服务器的人在服务器返回响应时添加响应头（2）：借助script标签的src属性引入外部资源不受限制，用的较少，需要后端人员配合，只能解决get请求问题；面试问的多；（3）如下图借助中间一个和请求端口号相同的代理服务器8080，类似房屋中介；
2023-10-05 17:32:02
133
原创 九：全局事件总线，todoList案例全局事件总线，消息订阅与发布pubsub，todolist案例添加编辑，$nextTick，动画
作用：实现任意组件间的通信即通过安装一个中间的通用全局事件总线x，且此x内包含$on,$emit,$off;且要满足所有组件可以访问到；所以这时可以在Vue的原型对象上添加x，设置值为vm或者vc。
2023-10-02 23:06:49
113
原创 八.组件自定义事件,todoList自定义事件
button @click="unbind">解绑xiwang事件</button>通过$offunbind() {// 解绑一个自定义事件//解绑多个事件//解绑所有自定义事件},使用于父组件向子组件传递函数方法等，比如父组件APP向子组件Header传递函数子组件则不需要使用props接收，在methods中使用$emit触发自定义函数。
2023-09-30 01:19:31
54
原创 七：Todolist案例，本地存储，Todolist案例本地存储版
(1)拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。(2)实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：一个组件在用：放在组件自身即可。一些组件在用：放在他们共同的父组件上（状态提升），使用props其他组件都可以用。(3)实现交互：从绑定事件开始。
2023-09-27 15:18:59
137
原创 六：单文件组件，Vue脚手架，render函数，ref属性，props配置，mixin混合，插件
在另一个js中配置插件，然后通过import引入到main.js中// 全局过滤器})// 全局自定义指令 自动获取输入框焦点// 指令与元素成功绑定时调用},// 指令所在元素插入页面时// 设置焦点事件},// 指令所在模板重新解析时})// 定义混入data() {return {x: 100,y: 200},})// 给Vue原型上添加方法，vm和vc都能用alert('你好吗？')
2023-09-22 22:08:21
165
原创 五:自定义指令,生命周期，组件，Vue.Component，内置关系，单文件组件
</span> </h2><h2>放大10倍的n值为:<span v-big="n">点击n+1
2023-09-18 22:20:04
127
原创 Js高级：构造函数，原型protoType，原型继承，原型链
原型可以解决构造函数浪费内存问题；每个构造函数都有prototype属性指向另一个对象，称为原型对象；作用：原型对象可以挂载函数，实例化不会多次创建原型上的函数，从而节约内存；可以将不变的方法写在prototype原型对象上，这样所有对象的实例就可以共享方法；构造函数和原型对象中的this都指向 实例化的对象总的来说就是公共属性写到构造函数里，公共方法写到原型里<script>// 构造函数// 公共方法写道到原型里console.log('唱歌');
2023-09-18 15:32:44
59
原创 四:vue检测数据变化的原理,过滤器
data在收集data中的数据之前，先做了一个加工（这个加工也可以称之为数据劫持），那就是给每个数据匹配一个getter和setter，前面说了，Vue监视数据的原理，就是靠setter。（1）使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()（2）Vue.set() 或 vm.$set()也可以实现响应式，第一个写改变的数组,第二个参数写索引，第三个写元素，可以改也可以加。2、并没有改变原本的数据, 是产生新的对应的数据。
2023-09-13 22:35:03
594
原创 绑定css,style样式,V-if和V-show渲染,列表渲染,列表过滤,列表排序
写法:class=“xxx” xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，点击会变，要动态获取。数组写法适用于：要绑定多个样式，但是不确定绑定哪几个，就写成数组，省的一个一个绑定。对象写法适用于：要绑定多个样式，而且要动态决定用不用，这里面可以写一些判断的逻辑。
2023-09-12 00:03:00
537
原创 计算属性computed，监视属性watch,computed与watch的对比,
这里要和data和methods里的东西区分，data里的属性，methods里的函数，你写的都会原封不动放到vm里，但是computed里面的东西写的是对象，最后放到vm里的是这个对象的名，值是get里的返回值。2、所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。利用watch属性handler方法监视函数，handler函数传两个参数，分别是：（修改之后的值，修改之前的值）
2023-09-07 22:45:30
69
原创 Vue初使用,模板语法,数据绑定，el与data，MVVM，数据代理，事件处理，
// 使通过obj2.x也能修改obj1的xget() {},})点击冒泡
2023-09-06 18:51:01
86
原创 AJAX(2):Axios，fatch，jquery发送AJAX请求，同源策略，解决跨域
中搜索axios复制script标签<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>;fetch它不像jquery和axios需要引入第三方库，它直接就能用，它就在window的内置对象中，直接就能用调用fetch函数。例1：使用script的src标签实现file协议到http协议的跨越,原理如此,不知道为啥运行不出来。通过script实现跨域。
2023-09-04 21:24:32
259
原创 AJAX(1):原生AJAX,HTTP协议,Ajax环境配置,AJAX发送请求，AJAX请求中的问题
AJAX全程为Asynchronous Javascript And XML,异步的js和XML通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
2023-09-02 22:51:41
340
1
原创 es6（三）：迭代器，生成器,Promise对象
迭代器是一个能快捷访问数据的接口，通过Symbol.iterator创建迭代器,然后由迭代器方法next方法获取迭代之后的结果.迭代器就是一个用于遍历数据结构的指针，一种新的遍历机制。
2023-08-31 23:14:30
84
原创 正则表达式，元字符
正则表达式是用于匹配字符串中字符组合的，js中正则表达式也是对象；通常用来查找，替换符合正则表达式的文本。1.定义规则 2.查找（1）.定义正则表达式：const 变量名=/ 表达式/（2）查找测试：regObj.test(被检测的字符串) ，用来查看正则表达式与指定的字符串是否匹配，判断是否有符合规则的字符串；若正则表达式与指定字符串匹配，则返回true，否则返回false（3）查找符合规则的字符串：exec（），在一个指定字符串中执行搜索匹配。
2023-08-26 12:41:48
250
原创 事件流，事件委托，其他事件
第一部分设置了页面滑动电梯导航可以出现和隐藏,可以将其放入自执行函数(function(){})();，防止变量污染.1.首先设置滑动点击电梯内小盒子自动跳转到对应大盒子部分原理:电梯小盒子li自定义属性和大模块盒子后面一致;将点击的小盒子自定义属性给大盒子后面,找到对应的大盒子;在将对应的大盒子的offsetTop值给document.documentElement.scrollTop即可完成跳转。
2023-08-15 18:11:07
39
原创 事件监听，事件类型，事件对象,环境对象,回调函数
事件源：按钮；事件类型：点击鼠标；事件处理程序：弹出对话框以前的事件监听使用onclick=function（）{}，现在使用addEventListener（）；on方式多次使用会被覆盖，addEventListener方式可绑定多次，不会被覆盖。
2023-08-10 22:43:26
94
原创 对象，基本数据类型，引用数据类型
对象是无序的数据类型,由属性和方法组成,可以描述具体事务；typeof分辨数据类型，null也是数据类型的一中object。
2023-08-03 11:59:04
91
原创 flex布局
使用order属性来控制排列的顺序，数值越小越靠前，默认为0；和z-index不一样；/* 第三个盒子放到第一个前面，默认第一个为0，然后-1，-2.... */order: -2;
2023-07-25 11:27:19
269
原创 品优购电商项目
1.伪元素选择器为行内元素设置宽高不显示,但是给了绝对或固定定位的元素（相对定位不可以），就转换为了行内块元素， 就可以直接给宽高。1.首先在版心内放入整体布局大盒子main设置为版心减去左边navitem-dd以及边距的宽度,因为左边的导航部分浮动;1.首先建立版心框架，然后里面需放入四个盒子,并设置大盒子宽高.因为外部大盒子已经跟随版心宽度,所以直接设置高度即可;首先需要为logo盒子绝对定位在header大盒子中,在对其中的logo优化,添加背景logo图,并让文字隐藏;5.右侧浮动盒子放入li;
2023-07-23 20:10:09
219
原创 CSS精灵图,字体图标,三角型制作,css布局
有效减少服务器接收和发送请求的次数,提高页面加载速度;某个位置要用某个图的时候，先把这个大的图（小图的集合）调用过来，通过挪动位置（x，y轴）来定位到里面的小图(1)精灵技术主要针对背景图使用,就是把多个小背景图整合到一张大图片中(2)这个大图片称为sprites精灵图或者雪碧图(3)移动背景图片位置,使用background-position(4)移动的距离就是目标图片的x和y坐标,x越往右越大,y越往下越大;(5)一般情况是往上往左移动,所以数值是负值;
2023-07-09 18:23:54
208
原创 css定位
使用定位布局时,可能会出现盒子重叠的情况,使用z-index:1;控制盒子前后次序;数值可以是正整数,负数或0,默认是auto;数值越大,盒子越靠上;若属性相同,则按照书写顺序,后写的在上面;数字后面不能加单位，而且只有定位的盒子才有index属性,标准流和浮动的盒子没有.box {/* 当加了定位,但没有标明z-index.则默认auto;又因为大小属性相同,则后写的盒子在上面;*/top: 0;left: 0;/* 其他盒子数值没有星星大,所以在最上面 */
2023-07-06 22:44:22
59
原创 学成在线案例
1.确认版心（可视区)，通过测量可知页面多宽。2.分析页面行模块和行模块中的列模块3.每行中的列模块通常是浮动的，先确定列大小，在确定列位置，页面布局第二准则。4.先结构后样式，结构最重要5.理清布局结构，再写代码，加油积累！
2023-07-03 20:29:16
100
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人