12 2021 档案

字符串-数组-对象新增的方法
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-26 23:04 13522679763-任国强 阅读(78) 评论(0) 推荐(0)
js-返回顶部
摘要：<!-- 返回顶部按钮 --> <a href="javascript:;" class="backtotop" id="backtotop"> 返回<br>顶部 </a> (function(){ var backtotop = document.getElementById('backtotop 阅读全文
posted @ 2021-12-19 14:15 13522679763-任国强 阅读(58) 评论(0) 推荐(0)
js-原生轮播图
摘要：<section class="banner" id="banner"> <ul id="carousel_list" class="carousel_list"> <li> <img src="images/banner1.jpg" alt=""> </li> <li> <img src="ima 阅读全文
posted @ 2021-12-19 14:05 13522679763-任国强 阅读(55) 评论(0) 推荐(0)
相关方法
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-18 23:18 13522679763-任国强 阅读(28) 评论(0) 推荐(0)
量词和修饰符
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-18 20:12 13522679763-任国强 阅读(35) 评论(0) 推荐(0)
基础
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-18 19:34 13522679763-任国强 阅读(28) 评论(0) 推荐(0)
方括号表示法
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-18 19:34 13522679763-任国强 阅读(91) 评论(0) 推荐(0)
padding-bottom 撑开图片防止页面抖动 图片宽/图片高 百分比
摘要：/* padding-bottom 撑开图片防止页面抖动 图片宽/图片高 百分比 */ .banner{ height: 0; overflow: hidden; padding-bottom: 25.4%; .banner__img{ width: 100%; } } 阅读全文
posted @ 2021-12-17 11:15 13522679763-任国强 阅读(61) 评论(0) 推荐(0)
设置字体大小 缩放为 一半方法-》设置字体为10px 方法
摘要：.docker__title { font-size: 20px; transform: scale(.5,.5); transform-origin: center top; } 阅读全文
posted @ 2021-12-16 17:31 13522679763-任国强 阅读(320) 评论(0) 推荐(0)
ref-获取dom
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-14 14:08 13522679763-任国强 阅读(20) 评论(0) 推荐(0)
provide-inject
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-14 14:00 13522679763-任国强 阅读(29) 评论(0) 推荐(0)
watch-watchEffect-侦听器
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-14 11:53 13522679763-任国强 阅读(34) 评论(0) 推荐(0)
computed
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-14 10:35 13522679763-任国强 阅读(23) 评论(0) 推荐(0)
to-do-list-demo
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-14 09:48 13522679763-任国强 阅读(19) 评论(0) 推荐(0)
ref-reactive-toRefs
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-14 09:47 13522679763-任国强 阅读(22) 评论(0) 推荐(0)
context
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-14 09:47 13522679763-任国强 阅读(43) 评论(0) 推荐(0)
setup 用法
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-14 09:46 13522679763-任国强 阅读(166) 评论(0) 推荐(0)
切换导航楼层案例
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-11 15:02 13522679763-任国强 阅读(44) 评论(0) 推荐(0)
基础
摘要：// console.log('窗口内宽(包含滚动条)', window.innerWidth); // console.log('窗口外宽', window.outerWidth); // console.log('窗口内宽(不包含滚动条)', document.documentElement.c 阅读全文
posted @ 2021-12-11 15:01 13522679763-任国强 阅读(16) 评论(0) 推荐(0)
返回顶部案例
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-11 15:01 13522679763-任国强 阅读(18) 评论(0) 推荐(0)
plugin 案例 对数据做校验的插件
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-08 13:47 13522679763-任国强 阅读(27) 评论(0) 推荐(0)
plugin
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-08 11:51 13522679763-任国强 阅读(102) 评论(0) 推荐(0)
teleport 传送门
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-08 10:18 13522679763-任国强 阅读(27) 评论(0) 推荐(0)
自定义指令
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-08 09:42 13522679763-任国强 阅读(29) 评论(0) 推荐(0)
mixin 混入和 改变自定义属性 策略
摘要：// mixin 混入 // 组件 data，methods 优先级高于 mixin 里面的 data ， methods优先级 // 生命周期函数 先执行 mixin 里面的，再执行组件里面的 const myMixin = { data(){ return { number:2, count: 阅读全文
posted @ 2021-12-07 17:11 13522679763-任国强 阅读(104) 评论(0) 推荐(0)
状态动画
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-07 15:36 13522679763-任国强 阅读(24) 评论(0) 推荐(0)
单元素 单组件的入场出场动画
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-07 15:19 13522679763-任国强 阅读(21) 评论(0) 推荐(0)
列表的动画实现
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-07 15:18 13522679763-任国强 阅读(27) 评论(0) 推荐(0)
v-once ref provide / inject
摘要：<script> // v-once 让某个元素标签只渲染一次 // ref 获取 DOM节点/组件引用 的语法 this.$refs.xxx / this.$refs.common.sayHello() // provide / inject 跨组件 多级传递参数 var app = Vue.cr 阅读全文
posted @ 2021-12-07 11:06 13522679763-任国强 阅读(25) 评论(0) 推荐(0)
异步组件
摘要：<script> // 异步组件： 异步执行某些组件的逻辑 var app = Vue.createApp({ template:` <div> <common-item /> <async-common-item /> </div> `, }) app.component('common-item 阅读全文
posted @ 2021-12-07 10:32 13522679763-任国强 阅读(42) 评论(0) 推荐(0)
动态组件
摘要：// 动态组件： 根据数据的变化 结合 component 这个标签，来随时切换组件的显示 var app = Vue.createApp({ data(){ return { currentItem:'input-item' } }, methods:{ handleClick(){ if(thi 阅读全文
posted @ 2021-12-07 10:11 13522679763-任国强 阅读(67) 评论(0) 推荐(0)
作用域插槽
摘要：<script> // 当子组件渲染的内容需要父组件 决定的时候 使用 var app = Vue.createApp({ template:` <list v-slot="slotProps"> <p>{{slotProps.item}}</p> </list> `, }) app.compone 阅读全文
posted @ 2021-12-07 09:47 13522679763-任国强 阅读(34) 评论(0) 推荐(0)
普通插槽和具名插槽
摘要：var app = Vue.createApp({ template:`<div> <myform> <div>提交</div> </myform> <myform> <button @Click="handleClick"> 提交</button> </myform> <myform> </myf 阅读全文
posted @ 2021-12-07 09:31 13522679763-任国强 阅读(38) 评论(0) 推荐(0)
节点移动删除
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-06 20:59 13522679763-任国强 阅读(22) 评论(0) 推荐(0)
节点克隆
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-06 20:59 13522679763-任国强 阅读(29) 评论(0) 推荐(0)
改变节点css和属性
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-06 20:58 13522679763-任国强 阅读(37) 评论(0) 推荐(0)
节点创建
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-06 20:57 13522679763-任国强 阅读(27) 评论(0) 推荐(0)
双向绑定-input修饰符
摘要：双向绑定 v-model // input textarea checkbox redio select checkbox message: false // true message: ['jack','dell'] jack <input type="checkbox" v-model="mes 阅读全文
posted @ 2021-12-06 09:13 13522679763-任国强 阅读(77) 评论(0) 推荐(0)
js-节点关系
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-05 12:15 13522679763-任国强 阅读(47) 评论(0) 推荐(0)
v-if 循环 改变数组 对象的方法
摘要：v-if v-show v-if v-else v-if v-else-if v-else v-for="(item,index) in list" :key={{item}} {{item}} // 循环 1 - 10 v-for="item in 10 " //1 改变数组的方法 push() 阅读全文
posted @ 2021-12-03 17:08 13522679763-任国强 阅读(175) 评论(0) 推荐(0)
事件 按键 修饰符
摘要：// 事件 修饰符 stop prevent capture self once passive stop 不会向上冒泡 @click.stop="handleClick" // self 不会向下触发事件 只会触发自己的事件 @click.self="handleClick" // 冒泡方式改为 阅读全文
posted @ 2021-12-03 17:07 13522679763-任国强 阅读(60) 评论(0) 推荐(0)
绑定样式
摘要：绑定样式 data(){ return { message: 'hello Eric ', classString:'red', classObject:{ red:true, green:false }, classArray:['red','green',{brown:true}], style 阅读全文
posted @ 2021-12-03 14:16 13522679763-任国强 阅读(24) 评论(0) 推荐(0)