您的位置:

首页 >

365体育备用网址 >

vue2.0移除或更改的一些东西(移除index key) >

vue2.0移除或更改的一些东西(移除index key)

2016-08-24 02:46:32

分类:365体育备用网址

一、vue2.0移除了$index和$key虽然说现在很多文章说他们的代码是vue2.0版本的,但是有一些仔细一看,发现并不全是2.0版本,有些语法还是1.0的版本,比如这个$index,$key,这两个压根就不是2.0的写法,2.0早就把这两个给删除了,我们先来看看之前的列表渲染是怎么写的<template> <div class="hello"> <ul> <li v-for="item in list">{{$index}}--{{$key}}</li> </ul> </div></template><script>export default { data(){ return{ list:['姓名','性别','年龄','语文','数学','英语','总分'] } }}</script>这种写法在2.0的环境下虽然可以运行但是在控制台却出错了$index和$key没有定义,而且在页面上也没有渲染出这两个东西的效果,$index是索引,$key是键值在vue2.0中,这种写法改为了<template> <div class="hello"> <ul> <li v-for="(index,item) in list">{{index}}--{{item}}</li> </ul> </div></template>得到的页面效果如下当然,这个问题有很多人写博客提到过,我这里就汇总一下二、$refs和$els我在vue2.8.2的版本下使用$refs和$els获取元素的时候,出现了一些问题,当然可能不止是2.8.2版本,其他的版本我还没试过,如果有跟我相同的问题的话可以试试看这种方法。我们先来使用$els<template> <div class="hello"> <div class="v-t" v-el:v-t> <button @click="getElement">测试</button> </div> </div></template><script>export default { methods:{ getElement(){ let element=this.$els.vT console.log(element) } }}</script>v-el用横杠写法,在用$els的时候用驼峰写法,我在2.8.2版本的vue环境下是获取不了的我们再来使用$refs获取元素节点,我们先用这种方法试试看<template> <div class="hello"> <div class="v-t" ref="vt"> <button @click="getElement">测试</button> </div> </div></template><script>export default { methods:{ getElement(){ let element=this.$refs.vt console.log(element) } }}</script>这种方法是可以获取到的接下来我们试试看这种写法<template> <div class="hello"> <div class="v-t" ref="v-t"> <button @click="getElement">测试</button> </div> </div></template><script>export default { methods:{ getElement(){ let element=this.$refs['v-t'] console.log(element) } }}</script>也是可以获取得到class为v-t的元素关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模版中做数据绑定。----引用自vue.js官方文档三、transitionVue 提供了 transition 的封装组件,比如我们现在要实现一种效果:点击一个按钮之后,缓慢出现一个有背景颜色的div,点击div里面的关闭按钮之后,div缓慢消失。有一种写法是这样的<template> <div class="hello"> <button @click="show">开启</button> <div class="box" v-show="this.tf" transition="fade"> <button @click="hide">关闭</button> </div> </div></template><script>export default { data(){ return{ tf:false } }, methods:{ show(){ this.tf=true }, hide(){ this.tf=false } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style>.box{ width:177px; height:177px; transition:all 0.5s}.fade-transition{ opacity:1; background:rgba(7,17,27,0.8);}.fade-enter,.fade-leave{ opacity:0; background:rgba(7,17,27,0);}</style>这种写法在有些版本运行是有效果的,但是在2.8.0版本下却没有效果,点击开启按钮之后只出现一个关闭按钮,现在我们更改一下写法<template> <div class="hello"> <button @click="show">开启</button> <transition> <div class="box" v-show="this.tf"> <button @click="hide">关闭</button> </div> </transition> </div></template><script>export default { data(){ return{ tf:false } }, methods:{ show(){ this.tf=true }, hide(){ this.tf=false } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style>.box{ width:177px; height:177px; background:rgba(7,17,27,0.8);}.v-enter-active,.v-leave-active{ transition: opacity 0.5s} .v-enter,.v-leave-to{ opacity: 0}</style>这种写法就有效果了,这是根据官方文档写的,实现之后效果是这样的四、结语这是我最近学习遇到的一些小问题,有时候看视频,别人写的代码照着敲,我们敲完之后可能都还运行不了,这时候有可能是版本问题,框架更新了,语法不一样了等等。现在一些框架更新太快了,对我们这些码农来说确实挺考验的。

整理文档,搜刮出一个vue 计时器组件的代码,稍微整理精简一下做下分享。<template> <div> <span :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal" >{{countString}}</span> </div></template><script>export default { data() { return { isStart: false, globalTimer: null,//获取setInterval对象值 countString: '0秒', //用来显示时间 day: 0, hour: 0, minute: 0, second: 0, millisecond: 0, countVal: this.defaultVal, //获取初始值 pauseTime: 0, } }, watch: { 'countString': { deep: true, handler: function(val, oldVal) { var vm = this if (vm.needSendSunc) { vm.passToParent(val) } } }, 'needSendSunc': { deep: true, handler: function(val) { var vm = this if (val) { vm.passToParent(vm.countString) } } } }, props: { sendSync: { type: Boolean, default: false, }, autoStart: { type: Boolean, default: false, }, defaultVal: { type: Number, default: 0, } }, mounted() { var vm = this if (vm.autoStart) { vm.startCountFn() } }, computed: { needSendSunc: function() { return this.sendSync } }, created: function() { this.$on('startCount', function() { this.startCountFn() }); this.$on('stopCount', function() { this.stopCountFn() }); }, components: {}, methods: { counterFn: function(counterTime) { var vm = this var nowDate = new Date().getTime() if(vm.pauseTime == 0){ var num = nowDate - counterTime //计算时间毫秒差 }else{ vm.pauseTime = vm.pauseTime +10 var num = vm.pauseTime - counterTime //计算时间毫秒差 } var leave1 = num % (24 * 3600 * 1000) //计算天数后剩余的毫秒数 var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数 var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数 vm.day = Math.floor(num / (24 * 3600 * 1000)) //计算相差天数 vm.hour = Math.floor(leave1 / (3600 * 1000))//计算相差小时 vm.minute = Math.floor(leave2 / (60 * 1000))//计算相差分钟 vm.second = Math.round(leave3 / 1000) //计算相差秒 if (vm.day > 0) { vm.countString = `${vm.day}天 ${vm.hour}小时 ${vm.minute}分 ${vm.second}秒`; } else if (vm.hour > 0) { vm.countString = `${vm.hour}小时 ${vm.minute}分 ${vm.second}秒`; } else if (vm.minute > 0) { vm.countString = `${vm.minute}分 ${vm.second}秒`; } else { vm.countString = `${vm.second}秒`; } }, startCountFn: function() { var vm = this if (!vm.isStart) { vm.countVal = vm.countVal ? vm.countVal : new Date().getTime() var timer = setInterval(function() { vm.counterFn(vm.countVal) }, 10) vm.globalTimer = timer vm.isStart = true } }, stopCountFn: function() { var vm = this if (vm.isStart) { window.clearInterval(vm.globalTimer) vm.globalTimer = null; vm.isStart = false vm.pauseTime = new Date().getTime() } }, passToParent: function(data) { var vm = this this.$emit("getDataFromChild", data) }, }}</script><style></style>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

于是在之前的开发之中慢慢开始总结,也写了一些零散的方法想要比较简单的,写更少的代码来完成更多的验证。之前采用的思路是传递参数,将要验证的控件的ID传进去,若是要验证数据格式再传入相应的正则表达式进去。项目结束之后,再对整个项目做总结的时候发现,这种写法也并没有节省多少代码量,而且很多地方因为同学反应说我写的那个库并不是很好用,虽然有说明,但他们也还是不能很好的理解,不能很快就上手,而且应该还是有不少BUG,所以很多地方他们还是宁愿用那种对每个控件去一一验证的方式,一个JS文件中光验证的部分就得两三百行的代码,而且都比较懒,对于注释是能少写一句是一句,以致于出了问题之后维护起来也很麻烦,JS调试也还没有一个很方便的工具。 最近也是在外出差,空闲的时候我就在想,能不能在之前的基础上封装更多一点,然后调用更方便呢,最好是调用的时候不要再写JS代码最好。想起jQuery强大的选择器,以及之前做验证的时候或者需要从页面取值的时候经常给页面元素加上了一些自定义的属性。于是乎,想做验证的时候只需要给元素加上几个自定义的属性,调用JS代码就行,这样应该是最简单的了吧。 这个简易的验证库,应该能完成90%的基本验证,包括失去焦点时的验证,以及点击提交按钮时的验证。后端的那我就无能为办了,只能是谁用就谁自个儿去写了:)。 先上一段调用的代码吧,JS代码说少也不少了,就不直接贴出来了,文章后面上附件,还包括一个我之前自己写的一个仿人人网的插件的JS文件。 复制代码 代码如下: <script src="Js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="Js/ks.ext.msgbox.js" type="text/javascript"></script> <script src="Js/validata.js" type="text/javascript"></script> <form name="form1" id="form1" action="#" method="post"> 邮      箱:<input type="text" id="email" name="email" validata="email" errormsg="邮箱格式不正确" emptyerrormsg="邮箱不能为空" empty="false" /><br /> 手      机:<input type="text" name="phone" validata="phone" errormsg="手机格式不正确" emptyerrormsg="手机不能为空" empty="true" /><br /> 电      话:<input type="text" name="tel" validata="tel" errormsg="电话格式不正确" emptyerrormsg="电话不能为空" empty="true" /><br /> 身  份 证:<input type="text" name="idcard" validata="idcard" errormsg="身份证格式不正确" emptyerrormsg="身份证不能为空" empty="false" /><br /> 密      码:<input type="password" name="pwd" validata="empty" empty="false" emptyerrormsg="密码不能为空" /><br /> 确认密码:<input type="password" name="pwd1" validata="password2" errormsg="确认密码不能为空" diffmsg="两次密码输入不一致" /><br /> <input type="submit" id="submit1" value="Submit" /> </form> 比如验证邮箱: 有时候邮箱我们是允许为空的,但是一旦输入了邮箱就要求邮箱是合法的。如果允许为空就给empty赋值为true,那么验证库将不对其做非空验证。若为false或者empty属性不加默认就为是不允许为空的。 不允许为空得加上一个emptyErrorMsg的属性,用来显示为空时的错误信息,若这个属性缺少或者值为空那么显示的就是一个红色"*",若不为空就显示这个属性的值。然后就是对格式的验证,是要对邮箱验证,validata的值就是email,若不合法时就显示另外一个自定义属性errorMsg的值,errorMsg若缺少或者为空显示错误信息也为红色"*". validata的值还是不能完全自定义的,已经在JS中自定好了。就是根据validata的值来返回不同的正则表达式。方法如下,然后可选的validata的值就是下列方法的regName的值。用户若要据展直接再加上其他表达式就可以了。 复制代码 代码如下: //根据不同的验证内容,返回相应的正则表达式 function returnRegString(regName) { if (regName == "email") { return "^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$"; //邮箱 } else if (regName == "tel") { return "^(86)?(-)?(0[0-9]{2,3})?(-)?([0-9]{7,8})(-)?([0-9]{3,5})?$"; //电话 } else if (regName == "phone") { return "^(13[0-9]|15[0-9]|18[0-9])([0-9]{8})$"; //手机 } else if (regName == "postcode") { return "^([0-9]{6})$"; //邮编 } else if (regName == "number") { return "^(0|([1-9]+[0-9]*))(.[0-9]+)?$"; //数字 } else if (regName == "decimal") { return "^[0-9]+([.][0-9]+)?$"; //浮点 } else if (regName == "money") { return "^([0-9])$"; //货币 } else if (regName == "website") { //网址 return "(http://|https://){0,1}[\w\/\.\?\&\=]+"; } else if (regName == "fax") { //传真 return "^[+]{0,1}([0-9]){1,3}[ ]?([-]?(([0-9])|[ ]){1,12})+$"; } else if (regName == "int") { //整数 return "^(-){0,1}\d+$"; } else if (regName == "pInt") { //正整数 return "^\d+$"; } else if (regName == "nInt") { //负整数 return "^-\d+$"; } else if (regName == "nandl") { //数字与字母 return "[a-zA-Z0-9]"; } else if (regName == "chinese") { //是否含有中文字符 return "[\u4e00-\u9fa5]"; } } 废话不多说了,该验证库也还没有很完整的测试,各位大牛们若是有兴趣试用一下,发现什么问题或者其他更好的改进方法一定请告诉小弟。虽然肯定有现成的而且比较成熟的JS验证库了,但是我想自己写一个出来。再来一张截图吧,点击按钮时若未通过验证则弹出层提示哪个地方未通过验证,弹出层就是我之前自己写的仿人人网效果的弹出层效果。

本文实例讲述了jQuery+HTML5实现WebGL高性能烟花绽放动画效果。分享给大家供大家参考,具体如下:运行效果:完整代码如下:<!DOCTYPE html><html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head><meta charset="UTF-8"><meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="format-detection" content="telephone=no"><title>HTML5/WebGL高性能烟花绽放动画</title><meta name="description" content="HTML5/WebGL高性能烟花绽放动画"><meta name="keywords" content="HTML5/WebGL高性能烟花绽放动画"><style>canvas { position: absolute; top: 0; left: 0; background-color: #111;}</style></head><body><script src="jquery-1.11.1.min.js"></script><canvas id="c" width="1440" height="304"></canvas><script src="prefixfree.min.js"></script><script src="modernizr.js"></script><script>var gl = c.getContext('webgl', { preserveDrawingBuffer: true }), w = c.width = window.innerWidth, h = c.height = window.innerHeight, webgl = {}, opts = { projectileAlpha: .8, projectileLineWidth: 1.3, fireworkAngleSpan: .5, baseFireworkVel: 3, addedFireworkVel: 3, gravity: .03, lowVelBoundary: -.2, xFriction: .995, baseShardVel: 1, addedShardVel: .2, fireworks: 1000, baseShardsParFirework: 10, addedShardsParFirework: 10, shardFireworkVelMultiplier: .3, initHueMultiplier: 1 / 360, runHueAdder: .1 / 360}webgl.vertexShaderSource = `uniform int u_mode;uniform vec2 u_res;attribute vec4 a_data;varying vec4 v_color;vec3 h2rgb( float h ){ return clamp( abs( mod( h * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. );}void clear(){ gl_Position = vec4( a_data.xy, 0, 1 ); v_color = vec4( 0, 0, 0, a_data.w );}void draw(){ gl_Position = vec4( vec2( 1, -1 ) * ( ( a_data.xy / u_res ) * 2. - 1. ), 0, 1 ); v_color = vec4( h2rgb( a_data.z ), a_data.w );}void main(){ if( u_mode == 0 ) draw(); else clear();}`;webgl.fragmentShaderSource = `precision mediump float;varying vec4 v_color;void main(){ gl_FragColor = v_color;}`;webgl.vertexShader = gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(webgl.vertexShader, webgl.vertexShaderSource);gl.compileShader(webgl.vertexShader);webgl.fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(webgl.fragmentShader, webgl.fragmentShaderSource);gl.compileShader(webgl.fragmentShader);webgl.shaderProgram = gl.createProgram();gl.attachShader(webgl.shaderProgram, webgl.vertexShader);gl.attachShader(webgl.shaderProgram, webgl.fragmentShader);gl.linkProgram(webgl.shaderProgram);gl.useProgram(webgl.shaderProgram);webgl.dataAttribLoc = gl.getAttribLocation(webgl.shaderProgram, 'a_data');webgl.dataBuffer = gl.createBuffer();gl.enableVertexAttribArray(webgl.dataAttribLoc);gl.bindBuffer(gl.ARRAY_BUFFER, webgl.dataBuffer);gl.vertexAttribPointer(webgl.dataAttribLoc, 4, gl.FLOAT, false, 0, 0);webgl.resUniformLoc = gl.getUniformLocation(webgl.shaderProgram, 'u_res');webgl.modeUniformLoc = gl.getUniformLocation(webgl.shaderProgram, 'u_mode');gl.viewport(0, 0, w, h);gl.uniform2f(webgl.resUniformLoc, w, h);gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);gl.enable(gl.BLEND);gl.lineWidth(opts.projectileLineWidth);webgl.data = [];webgl.clear = function() { gl.uniform1i(webgl.modeUniformLoc, 1); var a = .1; webgl.data = [-1, -1, 0, a, 1, -1, 0, a, -1, 1, 0, a, -1, 1, 0, a, 1, -1, 0, a, 1, 1, 0, a ]; webgl.draw(gl.TRIANGLES); gl.uniform1i(webgl.modeUniformLoc, 0); webgl.data.length = 0;}webgl.draw = function(glType) { gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(webgl.data), gl.STATIC_DRAW); gl.drawArrays(glType, 0, webgl.data.length / 4);}var fireworks = [], tick = 0, sins = [], coss = [], maxShardsParFirework = opts.baseShardsParFirework + opts.addedShardsParFirework, tau = 6.283185307179586476925286766559;for (var i = 0; i < maxShardsParFirework; ++i) { sins[i] = Math.sin(tau * i / maxShardsParFirework); coss[i] = Math.cos(tau * i / maxShardsParFirework);}function Firework() { this.reset(); this.shards = []; for (var i = 0; i < maxShardsParFirework; ++i) this.shards.push(new Shard(this));}Firework.prototype.reset = function() { var angle = -Math.PI / 2 + (Math.random() - .5) * opts.fireworkAngleSpan, vel = opts.baseFireworkVel + opts.addedFireworkVel * Math.random(); this.mode = 0; this.vx = vel * Math.cos(angle); this.vy = vel * Math.sin(angle); this.x = Math.random() * w; this.y = h; this.hue = tick * opts.initHueMultiplier;}Firework.prototype.step = function() { if (this.mode === 0) { var ph = this.hue, px = this.x, py = this.y; this.hue += opts.runHueAdder; this.x += this.vx *= opts.xFriction; this.y += this.vy += opts.gravity; webgl.data.push( px, py, ph, opts.projectileAlpha * .2, this.x, this.y, this.hue, opts.projectileAlpha * .2); if (this.vy >= opts.lowVelBoundary) { this.mode = 1; this.shardAmount = opts.baseShardsParFirework + opts.addedShardsParFirework * Math.random() | 0; var baseAngle = Math.random() * tau, x = Math.cos(baseAngle), y = Math.sin(baseAngle), sin = sins[this.shardAmount], cos = coss[this.shardAmount]; for (var i = 0; i < this.shardAmount; ++i) { var vel = opts.baseShardVel + opts.addedShardVel * Math.random(); this.shards[i].reset(x * vel, y * vel) var X = x; x = x * cos - y * sin; y = y * cos + X * sin; } } } else if (this.mode === 1) { this.ph = this.hue this.hue += opts.runHueAdder; var allDead = true; for (var i = 0; i < this.shardAmount; ++i) { var shard = this.shards[i]; if (!shard.dead) { shard.step(); allDead = false; } } if (allDead) this.reset(); }}function Shard(parent) { this.parent = parent;}Shard.prototype.reset = function(vx, vy) { this.x = this.parent.x; this.y = this.parent.y; this.vx = this.parent.vx * opts.shardFireworkVelMultiplier + vx; this.vy = this.parent.vy * opts.shardFireworkVelMultiplier + vy; this.starty = this.y; this.dead = false; this.tick = 1;}Shard.prototype.step = function() { this.tick += .05; var px = this.x, py = this.y; this.x += this.vx *= opts.xFriction; this.y += this.vy += opts.gravity; var proportion = 1 - (this.y - this.starty) / (h - this.starty); webgl.data.push( px, py, this.parent.ph, opts.projectileAlpha / this.tick, this.x, this.y, this.parent.hue, opts.projectileAlpha / this.tick); if (this.y > h) this.dead = true;}function anim() { window.requestAnimationFrame(anim) webgl.clear(); ++tick; if (fireworks.length < opts.fireworks) fireworks.push(new Firework); fireworks.map(function(firework) { firework.step(); }); webgl.draw(gl.LINES);}anim();window.addEventListener('resize', function() { w = c.width = window.innerWidth; h = c.height = window.innerHeight; gl.viewport(0, 0, w, h); gl.uniform2f(webgl.resUniformLoc, w, h);})window.addEventListener('click', function(e) { var firework = new Firework(); firework.x = e.clientX; firework.y = e.clientY; firework.vx = 0; firework.vy = 0; fireworks.push(firework);});</script></body></html>附:完整实例代码点击此处本站下载。更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》希望本文所述对大家jQuery程序设计有所帮助。

前言以前在浏览文章时,看到过一个Android的加载效果,觉得挺好看的,于是自己就模仿了一个。下面话不多说,我们直接来看看详细的介绍吧。运行效果图分析下这个效果:      1.可以把这四个方块标号      2.这个运动效果其实只用分解为两段动画,一段是上下移动,一段是左右移动。示例代码:/*核心代码*//*分析动画,其实动画只有两次的执行*/ var for_index = 1;//记录当前执行动画的序列 var interval = setInterval(function(){ if(for_index == 1){ if(squre4.x == origin_squre.x - step * 2){ for_index = 2; }else{ squre2.x -= 2; squre2.y += 1; squre4.x += 2; squre4.y -= 1; } }else if(for_index == 2){ if(squre4.x == origin_squre.x){ for_index = 1; /*重置方块位置信息到初始值*/ init_squre(origin_squre.x,origin_squre.y); }else{ squre3.x -= 2; squre3.y -= 1; squre2.x -= 2; squre2.y -= 1; squre4.x += 2; squre4.y += 1; squre1.x += 2; squre1.y += 1; } } ctx.clearRect(0,0,canvas.width,canvas.height); /*重绘方块*/ if(for_index == 1 || for_index == 2){ draw_squre(squre4); draw_squre(squre1); draw_squre(squre3); draw_squre(squre2); } /*重绘阴影*/ get_shaow_pos(); for(var i in shaow_begin){ draw_shaow(shaow_begin[i]); } },1000 / 24);由于在高分屏下绘制有点模糊,于是引入了hidpi-canvas.jsgithub地址:https://github.com/lzuntalented/lzLoading本地下载:http://xiazai.jb51.net/201707/yuanma/lzLoading(jb51.net).rar总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

焦点访谈

最新最热的文章

更多 >

COPYRIGHT (©) 2017 Copyright ©2017 365体育在线备用网址 网站地图

联系我们

827570882

扫描二维码分享到微信