学习笔记
文章平均质量分 58
毛球Josey
热爱生活,让每天都过得不一样~
展开
-
JavaScript防抖(debounce)和节流(throttle)
JavaScript防抖(debounce)和节流(throttle)防抖例如实时显示搜索框时,一定时间内只需要函数执行一次。function debounce(fn,interval){ let timeout = null; return function(){ clearTimeout(timeout); timeout = setTimeout(()=...原创 2020-04-15 18:14:52 · 175 阅读 · 0 评论 -
【Vue.js】Vue官方文档学习-表单input绑定
v-model指令:在表单 input 和 textarea 元素上创建双向数据绑定。根据 input 的 type 类型自动地以正确的方式更新元素。会忽略所有表单元素中 value, checked 或 selected 属性上初始设置的值。将 Vue 实例中的 data 作为真实数据来源。单行文本 <div id="app1"> ...原创 2018-08-01 19:39:31 · 1019 阅读 · 0 评论 -
【Vue.js】Vue官方文档学习-模板语法
一、插值文本mustache语法数据绑定最基本的形式。 mustache”语法:双花括号的文本插值,将数据中的 HTML 转为纯文本后再进行插值。 < span >Message: {{ msg }}< /span > mustache 标签将会被替换为 data 对象上对应的 msg 属性的值。 只要绑定的数据对象上的 msg 属性发生改变,插...原创 2018-07-22 18:26:15 · 269 阅读 · 0 评论 -
【Vue.js】Vue官方文档学习-Vue实例
一、创建一个Vue实例var vm = new Vue({ // 选项})每个Vue应用程序都是通过Vue函数创建出一个新的Vue对象开始的。 通常我们使用变量 vm (ViewModel 的简称) 来表示 Vue 实例。 在创建一个 Vue 实例时,你会传入一个选项对象。 Vue 应用程序由「一个使用 new Vue 创建的 Vue 根实例」、「嵌套的树结构(可选)」和「...原创 2018-07-22 10:13:15 · 2101 阅读 · 0 评论 -
【Vue.js】Vue官方文档学习-事件处理
使用 v-on 指令监听 DOM 事件。一、事件触发时执行js语句<div id="app1"> <button @click="counter += 1">点击我</button> <p>按钮被点击次数为:{{counter}}</p> </div>原创 2018-07-26 19:11:15 · 217 阅读 · 0 评论 -
【Vue.js】Vue官方文档学习-介绍
一、Vue.js是什么?Vue.js是一套构建用户界面的渐进式框架。 Vue 从根本上采用最小成本、渐进增量的设计。 Vue 的核心库只专注于视图层。 当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动。二、安装直接引入< script >标签三、声明式渲染Vue.js 的核心是:可以采用简洁的模板语法...原创 2018-07-21 15:43:11 · 1462 阅读 · 0 评论 -
【Vue.js】Vue官方文档学习-列表渲染
一、使用v-for遍历数组生成元素标题使用 v-for 指令,将一个数组渲染为列表项。 v-for 指令需要限定格式为 item in items 的特殊语法,items是原始数据数组,item是数组中每个迭代元素的指代别名。&lt;div id="app1"&gt; &lt;li v-for="item in items"&gt;原创 2018-07-26 10:58:09 · 206 阅读 · 0 评论 -
【Vue.js】Vue官方文档学习-根据条件进行渲染
一、v-if基本结构v-if v-else v-else-if <div id="app1"> <h1 v-if="type === 'A'">A</h1> <h1 v-else-if="type === 'B'">B</h1> &原创 2018-07-25 19:37:48 · 159 阅读 · 0 评论 -
【Vue.js】Vue官方文档学习-class绑定
在数据绑定中,一个常见需求是,将数据与元素的 class 列表以及元素的 style 内联样式的操作绑定在一起。 由于它们都是属性,因此我们可以使用 v-bind 来处理它们:只需从表达式中计算出最终的字符串。 然而,处理字符串拼接,既麻烦又容易出错。 为此,在使用 v-bind 指令来处理 class 和 style 时,Vue 对此做了特别的增强。 表达式除了可以是字符串,也能够是对象...原创 2018-07-25 11:37:26 · 157 阅读 · 0 评论 -
【Vue.js】Vue官方文档学习-computed属性和watcher
一、computed属性对于所有复杂逻辑,你都应该使用 computed 属性。为什么呢?在模板中放入太多的逻辑,会使模板过度膨胀和难以维护。 当你想要在模板中多次引用时,就会更加难以处理。<div id="example"> {{ message.split('').reverse().join('') }}</div><div id...原创 2018-07-23 16:23:14 · 309 阅读 · 0 评论 -
用javascript为页面添加蒙版效果和弹出层
用javascript为页面添加蒙版效果和弹出层id为popWindow的div就是蒙版层,id为maskWindow的div是弹出层。<html> <head> <style type="text/css"> .popWindow { background-color:#9D9D9D; wid...原创 2018-04-21 00:00:31 · 6142 阅读 · 0 评论 -
CSS3之对盒子中容纳不下的内容的显示
CSS3之对盒子中容纳不下的内容的显示我们的盒子呢通常是有宽高滴,可是我们盒子里装的东西(子元素)的大小很有可能超出盒子的大小。 这个时候我们通常使用overflow属性来对容纳不下的内容进行设置~通常我们有这几个属性值: hidden:隐藏 scroll:滚动 auto:x方向和y方向自动进行滚动设置 visible:和不写overflow属性是一样的效果同时还有overf...原创 2018-04-20 17:47:02 · 702 阅读 · 0 评论 -
CSS3的盒子类型
CSS3的盒子类型首先呢,我们要知道css3中用display属性来描述盒子的类型滴。像block类型和inline类型都是基本的盒子模型。 常见的div和p标签默认就是block类型,而a和span默认的就是inline类型。 我分别给div元素和span元素添加了背景颜色,这样就可以看到block和inline的区别啦~通过在项目里经验,我们经常会遇到不希望目标元素被块元素...原创 2018-04-20 17:31:15 · 979 阅读 · 0 评论