- 博客(14)
- 收藏
- 关注
RSS订阅原创 vue.js学习——计算属性
一、为什么会有计算属性在vue项目中遇到这样的情况，绑定的表达式需要经过复杂的逻辑，而这个表达式依赖于当前vue实例的数据属性，这个时候用计算属性，从而变的更清晰。<div id="app"> <p> {{ reversedText}}</p></div> <script>var vm = new Vue({ e...
2018-12-25 16:28:41
184
原创 如何用图片代替多选、单选按钮
在前端开发过程中，对于单选、多选按钮，遇到的问题大致有如下两个：第一，对于类似于单选多选答题，更希望能够实现点击选项也能够使得按钮选中，这得如何实现呢？第二，默认的单选、多选按钮颜值是真得很low啊，可否进行微整呢？一、实现点击选项选中按钮选中有两种方式：1、将label标签把选框和文本一起包围 <label> <input type="chec...
2018-12-19 10:53:34
3185
原创 vue.js表单与单选按钮
最近看到《vue.js实战》这本书中关于表单和v-model指令的部分，里面有这么一段话：单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为假时不选。<div class="app"> <input type="radio" :checked="picked" /> <label>单选按..
2018-12-14 11:31:40
3421
原创 vue.js表单与v-model（一）----输入框
一、input与v-model 碰撞起来的火花input元素结合v-model指令来实现双向绑定，当输入框输入内容变化时，绑定的变量的值发生变化；同样，当绑定变量的值发生变化，视图中输入框的值也会发生变化。其一般使用情景如下：html部分：<div id="app"> <input type="text" v-model="message" /> ...
2018-12-14 10:07:54
1956
原创 MVVM模式
现如今，很多知名的前端框架都使用了MVVM模式，比如vue.js、angular等。MVVM模式是由经典的软件架构MVC衍生来的，当view（视图）层发生变化时，会自动更新ViewModel（视图模型），反之亦然。 MVVM框架下，视图和数据是不能直接通信的，它们通过ViewModel来通信。ViewModel通常要实现一个observer（通信观察者），当数据发生变化时，ViewMode...
2018-12-06 16:11:46
308
原创 vue-router两种模式
说起vue-rouer，不得不提的一个概念是前端路由，要想深入理解前端路由，不得不了解路由、后端路由、前端路由和后端路由的区别、多页面应用、单页面应用这些概念。一、捋一捋概念呀先单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css（非必须文件可以使用懒加载，缩短首屏渲染时间）。所有的页面内容都包含在这个所谓的主页面中。但在写的...
2018-12-06 15:15:17
3923
原创 vue 单页面应用中遇到的与IE9有关的坑（二）-----IE9对css文件大小和选择器个数的限制
最近做项目，前端用的vue.js。整个项目初版开发完成之后，部署在测试服务器进行一些边边角角的测试与处理，用浏览器打开后发现样式完全跑偏，表示很恐怖呀……那，IE9，你不兼容ES6，如今又是闹哪样？之后打开F12进行分析，发现，所有的样式都没加载进来啊！原因是IE浏览器对CSS文件大小是有限制的，一种说法是：单个css文件不能超过250kb，另一种说法是单个css文件中选择器个数不能超过400...
2018-11-28 15:37:33
1248
1
原创 vue单页面应用打包后相对路径、绝对路径相关问题
在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子来看一下：1、打包后的index.html文件2、打包后的css文件所以，如果在项目中需要使用相对路径来获取静态的资源文件，需要怎么做呢？1...
2018-11-28 14:42:13
10068
原创 vue 单页面应用中遇到的与IE9有关的坑（一）----IE9不懂ES6
最近几个项目基本都是使用vue 2.x，也是经常碰到浏览器兼容性问题的处理，主要还是针对IE浏览器。Vue 官方对于IE 浏览器版本兼容情况的描述是IE9+， vuejs 本身以及生态的官方核心插件（VueRouter、Vuex等）均可以在 IE9 上正常使用。但是是什么导致在IE9甚至更高版本的IE浏览器中产生兼容问题呢？其中一个原因就是：版本较旧的浏览器并不支持ES6 规范，尤...
2018-11-28 11:03:11
1127
原创 display与visibility的区别
CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏，但是两者还是有区别的，总结为以下三点：1、被隐藏元素是否占据空间2、后代元素的可见性3、对计数器的影响4、动画效果下面分别对上述三个区别进行说明：一、被隐藏元素是否占据空间display:none隐藏后的元素不占据空间，visibility:hidden隐藏后的元素仍...
2018-08-08 10:18:41
252
原创 CSS中的一些属性百分比值，相对于谁计算？
在css属性中，很多属性的取值可以是百分比，比如：width、height、padding、margin、font-size、line-height、background-position等，那么这些百分比值的计算是相对于谁呢？先来看几个例子，分别是正常文档流中、浮动情况下和定位情况下。正常文档流中：<div class="parent"> <div cla...
2018-08-07 08:22:58
7746
1
原创 CSS3之box-shadow
box-shadow 给元素边框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。一、语法box-shadow: h-shadow v-shadow blur spread color inset;h-shadow 必需 阴影的水平偏移量。 可正可负，正值...
2018-07-19 10:24:04
109
原创 块状元素与内联级元素
一、块级元素（block-level element）块级元素的前后均有换行，不会和其他元素并列显示在一行。注意区分的是，display值为block和块级元素并不是完全对等的，即display值为block一定是块级元素，但是块级元素的display值不一定是block，还可以是table、list-item等值。特点：1、前后有换行2、可以设置高度、宽度、padding、margin3、宽度缺...
2018-07-06 11:05:24
184
原创 CSS之background
一、元素的前景层和背景层元素的前景层包含内容（如文本、图片）和边框，元素的背景层可以是背景色（background-color）或者背景图片（background-image），背景图片叠加在背景颜色之上。二、CSS背景常用属性1、背景颜色background-color前景色会影响元素的内容和边框，分三种情况：若使用边框属性设置了边框颜色，则边框显示为设置的颜色；若边框未使用边框属性设置边框颜色...
2018-05-30 08:47:26
575
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人