2022年2月11日
循环结构 v-for
摘要： <ul id="example-1"> <!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--> <li v-for="item in items"> {{ item.message }} </li> </ul> <scrip 阅读全文
posted @ 2022-02-11 10:53 Harry宗 阅读(55) 评论(0) 推荐(0)
vue ---------- v-bind 绑定style
摘要： 绑定style <div v-bind:style="styleObject">绑定样式对象</div>' <!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) --> <div v-bind:style="{ color: act 阅读全文
posted @ 2022-02-11 10:48 Harry宗 阅读(55) 评论(0) 推荐(0)
vue ---------- v-bind 绑定class
摘要： v-bind v-bind 指令被用来响应地更新 HTML 属性 v-bind:href 可以缩写为 :href; <!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> 绑定对象 我们可以给v-bi 阅读全文
posted @ 2022-02-11 10:35 Harry宗 阅读(334) 评论(0) 推荐(0)
vue
摘要： v-on事件函数中传入参数 <body> <div id="app"> <div>{{num}}</div> <div> <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 --> <button v-on:click='handle1'>点击1</button> < 阅读全文
posted @ 2022-02-11 10:29 Harry宗 阅读(34) 评论(0) 推荐(0)
2022年2月10日
体验jQuery
摘要： 引入jQuery文件。 在文档最末尾插入 script 标签，书写体验代码。 $('div').hide() 可以隐藏盒子 . jQuery的入口函数 // 第一种: 简单易用。 $(function () { $('div').hide(); }) ; // 第二种: 繁琐，但是也可以实现 $(d 阅读全文
posted @ 2022-02-10 17:50 Harry宗 阅读(32) 评论(0) 推荐(0)
本地存储
摘要： 本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大，sessionStorage约5M、localStorage约20M 4、只能存储字符串，可以将对象JSON.stringify() 编码后存储 // 将对象转变成字符串形式 ​ JSON.parse 阅读全文
posted @ 2022-02-10 17:17 Harry宗 阅读(77) 评论(0) 推荐(0)
classList 属性
摘要： classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。 该属性用于在元素中添加，移除及切换 CSS 类。有以下方法 添加类： element.classList.add（’类名’）； focus.classList.add('current'); 移除类： el 阅读全文
posted @ 2022-02-10 17:14 Harry宗 阅读(75) 评论(0) 推荐(0)
触屏事件概述
摘要： TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等 touchstart、touchmove、touchend 三个事件都会各自有事件对象。 触摸事件对象重点我们看三个常见对象列表： 阅读全文
posted @ 2022-02-10 17:07 Harry宗 阅读(131) 评论(0) 推荐(0)
元素滚动 scroll 系列
摘要： scroll 概述 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等 页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset 阅读全文
posted @ 2022-02-10 16:59 Harry宗 阅读(37) 评论(0) 推荐(0)
mouseenter 和mouseover的区别
摘要： mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover，它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发 之所以这样，就是因为mouseente 阅读全文
posted @ 2022-02-10 16:59 Harry宗 阅读(43) 评论(0) 推荐(0)