- 博客(29)
- 收藏
- 关注
RSS订阅原创 hover控制的样式在chrome浏览器中不生效的问题
在使用调试工具的情况下，可以点击如下位置，即 toggle device toolbar(切换设备工具栏) ，将移动端设备调试关闭，切换为PC端调试
2021-12-22 14:39:49
588
原创 js中＞＞＞小结
x >>> 0本质上就是保证x有意义（为数字类型），且为正整数，在有效的数组范围内（0 ～ 0xFFFFFFFF），且在无意义的情况下缺省值为0。示例:
2021-01-15 15:37:15
521
原创 vue中动态组件和异步组件
......<script> /* 动态组件： 动态组件语法--固定组件名 component,会接收is属性参数，由is属性对应的值判断显示哪个组件 动态组件--根据数据的变化，结合component标签，来随时动态切换组件的显示 keep-alive -- 缓存标签 动态组件和keep-alive一般会一起使用 异步组件：异步执行某些组件的逻辑 暂时掌握其语法即可 */
2021-01-05 17:33:29
233
原创 slot插槽小结
......<script> /* * 插槽小结: * 帮助解决组件间内容传递问题 * 1.solt - 插槽 注意：slot没有办法直接绑定事件 父组件往子组件中传递一些dom节点，元素标签时，没必要通过属性去传递，可以使用插槽的方式，插槽中也可以传入字符串、组件等等 父模板里调用的数据属性，使用的都是父模板里的数据 子模版里调用的数据属性，使用的都是子模版里的数据 未传递给插槽部分的内容时
2021-01-05 17:30:44
152
1
原创 父子组件之间通过事件通信的方式
......<script> /* 子组件想要修改父组件传递过来的参数时，方式有两种 1.重新定义一个变量来接收父组件传递过来的参数 2.通知父组件进行修改, 1>可以使用this.$emit方式 向外触发事件，触发事件时是驼峰式命名 父组件中可以对该事件进行监听，@为监听事件符号,在标签上监听时不能使用驼峰式命名，而使用横线间隔语法命名 子组件向父组件触发一些事件时，emits:['add']
2021-01-05 16:05:02
219
原创 vue中non-props属性
......<script> /* Non-prop属性：父组件给子组件传递内容时，子组件不通过pros接收时，情况如下： 1.子组件存在单个根节点时 底层会将父组件传递过来的内容置于子组件最外层dom标签上，变成子组件最外层dom标签的一个属性 如果不希望在子组件的标签上展示该属性，可以通过inheritAttrs: false,不继承父组件传过来的non-props属性 2.子组件存在多个根节点时
2021-01-05 15:52:44
630
原创 vue中单向数据流小结
......<body> <div id='root'></div> <script> /* 父组件向子组件传多个参数时，可以将要传的参数置入params中，调用子组件时直接绑定v-bind="params" 等同于将参数一个一个展开传递形式 例如：v-bind='params' <=> :content ='params.content' 其余参数
2021-01-05 14:40:04
386
原创 vue中全局组件和局部组件小结
组件–组件具备复用性，组件中的数据是被当前组件独享，而不会被其他同样的组件共享全局组件-app.component()注册的组件是全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单名字建议—小写字母单词，中间加横线间隔 局部组件--定义一个常量，是一个对象，使用时需要在父组件中components中声明，声明之后可以直接使用 定义局部组件时建议首字母大写 定义了要注册之后才能使用，性能比较高，使用起来有些麻烦 名字
2021-01-05 14:33:59
420
原创 表单中双向绑定指令的使用
...... <script> /* input textarea checkbox--单个checkbox时绑定的值只能是true/false,多个checkbox时可以用v-model存储对应的内容，同时每个input框还应写对应的value值 radio时使用字符串存储对应的值 multiple---多选 使用checkbox时，true和false的值可以通过true-value和fals
2021-01-05 14:30:55
278
原创 修饰符小结
事件修饰符： 绑定事件的时候可以直接写表达式 @click.stop -- 停止向外做事件冒泡 @click.self---事件的触发必须是自己的dom标签触发才会执行函数，子标签触发的dom事件不会执行 prevent--阻止默认行为 capture -捕获，从外到内 冒泡---从内到外 once--事件绑定只执行一次 scroll后加passive修饰符，可以提升滚动性能 按键修饰符： @keydown.enter-...
2021-01-05 14:09:18
65
原创 js对数组的常用操作
.......handleAdd(){ //1.使用数组的变更函数 push() pop() unshift() shift() splice() sort() reverse() //向数组的末尾添加一个或更多元素，并返回新的长度 // this.listArr.push('tt1') //删除并返回数组的最后一个元素 // this.listA
2021-01-05 13:45:15
103
原创 vue样式绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>样式绑定语法-补充</title> <script src='https://unpkg.com/vue@n
2021-01-05 11:11:28
63
原创 v-if、v-show、v-for
v-if通过控制dom元素的存在与否来控制其显隐v-show -通过控制style样式来控制显隐，dom上一直存在
2021-01-04 16:53:46
208
原创 vue中methods、watch、computed使用小结
methods和computed(计算属性)之间的差异：* 计算属性—当计算属性依赖的内容发生变更时，才会重新执行计算* 方法—只要页面重新渲染，才会重新计算computed和watch(侦听器)的差异：*涉及到异步操作时需要使用侦听器* computed适合同步操作建议：* computed和methods都能实现的功能，建议使用computed,因为有缓存* computed和watch都能实现的功能，建议使用computed,因为更加简洁const app = Vue.createA
2021-01-04 16:46:51
197
原创 常见的vue指令
v- 开头为vue指令v-html:不会做标签的转义v-once:初始化渲染时会使用data中定义的变量的内容去做渲染，之后变量改变时页面不会再重新渲染，即降低无用渲染，提高渲染性能v-on: --事件绑定，在模板上做事件绑定时对应的方法可以写在methods中，缩写为@v-bind: —缩写为:(冒号)[]—动态参数写法，属性名不定的时候可以使用中括号的形式，即动态属性，v-bind可以用动态属性，事件也可以用动态属性...
2021-01-04 11:29:28
127
原创 vue生命周期函数
生命周期函数 —即在某一时刻会自动执行的函数beforeCreate()—在实例生成之前会自动执行created()—在实例生成之后会自动执行beforeMount()—把模板变成render函数后立即执行，也可理解为组件内容被渲染到页面之前执行的函数mounted()–在组件内容被渲染到页面之后立即执行的函数beforeUpdate()—当data中的数据发生变化时会自动执行的函数updated()—当data中的数据发生变化，同时页面完成更新后，会自动执行的函数beforeDestroy(
2021-01-04 11:18:32
60
原创 字符串反转
......handleBtnClick(){ /* 打散 反转 聚合 */ this.content = this.content.split('').reverse().join('') }, ......
2021-01-04 11:08:21
48
原创 cerateApp使用
如下所示，const app = Vue.createApp({ template:` <div> <div>{{content}}</div> </div> `, data(){ return{ show:true, content:'
2021-01-04 10:59:14
602
原创 ES6 Promise使用小结
1.Promise含义异步编程的解决方案之一两种理解：可以理解为一个容器，保存着某个未来才会结束的事件/一个异步操作的结果语法上是一个对象，可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理Promise对象特点：1>对象状态不受外界影响。有三种状态：pending(进行中)、fulfailed(已成功)、rejected(已失败)2>一旦状态改变，就不会再变，任何时候都可以得到这个结果pending->fulfailedpen
2020-10-29 14:24:22
163
原创 axios API使用小结
/* 补充axios API部分知识axios API可以通过向 axios 传递相关配置来创建请求。实例如下：axios(config)// 发送 POST 请求axios({method: ‘post’,url: ‘/user/12345’,data: {firstName: ‘Fred’,lastName: ‘Flintstone’}});// GET 请求远程图片axios({method:‘get’,url:‘http://bit.ly/2mTM3nY
2020-10-28 17:53:07
207
原创 js预加载图片Image()函数
/* 图像对象* js 预加载图片image()函数* 创建一个Image对象：var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。* 建立图像对象：图像对象名称=new Image([宽度],[高度])* 图像对象的属性： border complete height hspace lowsrc name src vspace width* 图像对象的事件：onabort(事件会在图像加载被中断时
2020-10-28 17:50:43
1893
原创 vue中bus总线使用小结
1.emit和emit和emit和on事件必须使用一个空的Vue实例作为中央事件总线的实例上，才能够触发，否则会出现子组件$emit后父组件没有监听到函数的变化的情况。新建一个文件bus.js代码如下：import Vue from 'vue'const bus = new Vue()export default bus2.可以在main.js中引入该文件，并将其挂载到Vue函数上，这样做的好处是在Vue实例或组件中不用再去重复引用bus代码如下：import bus from '@/ut
2020-10-28 11:03:44
682
原创 input的失焦事件处理
input元素上进行obblur事件绑定：<input class="customer_name" placeholder="请输入姓名" v-model="name" @blur="onBlur"/>具体实现方法：methods: { onBlur: function () { console.log('blur...') setTimeout(function () { var scrollHeight = document.docum
2020-10-22 16:11:08
4420
原创 Echarts 实现折线图自定义折点样式
<script> .... export default { name: "LineChart", ... data:function () { return{ series:[] } }, mounted() { ...以下省略部分逻辑... let obj = {
2020-10-21 17:31:02
3740
原创 canvas实现环形渐变进度条（vue）
利用canvas实现环形渐变进度条（vue）以下是封装好的组件：<template> <!--画布尺寸的控制--> <div class="canvas_area" ref="canvasArea"> <canvas :id="id" width="208px" height="208px"></canvas> </div></template><script>
2020-10-21 16:39:22
1556
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人