毛球Josey-CSDN博客

原创 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 165

原创【Vue.js】Vue官方文档学习-表单input绑定

v-model指令：在表单 input 和 textarea 元素上创建双向数据绑定。根据 input 的 type 类型自动地以正确的方式更新元素。会忽略所有表单元素中 value, checked 或 selected 属性上初始设置的值。将 Vue 实例中的 data 作为真实数据来源。单行文本 <div id="app1"> ...

2018-08-01 19:39:31 1007

原创【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 209

原创【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 200

原创【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> &amp

2018-07-25 19:37:48 152

原创【Vue.js】Vue官方文档学习-class绑定

在数据绑定中，一个常见需求是，将数据与元素的 class 列表以及元素的 style 内联样式的操作绑定在一起。由于它们都是属性，因此我们可以使用 v-bind 来处理它们：只需从表达式中计算出最终的字符串。然而，处理字符串拼接，既麻烦又容易出错。为此，在使用 v-bind 指令来处理 class 和 style 时，Vue 对此做了特别的增强。表达式除了可以是字符串，也能够是对象...

2018-07-25 11:37:26 150

原创【Vue.js】Vue官方文档学习-computed属性和watcher

一、computed属性对于所有复杂逻辑，你都应该使用 computed 属性。为什么呢？在模板中放入太多的逻辑，会使模板过度膨胀和难以维护。当你想要在模板中多次引用时，就会更加难以处理。<div id="example"> {{ message.split('').reverse().join('') }}</div><div id...

2018-07-23 16:23:14 303

原创【Vue.js】Vue官方文档学习-模板语法

一、插值文本mustache语法数据绑定最基本的形式。 mustache”语法：双花括号的文本插值，将数据中的 HTML 转为纯文本后再进行插值。 < span >Message: {{ msg }}< /span > mustache 标签将会被替换为 data 对象上对应的 msg 属性的值。只要绑定的数据对象上的 msg 属性发生改变，插...

2018-07-22 18:26:15 261

原创【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 2088

原创【Vue.js】Vue官方文档学习-介绍

一、Vue.js是什么?Vue.js是一套构建用户界面的渐进式框架。 Vue 从根本上采用最小成本、渐进增量的设计。 Vue 的核心库只专注于视图层。当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供有力驱动。二、安装直接引入< script >标签三、声明式渲染Vue.js 的核心是：可以采用简洁的模板语法...

2018-07-21 15:43:11 1454

原创用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 6082

原创 CSS3之对盒子中容纳不下的内容的显示

CSS3之对盒子中容纳不下的内容的显示我们的盒子呢通常是有宽高滴，可是我们盒子里装的东西（子元素）的大小很有可能超出盒子的大小。这个时候我们通常使用overflow属性来对容纳不下的内容进行设置~通常我们有这几个属性值： hidden：隐藏 scroll：滚动 auto：x方向和y方向自动进行滚动设置 visible：和不写overflow属性是一样的效果同时还有overf...

2018-04-20 17:47:02 693

原创 CSS3的盒子类型

CSS3的盒子类型首先呢，我们要知道css3中用display属性来描述盒子的类型滴。像block类型和inline类型都是基本的盒子模型。常见的div和p标签默认就是block类型，而a和span默认的就是inline类型。我分别给div元素和span元素添加了背景颜色，这样就可以看到block和inline的区别啦~通过在项目里经验，我们经常会遇到不希望目标元素被块元素...

2018-04-20 17:31:15 971

原创 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 736

原创 flex布局-随鼠标滚动而滚动

goods 随着页面的滚动而滚动：最外层div设置绝对定位和flextop/bottom是适口的高度width：100%左侧div 设置flex属性第一个属性值为等分第二个属性值是内容缩放情况第三个是占位空间。width设置和flex像素相同

2017-10-12 11:51:48 882

原创 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 1293

原创 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 1581

原创安装使用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 253

原创 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 3269

原创本地端口模拟ajax异步请求php文件

之前在使用gulp本地模拟ajax方法时，遇到了一个问题：在访问php文件时，返回的文件总是出错。我一度以为是php文件出错，但由于该文件是随书本附带的源码内容，这种情况的可能性在我心中的地位降低了。解决方法是：本地需要搭建php配置环境。使用的软件是wamp。配置方法及测试参考：http://blog.csdn.net/pannikin/article/details/54095100

2017-05-10 09:01:51 917 1

毛球Josey