12 2017 档案
摘要:简介 overflow看上去其貌不扬,其中蕴含的知识点还是很多的,有很多鲜为人知的特性表现。 overflow基本属性值 1、visible(默认) 2、hidden 3、scroll 4、auto 5、inherit body/html与滚动条 无论什么浏览器,默认滚动条均来自html标签,而不是
阅读全文
摘要:absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1、独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏; 2、无依赖,不受relative限制的,行为表现上是不使用top/right/bottom/left任何一个属性或使用aut
阅读全文
摘要:float的设计初衷仅仅是:为了文字环绕效果 float的包裹与破坏 包裹:收缩、坚挺、隔绝(BFC) 破坏:父元素高度塌陷 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Layout</title> <style> .b
阅读全文
摘要:什么叫做布局? 又称为版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合。 题目:假设高度已知,请写出三栏布局,其中左栏和右栏宽度各为300px,中间自适应 1、浮动布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit
阅读全文
摘要:结构 样式 行为真正的分离 前端初级人员会在页面上单纯的用各个div把相关内容独立开; 前端中级人员明白相关属性的设置会给元素带来什么改变,从而减少div的书写; 前端高级人员会以及其简单的和稳定的方式实现相应的效果。 代码展示: <!DOCTYPE html> <html> <head> <met
阅读全文
摘要:SEO:搜索引擎优化(免费); SEM:搜索引擎营销(付费)。 它们两者的区别是: 1、SEM高投入,SEO低投入; 2、SEM短、效益块,SEO长期投入、增长慢; 3、新广告法颁布之后SEM广告位减少,竞争压力大。 专业名词解释 1、IP:独立IP访问的用户; 2、PV:页面浏览量或点击量; 3、
阅读全文
摘要:案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化。 思路分析:在开发之前需要想清楚要用到Vue中的什么方法或者特性来实现所要的功能,把案例分成以下几个部分来开发: 展示数据,需要使用v-for指令
阅读全文
摘要:计算属性是一个很邪门的东西,只要在它的函数里引用了data中的某个属性,当这个属性发生变化的时候,函数仿佛可以嗅探到这个变化,并自动重新执行。 上代码会源源不断的打印出a的值。如果希望b依赖data中的x而变化,只需要保证b函数中有this.x即可。如果函数中没有出现data中的属性,那么无论dat
阅读全文
摘要:Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统。本文仅仅探究双向绑定是怎样实现的。先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例。 一、访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty
阅读全文
摘要:前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可。涉及到复杂逻辑时,则需要用到methods、computed、watch等方法。本文将详细介绍Vue实例对象的数据选项。 data data是Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter,
阅读全文
摘要:实现商品购买列表页面 步骤一:新建goodslist.vue文件 <template> <div id="tml"> <!--利用mui中的图文表格组件实现--> <div id="mui-content" class="mui-content" style="background-color:#f
阅读全文
摘要:实现图片分享列表 步骤一:新增图片列表文件photolist.vue <template> <div id="tml"> 图片分享页面 </div> </template> <script> </script> <style> </style> 步骤二:配置入口文件main.js的路由规则 //导入
阅读全文
摘要:实现新闻咨询页面 目录结构 步骤一:创建newslist.vue文件 <template> <div id="tml"> <!--使用mui框架,实现新闻资讯列表样式--> <ul class="mui-table-view"> <li v-for="item in list" class="mui
阅读全文
摘要:实现根组件通用的头部和底部样式 明白由webpack搭建起来的Vue项目的执行流程,那么就可以知道实现这个需要只要在根组件和入口文件上做“手脚”即可 <!--以后项目的根组件--> <template> <div> <!--利用mint-ui中的header组件实现整个系统的头部--> <mt-he
阅读全文
摘要:利用webpack解析和打包.vue组件页面 相关知识: vue项目中的每个页面其实都是一个.vue的文件,这种文件,Vue称之为组件页面,必须借助于webpack的vue-loader才能运行,所以必须安装相关的包。 【注意】 从webpack2.0开始,在webpack.config.js中添加
阅读全文
摘要:什么是递归? 百度百科:程序调用自身的编程技巧称为递归( recursion)。递归做为一种算法在程序设计语言中广泛应用。 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过
阅读全文
摘要:开始使用webpack之前,首先要先安装npm。以下是npm的安装过程 安装: 一般情况下安装了node.js就会自动装上npm 测试: npm -v 升级: (window系统)npm install npm -g或者cnpm install npm -g 注意: 一般情况下npm的版本跟随着no
阅读全文
摘要:了解webpack的魔力: 项目结构以及开发环境 webpack初体验之打包文件 1、首先创建三个文件,分别是index.html、main.js和calc.js index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t
阅读全文
摘要:1、安装webpack失败问题 错误原因: 这主要是我以普通用户的身份进行webpack的全局安装,权限不够。 【普通用户】 说白了就是通过运行window+r+cmd进入的命令行 解决方式: 用管理员权限打开命令行 然后输入cnpm install webpack -g即可 2、webpack运行
阅读全文
摘要:watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 watch监控路由对象 计算属性computed的特点 计算属性会依赖于他使用的data中的属性,只要是依赖的属性值有改变,则自动重新调用一下计算属性; 如
阅读全文
摘要:前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https://github.com/vuejs/vue-router/tree/dev/dist vue2.0
阅读全文
摘要:前置知识请戳这里 获取DOM对象以及组件对象
阅读全文
摘要:本文只是结合一些代码和图片加强对Vue动画的理解,更多资料请戳这里 结合原生CSS实现动画 下面是一张图片,简单清晰明了是吧^-^ 下面是一段代码 结合animate.css实现动画 使用钩子函数实现动画效果
阅读全文
摘要:什么是钩子? 大白话就是一系列的内部方法 下面是一张生命周期钩子的说明图 下面是一段代码测试 执行结果
阅读全文
摘要:Vue可以借助于vue-resource来实现Ajax请求 http请求报文 浏览器与服务器数据交互是遵循http协议的,当浏览器要访问服务器的时候,浏览器需要将相关请求数据提交给服务器。 格式分为:请求报文行、请求报文头、请求空行、请求报文体 http响应报文 当浏览器请求服务器的时候,服务器需要
阅读全文
摘要:MVVM拆分解释为: Model:负责数据存储; View:负责页面展示; View Model:负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示 MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离,使各自的职责更加清晰,后期代码维护更加简单。以下用图解的形式分析Ajax
阅读全文
摘要:概念 Vue1.0提供了一系列的固定逻辑来使程序员更加容易的实现这些功能,我们称它为系统过滤器。Vue也提供了一个接口用来给程序员定义属于自己的特殊逻辑,Vue称之为自定义过滤器。 自定义私有的过滤器 下面是一个冗余的示范代码 自定义全局过滤器
阅读全文
摘要:v-on注册事件 【更多事件】 差值表达式 vue-text和v-html 用来解决网速过慢而导致一开始渲染出错的问题 v-cloak v-cloak指令保持在元素上直到关联实例结束编译后自动移出,v-cloak和CSS规则如[v-cloak]{display:none;}一起用时,这个指令可以隐藏
阅读全文
摘要:前面的话 组件(component)是Vue最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现、功能和样式。每个页面,根据自己的需要,使用不同的组件来拼接页面。这种开发模式使得前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦。本文将
阅读全文
摘要:前言 由于个人十分欣赏博友——小火柴的蓝色理想,他的博文我看了大多数,觉得十分的精彩,然而很多都是看后即忘。我想除了没有经常动手敲代码,更可能是在看的时候忽略了很多细节,因此打算把他的博文通通给“抄袭”下来,各位不要和我一般见识哈^_^ 概述 Vue.js是一套构建用户界面的渐进式框架,采用的是自底
阅读全文
摘要:对于代码格式到底为两个空格还是四个空格,可能大家喜欢的都不同,如果你是在使用HBuilder编辑器,那么恭喜你,这两种代码格式你可以轻易的更换。下面贴步骤 1、打开工具—>选项 2、选择HBuilder—>整理代码格式设置 3、新建一个配置,名字自己取 4、点击右上角的修改,即可进入编辑页面 当你配
阅读全文
摘要:最近在微信公众号上记录自己的技术成长以及面试经历,在添加代码块的时候,尝试了很多种方式,都无法很友善的显示代码,对于代码的换行和样式感到头大,对这个排版问题,苦恼了很久。 刚开始有在各种微信公众号编辑器里插入代码然后进行复制,然而都不尽人意,需要自己不断的调整代码格式,并且把代码复制进微信公众号上会
阅读全文
摘要:1、函数参数的默认值 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。现在ES6可以为函数的参数添加默认值,简洁了许多。 2、rest参数 ES6引入rest参数,形式为:“...变量名”,用于获取函数的多余参数,这样就不需要使用arguments对象了,rest参数搭配的变量是一
阅读全文
摘要:1、Array.from() 该方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象,包括ES6新增的数据结构Set和Map。下面是一个类似数组的对象,Array.from将它转为真正的数组。 2、Array.of() 该方法用于将
阅读全文
摘要:1、二进制和八进制表示法 ES6提供了二进制和八进制数值的新的写法,分别用前缀0b或0B和0o或0O表示。 2、Number.isFinite(),Number.isNaN() ES6在Number对象上,新提供了Number.isFinite()和Number.isNaN()两个方法用来检查一个数
阅读全文
摘要:1、RegExp构造函数 在ES5中,RegExp构造函数的参数有两种情况。第一种情况是参数是字符串,这时第二个参数表示正则表达式的修饰符;第二种情况是,参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝。但是,ES5不允许此时使用第二个参数,添加修饰符,否则会报错 ES6改变了这种行为,如果
阅读全文
摘要:安装 全局环境安装,不必要在项目地址下安装:npm install -g vue-cli 卸载 全局卸载:npm uninstall -g vue-cli 查看是否安装成功:vue list 查看vue版本,vue -V 回车,查看vue最新的版本。 使用 进入到编辑器主目录下==>vue init
阅读全文
摘要:简介 历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如Ruby的require和Python的import,甚至就连CSS都有@import,但是JavaScript任何这方面的支持都没有,这对大
阅读全文
摘要:简介 babel是一个广泛使用的转码器,可以将ES6代码转化为ES5代码,从而在现有环境执行,这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持。 安装及配置 npm install babel-cli --save-dev 或者 cnpm install babel-cli --s
阅读全文
摘要:1、不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大。 碰到频率:100% 解决方案:初始化CSS的默认样式,*{margin:0;padding:0}。也可以使用其他网站的初始化代码。 备注:这个是最常见的也是最
阅读全文