在Vue组件中,使用.foo img{max-width:100%}不会生效,解决方法如下:
template
div class="foo"
div v-html="myHtml" /div
/div
/template
style scoped
.foo { height: 300px; }
/style
而如果在组件中使用了v-html,要为myHtml中的标签添加CSS样式,我们需要在写样式的时候添加 :
.foo img { max-width: 100%; }
这样,编译
大多数情况下,我们都是判断页面滚动到底部,如下:
window.addEventListener('scroll', this.handleScroll);
// 处理滚动到底部的事件
handleScroll(arg) {
var clientHeight = document.documentElement.clientHeight; // 客户区大小
var scrollHeight = document.documentElement.scrollHeight; // 没用滚动条的情况下,元素内容的总高度
var scrollTop
// 时间转换 几分钟 几小时 几天
tools.formatTime = function (timespan) {
var dateTime = new Date(timespan);
var year = dateTime.getFullYear();
var month = dateTime.getMonth() + 1;
var day = dateTime.getDate();
var hour = dateTime.getHours();
var minute = dateTime.getMinutes();
var second
当一个api是GET请求, 地址是http://javascript.net.cn/user/comments
正常的GET请求是没有问题的,但是有时候该GET请求会变成非简单请求。比如:
this.$http({
method: 'GET',
url: '/user/comments',
params: {page:1, object_id:that.article.id, table_name:"portal_post"},
headers: {
'XX-Token': tools.getCookie('token'),
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
本文详细介绍CORS的内部机制。
一、简介
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出
解决方案一,检查Vuex中的数据,没有的话,重新从服务器获取,该方案可以满足存储的简单信息。该方法的好处是比较干净。
mounted: function(){
var that = this;
//如果登录后,刷新了,vuex里的登录数据会清空,这里重新从服务器获取数据
if(tools.getCookie('token') && !this.$store.state.user.user_type){
// 判断不需要重新获取信息的页面
var noNeed = ['/login','/register','/reset'];
在写vue或者react中,有时候目录过深。使用相对路径引入模块,有点容易出错。比如下面这样:
import {tools} from "../../../../../tools";
在webpack.config.js 中,配置如下:
resolve: {
alias: {
'@': require('path').resolve(__dirname, 'src')
}
},
然后就可以在项目中使用绝对路径了。
import {tools} from "@/tools";
那么CSS中的1px是什么?浏览器是怎么渲染它的?网页在一个叫viewport的东西里渲染,可以理解为画布,画布被分成 N x M 个小方格,1个CSS像素,就是其中的一个小方格。一,viewport又是什么?网页在viewport上渲染,可以想像在PS上画东西时,上面也有个画布,这个画布分割了 N x M 个方格,N是它的宽度,M是它的高度。宽高都可以任意设置,所以说viewport是虚拟的。假设设置宽度是400,那么浏览器显示区域的横向将被分为400份,CSS的1px占的宽度就是显示区域的 1/400。viewport值不一样时,对页面元素宽度的影响,比如一个头像宽度是50px。 当vie
物体与观察者的距离远近在静态时通过物体的大小来体现。当物体运动时,通过远近物体不同的运动速度来体现,从而形成层次感。近处的物体运动快,远处的物体运动慢。
手机演示地址://javascript.net.cn/test/446/#/
代码:
template
div class="viewport"
div class="sence"
div class="sprite sprite-free-right" /div
/div
div class="front-background" /div
只关注了2d方面的,对现在项目有意义的概念。
UI坐标系
UI坐标就是Android和iOS等应用开发的时候使用的二维坐标系。它的原点是在左上角的。
我看pixi.js的坐标原点在左上角,
OpenGL坐标
OpenGL坐标是种三维坐标。由于Cocos2d-x底层采用OpenGL渲染,因此的默认坐标就是OpenGL坐标,只不过只采用两维(x和y轴)。如果不考虑z轴,OpenGL坐标的原点在左下角。
世界坐标系
世界坐标系是系统的绝对坐标系,在没有建立用户坐标系之前画面上所有点的坐标都是以该坐标系的原点来确定各自的位置的。
世界坐标和模型坐标,Cocos2d-JS的坐标也
方法一,提示蒙层提醒用户保持竖屏体验,这种方法体验太差
方法二,强制横屏显示,对屏幕 resize 事件进行监听,当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可,代码如下所示。 这种方法可以解决绝大多数问题了。
// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
var detectOrient = function() {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
效果:
算法:
代码:
div class="stage"
div class="sence"
div class="sprite" /div
/div
/div
style
.stage{width: 100%; overflow: hidden; position: relative; }
.sence{width: 1024px; height: 350px; background:url(../assets/images/background.jpg); position: relative;}
.s
类似《返校》和《无尽梦魇》的那种。
基本算法:
主要是解决精灵匀速直线运动的问题。
效果:
代码:
div class="stage"
div class="sence"
div class="sprite" /div
/div
/div
style
.stage{width: 100%; overflow: hidden; position: relative; }
.sence{width: 1024px; height: 350px; background:url(../assets/i
body style="overflow:hidden"
div class="stage"
div class="content"
img src="images/timg.jpeg" alt=""
/div
div class="roles"
div class="roleOne"
img src="images/mengpo.png" alt=""
/div
问题描述:
父组件传如lesser和larger两个参数,并且是ajax从服务器获取的。子组件定义created阶段输出lesser和larger。但larger为空。改成延迟输出则正确。
问题来源:https://segmentfault.com/q/1010000008912491
提问者的主要问题是没有搞清楚,vue实例的生命周期,created函数只会执行一次。
父组件:
template
my-editor :lesser="lesser" :larger="larger" /my-editor
/template
script
event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.pageX、event.pageY
类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
event.offsetX、event.offsetY
鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
event.sc
PM2 简介
pm2 是一个带有负载均衡功能的Node应用的进程管理器。
当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的。
命令详解:
安装
npm install -g pm2
用法
$ npm install pm2 -g # 命令行安装 pm2
$ pm2 start app.js -i 4 #后台运行pm2,启动4个app.js
# 也可以把'max' 参数传递给 start
# 正确的进程数目依赖于Cpu的核心数目
$ pm2 start app.js --name my-api # 命名进程
$
在一个网页中,如果有一个弹出的层是可以上下滚动的。 但是弹出层滚动到底部时,底层也会跟着滚动。
这其实是手机浏览器一个非常“顽固”的也似乎难以解决默认事件。
我之前也遇到过,最初也是各种阻止默认事件啊,PC有用,但是移动端一点用也没有。
后来是加了
html,body{ height:100%, overflow:hidden }
但是这样做会导致内容返回顶部。
后来研究了下天猫,他们也没有很好的解决,有的地方底部仍然可以滑动。
研究过苏宁易购,他们做的比较有意思,先记录下当前的位置,虽然底部内容也是可以滑动的,当弹出层关闭后,再返回那个位置。当然他们的
mt-cell is-link title="测试" v-on:click.native="test"
img slot="icon" src="../../assets/images/icon/credit-card.svg" width="24" height="24"
/mt-cell
这样才能正常绑定事件test,去掉is-link也可以绑定,如下: mt-cell title="测试" v-on:click.native="test"
img slot="icon" src="../../assets/images/icon/credi
工作进程:var http = require('http');
var port = Math.round((1 + Math.random()) * 1000);
http.createServer(function (req, res) {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello World\n');
}).listen(port, '127.0.0.1');
console.log("port: ", port);
主进程:var { fork } = require('chi
所有标签