- 博客(20)
- 收藏
- 关注
原创 vuex状态管理
一、vuex 是什么简单来说: 对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)二、状态自管理应用state: 驱动应用的数据源view: 以声明方式将 state 映射到视图actions: 响应在 view 上的用户输入导致的状态变化(包含 n 个更新状态的方法)三、多组件共享状态的问题多个视图依赖于同一状态来自不同视图的行为需要变更同一状态以前的解决办法...
2019-11-13 12:52:35
148
原创 vue的生命周期
一、生命周期分析初始化显示beforeCreate()created()beforeMount()mounted()更新状态: this.xxx = valuebeforeUpdate()updated()销毁 vue 实例: vm.$destory()beforeDestory()destoryed()二、常用的生命周期方法created()/...
2019-11-13 12:39:31
161
原创 vue的事件处理
一、绑定监听v-on:xxx=“fun”@xxx=“fun”@xxx=“fun(参数)”默认事件形参: event隐含属性对象: $event二、事件修饰符.prevent : 阻止事件的默认行为 event.preventDefault().stop : 停止事件冒泡 event.stopPropagation()三、按键修饰符.keycode : 操作的是某个 k...
2019-11-13 12:34:24
148
原创 vue的列表渲染
一、列表显示指令数组: v-for / index对象: v-for / key二、列表的更新显示删除 item替换 item三、列表的高级处理列表过滤列表排序代码:<div id="demo"><h2>测试: v-for 遍历数组</h2><ul><li v-for="(p, index) in persons" :...
2019-11-13 12:29:41
117
原创 vue的条件渲染指令
一、条件渲染指令v-if 与 v-elsev-show二、比较 v-if 与 v-show如果需要频繁切换 v-show 较好当条件不成立时, v-if 的所有子节点不会解析(项目中使用)代码:<div id="demo"><h2 v-if="ok">表白成功</h2><h2 v-else>表白失败</h2>&...
2019-11-13 12:25:26
293
原创 vue的class 与 style 绑定
一、理解在应用界面中, 某个(些)元素的样式是变化的class/style 绑定就是专门用来实现动态样式效果的技术二、class 绑定:class=‘xxx’表达式是字符串: ‘classA’表达式是对象: {classA:isA, classB: isB}表达式是数组: [‘classA’, ‘classB’]三、style 绑定:style="{ color: ac...
2019-11-13 12:21:19
107
原创 vue的计算属性和监视
一、计算属性在 computed 属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果二、监视属性通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性当属性变化时, 回调函数自动调用, 在函数内部进行计算三、计算属性高级通过 getter/setter 实现对属性数据的显示和监视计算属性存在缓存, 多次读取只执行一次 getter ...
2019-11-13 12:16:06
107
原创 vue的指令有哪些
一、指令一: 强制数据绑定功能: 指定变化的属性值完整写法: v-bind:xxx=‘yyy’ //yyy 会作为表达式解析执行简洁写法: :xxx=‘yyy’二、指令二: 绑定事件监听功能: 绑定指定事件名的回调函数完整写法:v-on:keyup=‘xxx’v-on:keyup=‘xxx(参数)’v-on:keyup.enter=‘xxx’简洁写法:@keyup=‘x...
2019-11-13 11:58:43
682
原创 Vue的虚拟DOM怎么处理
什么是虚拟DOM?DOM也可以用Javascript表示为数据结构。这是有关如何表示DOM节点的伪代码:// An unordered list represented as Javascriptlet domNode = { tag: 'ul', attributes: { id: 'myId' }, children: [ // where the LI's woul...
2019-11-13 11:50:14
494
原创 Nginx 服务部署 Vue 项目后刷新页面,出现 404 问题
一、环境1.vue-cli 3.x2.Nginx二、综述项目之前vue-router使用默认‘hash’模式,在本地与部署线上环境后都没有问题,因为要去掉URL中的 ‘#’ 号,故使用‘history’路由模式,故再次部署线上环境后,首页能正常访问,菜单内点击切换也没有问题,但当你刷新页面后,则出现 404 Not Found,故在此记录一下解决办法三、解决思路刷新页面时访问的资源在...
2019-11-13 11:30:34
2341
原创 JavaScript实现在关闭网页时弹出新网页
如何实现关闭网页时,弹出一个新网页? 一共有两种方法,都是基于JavaScript实现:方法一:在网页的body区加入以下代码:<body onunload="window.open('xx.htm');">方法二:使用window.onunload函数,加入到网页的head标签内,具体代码为:<script>window.onunload=function()...
2019-11-13 11:15:29
391
原创 出现document.getElementById为空或不是对象的原因及解决方法
今天写一个JS代码,发现老出现“document.getElementById为空或不是对象”,经过多番求解,终于解决此问题,现将经验与源码爱好者网友分享。其实出现这种错误一般情况下不是JavaScript本身代码的问题,很多情况下,是由于你的疏忽而没有定义ID所致,检查的顺序应该是先内容后js。1.出现 'null’为空或不是对象的情况: 2.出现document.getElementById...
2019-11-13 11:13:08
5993
原创 火狐上ajax网页同步加载操作失效问题的解决办法
细心的朋友会发现,以下代码在firefox火狐上运行ajax网页同步加载时会失效不执行的问题:xmlhttp.onreadystatechange = callBack;xmlhttp.open("GET",qrStr,false);xmlhttp.send(null);如果以上代码没有被完全执行,则可能是把XMLHttp设为了同步操作的原因。你可以修改(xmlhttp.open(“GE...
2019-11-13 11:10:07
414
原创 JS的document 、document.all用法区别
JavaScript中document 和document.all对象,可能对于JS新手来说,总是会用错,若知道错了固然很容易改正,问题一般出错的时候我们都不知道是自己用错的对象,而把排错的重点放在其它地方了。为了区别二者的用法,我们先来看一个示例,比较一下哪些时候该用document,哪些时候要用document.all。1<body>2<div id="aa">...
2019-11-13 11:07:17
284
原创 Js控制CSS切换样式表实现页面风格切换
看到别人网站都有一个无刷新切换风格的功能,自己很喜欢,但始终没找到方法,后来看了网上的教程,总算自己做出来了,下面只说关键步骤,相信通过这篇教程,你会搞定这个功能。首先,我们需要自己写好几种CSS风格文件,这就是接下来要切换的CSS文件。比如“红色记忆”这款网页风格你可以保存为1.css,“绿草青青”你可以保存为2.css,蔚蓝天空可保存为3.css。各个CSS里面的代码那就靠你发挥自己的想像力...
2019-11-13 11:02:36
2261
原创 JavaScript获取静态页HTML传递的URL字符串参数值
以前做一个项目的时候,用到JavaScript接受静态HTML页的参数,当初我查了不少资料,有的获取到的参数不准确,后来几经修改,完成了下面这个JS函数,可从静态页的URL中截获字符串参数值,有兴趣的可一试:01//从URL中获取参数02function SplitUrl(key)03{04var fstr=key;05var getstr='';06var url=doc...
2019-11-13 10:57:00
190
原创 js实现日期加减的自定义函数代码及用法
JavaScript实现日期加减计算功能代码实例,因为在js中没有类似C#中的AddDays方法,所以要想实现日期加减的话,就需要自己写函数来实现。这里就是通过重写Js Date对象的prototype,扩展了增加日期的方法,方便日后使用:01<script language="javascript">02Date.prototype.Format = function(fm...
2019-11-13 10:53:37
305
原创 在网页中同时调用多个JS函数的方法
在网页中调用两个或两个以上的JS函数的方法,虽然不经常用,不过先看看也不旺,避免用到的时候手足无措。其实在会与不会之间只是一层窗户纸,会了觉得简单,不会了觉得难,你看了本方法后,相信你会觉得同时调用多个JS函数,原来这么简单。示例代码,同时调用函数A和函数B:01<html>02<head>03<title>同时调用多个函数</title&g...
2019-11-13 10:47:15
1536
转载 Js动态加载CSS样式文件的2种方法
动态加载CSS文件,这个时常会用到,一般搞前端,我们最先想到的就是用JS来实现,的确,JS可以很方便的控制CSS样式表文件的动态插入,以下两种方法:使用一,使用这点采用了YUI插件中的一个方法,有效解决了各大浏览器的兼容性问题,主要是使用style.appendChild(document.createTextNode(styles));采用createTextNode将CSS代码添加到01&l...
2019-11-13 10:31:48
1853
转载 要成为一名优秀的开发人员,需要具备哪些技能?
程序员应具备的5种软技能1.编程语言和框架程序员需要了解编程语言和框架也就不足为奇了。但是要成为一名优秀的程序员,重要的是要至少了解一种编程语言。如果您竭尽全力学习另一种编程语言以对不同之处有一个常识,那将是非常不错的。您将选择哪种语言作为主要语言取决于您以及您要解决的问题。您可以查看值得学习的编程语言的排名,并查看是否可以选择自己感兴趣的任何东西。2.数据库在开发人员的工作中,了解数...
2019-11-13 10:22:31
1574
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人