- 博客(20)
- 收藏
- 关注
原创 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
原创 【Vue.js】Vue官方文档学习-表单input绑定
v-model指令:在表单 input 和 textarea 元素上创建双向数据绑定。根据 input 的 type 类型自动地以正确的方式更新元素。会忽略所有表单元素中 value, checked 或 selected 属性上初始设置的值。将 Vue 实例中的 data 作为真实数据来源。单行文本 <div id="app1"> ...
2018-08-01 19:39:31 1020
原创 【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
原创 【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
原创 【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
原创 【Vue.js】Vue官方文档学习-class绑定
在数据绑定中,一个常见需求是,将数据与元素的 class 列表以及元素的 style 内联样式的操作绑定在一起。 由于它们都是属性,因此我们可以使用 v-bind 来处理它们:只需从表达式中计算出最终的字符串。 然而,处理字符串拼接,既麻烦又容易出错。 为此,在使用 v-bind 指令来处理 class 和 style 时,Vue 对此做了特别的增强。 表达式除了可以是字符串,也能够是对象...
2018-07-25 11:37:26 158
原创 【Vue.js】Vue官方文档学习-computed属性和watcher
一、computed属性对于所有复杂逻辑,你都应该使用 computed 属性。为什么呢?在模板中放入太多的逻辑,会使模板过度膨胀和难以维护。 当你想要在模板中多次引用时,就会更加难以处理。<div id="example"> {{ message.split('').reverse().join('') }}</div><div id...
2018-07-23 16:23:14 309
原创 【Vue.js】Vue官方文档学习-模板语法
一、插值文本mustache语法数据绑定最基本的形式。 mustache”语法:双花括号的文本插值,将数据中的 HTML 转为纯文本后再进行插值。 < span >Message: {{ msg }}< /span > mustache 标签将会被替换为 data 对象上对应的 msg 属性的值。 只要绑定的数据对象上的 msg 属性发生改变,插...
2018-07-22 18:26:15 272
原创 【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
原创 【Vue.js】Vue官方文档学习-介绍
一、Vue.js是什么?Vue.js是一套构建用户界面的渐进式框架。 Vue 从根本上采用最小成本、渐进增量的设计。 Vue 的核心库只专注于视图层。 当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动。二、安装直接引入< script >标签三、声明式渲染Vue.js 的核心是:可以采用简洁的模板语法...
2018-07-21 15:43:11 1463
原创 用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 6148
原创 CSS3之对盒子中容纳不下的内容的显示
CSS3之对盒子中容纳不下的内容的显示我们的盒子呢通常是有宽高滴,可是我们盒子里装的东西(子元素)的大小很有可能超出盒子的大小。 这个时候我们通常使用overflow属性来对容纳不下的内容进行设置~通常我们有这几个属性值: hidden:隐藏 scroll:滚动 auto:x方向和y方向自动进行滚动设置 visible:和不写overflow属性是一样的效果同时还有overf...
2018-04-20 17:47:02 702
原创 CSS3的盒子类型
CSS3的盒子类型首先呢,我们要知道css3中用display属性来描述盒子的类型滴。像block类型和inline类型都是基本的盒子模型。 常见的div和p标签默认就是block类型,而a和span默认的就是inline类型。 我分别给div元素和span元素添加了背景颜色,这样就可以看到block和inline的区别啦~通过在项目里经验,我们经常会遇到不希望目标元素被块元素...
2018-04-20 17:31:15 982
原创 Vue.js高仿饿了么外卖APP(三)具体样式遇到的问题2
goods部分调试时,favicon.ico资源加载失败问题 http://blog.csdn.net/xiejunna/article/details/73200605Failed to resolve directive: el vue2报错 http://blog.csdn.net/yp090416/article/details/74087255"better-scroll":"^0.1
2017-10-14 20:47:20 748
原创 flex布局-随鼠标滚动而滚动
goods 随着页面的滚动而滚动:最外层div设置绝对定位和flextop/bottom是适口的高度width:100%左侧div 设置flex属性 第一个属性值为等分 第二个属性值是内容缩放情况 第三个是占位空间。width设置和flex像素相同
2017-10-12 11:51:48 891
原创 Vue.js高仿饿了么外卖APP(二)具体样式遇到的问题
实现多余文字数据变成…效果(有高度的前提)white-space:nowrap overflow:hidden text-overflow:ellipsis两个span挨着会有空白间隙,方法是给它们的父元素设置font-size为0(这样会使上述的…消失),这个时候使得两个span没有间隙就可以了。设置背景图片 模糊效果filter:blur(10px)背景图片用rgb
2017-10-07 11:44:42 1301
原创 Vue.js高仿饿了么外卖APP(一)骨架搭建遇到的问题
骨架reset.css 初始化css的默认样式<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimun-scale=1.0,user-scalable=no"> width - viewport的宽度 height - viewport的高度 initial-sc
2017-09-20 21:14:12 1589
原创 安装使用vue-cli
一、安装在命令提示符中npm node -v检测node版本 需要4以上安装:npm install -g vue-cli vue init webpack 自命名出现Project name 自命名 Project description 描述 Author 成功 8080窗口 二、使用在sublime里面导入sell这个文件夹。main.js是js
2017-09-20 12:33:08 260
原创 vue props怎么传多个数据?
“` var mycomponent = Vue.extend({ props: [‘title’,’content’], template: ‘{{title}}{{content}}‘, })Vue.component('my-component',mycomponent);var vm = new Vue({ el: "
2017-09-07 15:14:52 3290
原创 本地端口模拟ajax异步请求php文件
之前在使用gulp本地模拟ajax方法时,遇到了一个问题:在访问php文件时,返回的文件总是出错。我一度以为是php文件出错,但由于该文件是随书本附带的源码内容,这种情况的可能性在我心中的地位降低了。解决方法是:本地需要搭建php配置环境。 使用的软件是wamp。 配置方法及测试参考:http://blog.csdn.net/pannikin/article/details/54095100
2017-05-10 09:01:51 925 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人