- 博客(15)
- 收藏
- 关注
RSS订阅原创 $refs的作用及操作流程
$refs的的使用方法作用:可以获取dom元素和子组件实例获取到原生的dom标签<template> <div> <h1 ref="myH1">1. ref获取原生dom</h1> <button @click="fn">点击修改上面内容</button> </div></template><script>export default { methods: {
2022-05-10 15:11:51
3070
原创 vue中父子组件生命周期执行顺序
挂载阶段执行顺序为：父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted更新阶段执行顺序为：父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated销毁阶段执行顺序为：父beforeDestroy -> 子be
2022-05-08 23:49:48
615
原创 为什么vue中的v-if和v-for不能一起使用
一.v-if和v-for的作用v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名，v-for在使用的时候，要设置key的值，并且这个值是独一无二的，方便diff算法进行优化二.两者的优先级在使用的时候v-for的优先级高于v-if三.注意问题永远不要把 v
2022-05-08 21:03:59
450
原创 vue中的单向数据流
vue单向数据流在vue中需要遵循单向数据流原则在父传子的前提下，父组件的数据发生会通知子组件自动更新子组件内部，不能直接修改父组件传递过来的props => props是只读的代码示例父组件代码：<template> <div style="border: 1px solid #000"> <h1>我是父组件</h1> <Son :info="info" :person="person"></So
2022-05-06 20:48:03
5724
原创 vue中的methods和computed的区别
在我们的实际开发中，有时很难去确定具体用computed还是methods，因为这两种方法最后的到的结果是一样的，但是他们的原理和用法却完全不同，比如：我们想去时刻监控数据的变化，在视图上显示不同的结果，当然这两种方法都可以实现这种效果，这个时候用computed就比较合理了，因为computed是可缓存的，只要数据层值不改变，computed就不会去改变，而且可缓存，如果数据层的值变了，computed就会实时更新到视图层上，所以说computed是响应式的。
2022-05-05 21:15:46
373
原创 使一个盒子水平垂直居中的6种方法
效果图方法一：利用定位（常用方法，推荐使用）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2022-05-04 22:13:49
183
原创 vue中v-show和v-if的异同点
1.相同点v-show和v-if都能控制元素的显示和隐藏2.不同点实现本质方法不同:v-show的本质就通过设置css中的display设置为none,控制隐藏v-if是动态的向dom树内添加或删除dom元素3.编译的区别v-show其实就是在控制cssv-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件4.编译的条件v-show都会编译,初始值为false,只是将display设为none,但它也编译了v-if初始值为false,就不会编译了
2022-05-03 19:50:30
307
原创 学习webpack,看这一篇就够了
1.webpack基本介绍webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)现代 javascript 应用程序的 静态模块打包器 (module bundler)静态: 文件资源模块: node环境, 引入文件, 遵守模块化语法除了合并代码, 还可以翻译和压缩代码less/sass -> cssES6/7/8 -> ES5html/css/js -> 压缩合并2.学习webpack的准备
2022-05-03 00:13:43
3475
原创 JavaScript中作用域详解
1.作用域作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合换句话说,作用域决定了代码区块中变量和其他资源的可见性举个例子 function fn(){ var info='函数内部变量' } fn()//要先执行这个函数,否则根本不知道里面是啥 console.log(info)//Uncaught ReferenceError: info is not defined上述例子中,函数fn内部创建一个info变量,当我们在全局访问这个.
2022-05-01 22:56:28
1347
原创 css3实现3d正方体动画效果
1.实现原理主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果2.html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
2022-04-29 21:36:59
1350
2
原创 这样的bug，你有遇到过？
在运行nodejs过程中出现的问题问题1这表明端口已经被占用，所以解决办法有两种：1.需改nodejs中的侦听端口，如将8081端口改成8080端口,2.找到已经占用nodejs端口的应用，然后杀掉该应用，最后重启nodejs。问题二1.碰到这样的问题, 先启动电脑排查一下是否电脑上有安装node 和 npm2.如果安装成功还是报错请看npm的安装路径 ，查看命令 npm config get prefix，我们再打开我的电脑(右键)->属性->高级系统->再找到
2022-04-29 21:15:53
705
原创 css3实现3d图片旋转效果
1.实现原理a.首先所有的图片的容器position:fixed，叠加在一起，然后一次设置rotateY分别为（36*i）deg ，i取0到10 ；所有图片会相交成一个类似花的形状 然后为每个图片的容器设置translateZ，所有图片会从对应的角度向外移动，扩展成一个大圆，即下图效果b.创建动画，让rotateY每次增加90deg旋转起来即可。同时，为了观察效果，让rotateX依次上下移动20deg。2.html文件<!DOCTYPE html><html lang="en
2022-04-29 20:23:52
4786
原创 JavaScript中数组常用的7种迭代方法
1.map()方法1.1应用场景:利用某种规则映射一个新的数组(遍历数组中每一个元素,并对每一个元素做对应的处理,返回一个新的数组)例如:将数组中的每一个元素+1 let arr = [10, 20, 30, 40, 50] //item数组每一项的值,index数组的下标 let newArr = arr.map((item, index) => { return item + 1 }) console.log(newArr)//[11, 21, 31, 41,
2022-04-26 21:13:19
4320
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人