前端
SmithJun
http://mambajun.github.io/
展开
-
vue创建新的工程项目
目录Vue新的工程项目创建一、目录结构配置Vue新的工程项目创建使用vue ui来创建一、目录结构配置原创 2019-07-08 12:55:59 · 1156 阅读 · 0 评论 -
使用webpack+vue.js构建前端工程化
目录简介一、创建项目简介本例主要采用vue-cli配合webpack来创建项目,采用了VueRouter,引入axios库调用后端API,渲染数据,实现了增量改查功能。一、创建项目cmd 进入一个将要建立项目的目录例如:D:Vue创建项目vue init webpack Shop (项目名)进入 Shop 目录安装依赖:npm install修改config目录...原创 2019-05-20 14:42:35 · 277 阅读 · 0 评论 -
Vue使用踩坑
我会把我使用Vue过程中踩得坑放在这里一、vue 项目中的图片路径一、vue 项目中的图片路径仿照Logo把图片放在这里,在模板中遍历对象中的图片地址,怎么弄都是加载不出来,其他使用的时候却正常,后来在网上找了才发现,放在这里...原创 2019-05-08 07:53:16 · 272 阅读 · 0 评论 -
十一、动态组件与v-once指令
本篇想分享两个东西一、动态组件动态组件的格式:就像规定的作用域插槽一样,特定的格式 <component :is='type'></component> 其中的 :is 用来指明是哪一个组件,如果是就会创建该组件,不是就会销毁该组件 不管是 动态组件还是 if 组件每次都是在反复创建 和 销毁,这样对性能有一定的影响二、v-once指令v-o...原创 2019-04-09 18:26:43 · 177 阅读 · 0 评论 -
十、Vue 中的作用域插槽
小编有话说:如果你还不知道什么是插槽的话,建议你先看看这个 插槽好了,下面小编就来聊聊我理解的作用域 插槽作用域插槽 格式:必须是下面的这个种 template中 <template slot-scope="props"> <h1>{{props.item}}</h1> </template> 其中有 ...原创 2019-04-09 18:06:59 · 762 阅读 · 1 评论 -
九、Vue中使用插槽(slot)、聚类插槽
文章目录一、基本的插槽二、聚类插槽这个是普通插槽的Demo这个是聚类插槽的Demo一、基本的插槽这里总结两点如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示(插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 slot 代表 父组件往子组件中 插入的标签 这里就代表 组件子组件中的 <p>Dell</p&...原创 2019-04-09 18:00:20 · 1894 阅读 · 1 评论 -
八、Vue 组件参数校验与非props特性
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>组件参数校验与非props特性</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></...原创 2019-04-07 15:56:12 · 218 阅读 · 0 评论 -
七、Vue组件使用的细节点
is 使用table、ul、ol、select 这类的不能直接用模板,按照各自的格式写,在想要用模板的地方 使用 is='row',这样浏览器就不会解析错误 组件中的data组件中定义 data --组件中的 data 必须是一个函数,而且返回是一个对象,因为组件中的数据是可变的ref引用1、在标签上使用 ref引用是获取 DOM 元素2、在组件生使用 ref引用 获取的的该组件...原创 2019-04-07 15:49:34 · 131 阅读 · 0 评论 -
六、Vue中的列表渲染
一、改变数组的引用二、调用数字的变异方法操作数组的方法 push pop shift unshift splice sort reverse三Vue 中对列表的修改有两种 set 方式使用全局的set 方法Vue.set(vm.list[0] ,'text', '123') 要修改的对象 要修改/添加属性 属性值使用具体的Vue对象的set方法vm.$s...原创 2019-04-07 15:44:45 · 268 阅读 · 0 评论 -
五、Vue 中的条件渲染
一、Vue 中的if 系类知道格式就行了,用法和Java等一样v-ifv-if v-elsev-if v-else-if v-else<div v-if=""></div><div v-else-if=""></div><div v-else=""></div>二、Vue中的 showv-show...原创 2019-04-07 15:37:12 · 143 阅读 · 0 评论 -
四、Vue中的样式绑定
Vue 中的样式绑定分为两种class以对象的形式,给对应的字段名指定 相应的类名以数组的形式,往该数组中添加 想要设置 成为的类style以对象的形式,给这个对象设置CSS 样式,相当于 写CSS 样式一样以数组的形式,直接往数组中增删 相应的样式<!DOCTYPE html><html><head> <meta ch...原创 2019-04-07 15:22:25 · 199 阅读 · 0 评论 -
三、Vue 组件间传值,组件间传值,父子组件之间的数据传递
这个Demo中通过 v-bind绑定,实现了父子组件间的数据传递子组件往父组件传值 1、现在子组件中进行监听注册 @click='handleItemClick' 2、在子组件中的methods中注册 handleItemClick 3、this.$emit("delete"); 子组件 被点击时,向外触发一个 delete事件, 4、同时需要在父组件中进行对该事件进行监听 @del...原创 2019-04-02 09:56:39 · 240 阅读 · 0 评论 -
二、Vue前端组件化 全局和局部组件
vue 的全局和局部组件 Demo这里我把学习的知识点都放在代码对应的注释中了<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>前端组件化</title> <script src="https://cdn.jsdelivr.net/npm/v...原创 2019-04-02 09:46:27 · 341 阅读 · 1 评论 -
一、vue 计算属性,方法,侦听器
文章结构一、计算 属性二、 方法三、侦听器一、计算 属性计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 注意如果你为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。 computed: { aDouble: vm => vm.a * 2...原创 2019-03-27 22:54:13 · 284 阅读 · 0 评论 -
鼠标位置的获取pageX,pageY,screenX,screenY,clientX,和clientY,offsetX ,offsetY,layerX,layerY的使用 和 区别
pageX,pageY,screenX,screenY,clientX,和clientY返回一个数,其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置,参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。1、pageX和pageY: 相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置, 并且如果在...原创 2019-03-31 10:51:09 · 12662 阅读 · 2 评论 -
getComputedStyle方法 获取元素CSS值
一、getComputedStyle 介绍getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。 getComputedStyle() gives the final used values of all the CSS properties of an element...原创 2019-03-30 11:53:43 · 3114 阅读 · 1 评论 -
五、JavaScript 面向对象(类比Java、C++来学习)
目录面向对象概述自定义对象构造函数功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入面向对象概述面向对象思想小编理解为...原创 2019-03-24 13:01:53 · 345 阅读 · 0 评论 -
四、JavaScript数组
小编心得: JavaScript的数组 和 Java中的集合相似,存储的对象可以不是单一的数据类型,记住从 0 开始数数原创 2019-03-18 20:07:50 · 143 阅读 · 0 评论 -
三、JavaScript 函数
函数一、函数创建二、原创 2019-03-18 20:02:32 · 179 阅读 · 0 评论 -
二、JavaScript 控制流程
选择结构一、分支语句if(){}if(){}else{}if(){}else if(){}else{}switch 语句循环结构while(){}do{}while();for(;;){}跳转语句continue 循环下一次break 跳出当前循环...原创 2019-03-18 19:55:27 · 205 阅读 · 0 评论 -
一、JavaScript 基础语法
仅仅整理感觉小编值得整理的知识点变量一、标识符1、大小写字母、数字、下划线、美元符号组成2、不能以数字开头3、区分大小写二、变量的使用var 声明,但未赋值的变量 默认为undefined三、常量常量可以理解为运行中始终不变的量(类比Java中的static,c++ 中的 const)用 const 定义常量 ,习惯上是 大写如: 圆周率 const P...原创 2019-03-18 19:49:40 · 180 阅读 · 0 评论 -
JavaScript 快速扫盲(基本语法,类型,变量与运算符,控制流程,函数)
JavaScript基本语法、流程控制、函数和数组等基本知识点的整理一、基本语法JavaScript引入方式嵌入式 使用<script>标签包裹JavaScript代码,直接编写到HTML文件中。 type属性用于告知浏览器脚本的类型。 type默认值为text/javascript,在编写JavaScript时可省略type属性。-外链式指将JavaScript...原创 2019-03-18 18:52:45 · 236 阅读 · 0 评论 -
JavaScript 中的相等性判断
ES2015中有四种相等算法:抽象相等比较 (==) 严格相等比较 (===): 用于Array.prototype.indexOf,Array.prototype.lastIndexOf,和case-matching 同值零: 用于%TypedArray%和ArrayBuffer构造函数、以及Map和Set操作, 并将用于 ES2016/ES7 中的String.prot...原创 2019-03-03 12:07:11 · 354 阅读 · 0 评论 -
CSS flex属性
布局尽量避免使用 float,改用 flex 布局,这里是 布局时 不同个数的具体意义详情/* Keyword values */flex: auto;flex: initial;flex: none;/* One value, unitless number: flex-grow */flex: 2;/* One value, width/height: flex-basis ...原创 2019-05-10 14:19:05 · 891 阅读 · 0 评论 -
padding,margin带一个、二个、三个、四个参数的不同含义
margin :padding:原创 2019-03-14 10:33:30 · 3050 阅读 · 0 评论 -
CSS中link和@import的使用区别
我们都知道在html中引入外部的CSS 有2种方式,link标签和@import,他们又什么区别呢?1.从属关系区别@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。2.加载顺序区别加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载...原创 2019-03-12 18:17:56 · 1395 阅读 · 1 评论 -
CSS,font-family,好看常用的中文字体
例1(小米米官网):font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;例2(淘宝技术研发中心):font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;例3(加网 ):font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5...原创 2019-03-04 12:57:14 · 11678 阅读 · 0 评论 -
CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志
CSS 列表从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单,甚至你的所有朋友都可以表示为一个列表或者是列表的列表。由于列表如此多样,这使得列表相当重要,所以说,CSS 中列表样式不太丰富确实是一大憾事。列表类型要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型。例如,在一个无序列表中,列表项的标志 (marker) ...转载 2019-02-26 14:14:53 · 2874 阅读 · 0 评论 -
HTML5网页特殊字符大全(参考)
平时写代码很少用到HTML的特殊字符,最常用的可能是&nbsp;了,但有时在移动端为了节省时间,可能会用这些字符实现某种特殊效果,现整理如下:使用方法:这些字符属于unicode字符集,所以,你的文档需要声明为UTF-8; 编号用在HTML中时,需要在前面加上&#符号; 用于CSS文件中,但是需要用反斜杠\转义; 用于JavaScript,和CSS用法一样,不过要用\...转载 2019-02-26 10:47:26 · 8806 阅读 · 0 评论 -
在手机上查看电脑端开发的网页,(可使用IIS或tomcat,特别注意防火墙、IP地址、局域网的相关知识或使用方法)
这里的使用的两种方法,经过我的亲身经历,发现必须在防火墙关闭下才可以一、第一种 是使用 llS手机访问电脑服务器上的网页,在电脑上访问的是(localhost:8848/Try/Delete.html)1、开启电脑热点2、查看Wifi 密码3、手机连上这个热点4、Windows + R 调出 DOS ,输入 ipconfig 来获取IPv4地址5、用手机访问...原创 2019-01-20 23:00:20 · 2007 阅读 · 0 评论 -
解决npm 国内慢的问题
npm镜像源更改方法一:更改npm配置文件:npm config set registry http://registry.npm.taobao.org复制代码URL 即为需要设置的镜像站点地址,如淘宝镜像: http://registry.npm.taobao.org方法二:你可以使用淘宝 NPM 镜像定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:npm...原创 2019-08-20 16:44:24 · 334 阅读 · 0 评论