Vue的组件生命周期与初始化方式

一、前言 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。 通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别: 二、created和mounted区别 官方图解如下: 我们从图中看两个节点: created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。 mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。 其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。 三、路由监测 @Watch监测router,在页面中加入路由监测,第一次进行时不会触发。当该页面跳转到其他页面时,发生路由变化时触发。 // 当该页面跳转到workflowControl进行操作 @Watch(‘$route’) router(to: any) {…

Continue Reading →

Posted in: Vue

HTML xmlns 属性

xmlns 属性 xmlns 属性可以在文档中定义一个或多个可供选择的命名空间。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于 URL,它定义了一个命名空间,浏览器会将此命名空间用于该属性所在元素内的所有内容。 例如,如果需要使用符合 XML 规范的 XHTML 文档,则应该在文档中的<html> 标签中至少使用一个 xmlns 属性,以指定整个文档所使用的主要命名空间: <html xmlns=”http://www.w3.org/1999/xhtml”> 如果需要在一个 div 元素中显示一串数学公式,则可以为该 div 元素定义一个数学命名空间。比如这样:…

Continue Reading →

UI、UE和UX三者之间的区别?

UI:User Interface 用户界面 用户界面其实是一个比较广泛的概念,指人和机器互动过程中的界面,以车为例子,方向盘、仪表盘、换档器等都属于用户界面。 现在一般把屏幕上显示的图形用户界面(GUI :Graphic User Interface)都简单称为UI。 可能是UI这个概念比较难以被一般人理解,所以现在一般所说的UI设计师,也即是指GUI设计师。也就是图形界面设计师。 主要是负责产品或是网站的图形图标色彩搭配,总之是负责网站看起来是一个什么风格什么气质。 UE or UX: User Experience 用户体验 用户体验指用户在使用产品过程中的个人主观感受。关注用户使用前、使用过程中、使用后的整体感受,包括行为、情感、成就等各个方面。用户体验是整体感受,所以不仅仅来自于用户界面,那只是其中的一部分。 通俗的讲这是个整体的使用感受,包括受品牌影响,用户个人使用经验的影响,总之就是让用户用着爽。 IxD:Interaction design…

Continue Reading →

2018前端框架深度抉择

前端技术日新月异,最终由Angular、React、Vue三分天下。文章分四点对前端框架的选型进行深度解析:1、前端框架概览;2、公司最关心的开源许可;3、框架内部技术解析;4、选型结论; 一、前端框架 前端框架三驾马车Angular、React、Vue,参考我的另文一篇文章《2017 年比较 ANGULAR、REACT、VUE 三剑客》,里面对每个框架有详细的说明。 二、开源许可 开源许可严重关系到该软件是否开源用于商业化,引用阮一峰老师总结的开源软件许可图片进行描述,其中Angular与Vue使用较为自由的MIT许可,而React目前使用有些开源苛刻的BSD许可。 三、内部技术分析 2018年前端主要关注的技术可参考我的另一篇文章《2018前端值得关注的技术》,里面包含了2018年最主流的前端开发技术。下面对主流技术进行简短描述: 前端含前端JS与后端JS,两者都是基于ECMAScript规范。前端JS主要用来操作页面元素DOM,操作浏览器BOM。后端JS扩展出了一些服务器所需的API,如操作系统能力os、操作文件系统file、操作网络系统net、操作数据库database。后端的JS主要使用nodeJS,nodeJS会使用很多别人已经写好的JS代码,为了给引用代码统一规范,引申出了npm,npm其实就是nodeJS的包管理器。—- 引用文章 https://www.jianshu.com/p/857ef827fbd4 三种主流框架都使用相同的后端JS–nodeJS进行前端服务器开发。而前端JS也趋于一致,但目前分为两大派系:传统JS、升级版ES以及微软开发的TS。 1、传统JS与升级版ES 1995年网景浏览器首次发布浏览器脚本语言,为了趁当时Java的热度,决定命名为JavaScript,简称JS。其实两种语言本身并无关系,就比如雷锋与雷峰塔的区别。 1996年网景将JS提交给ECMA International(欧洲计算机制造商协会)进行标准化,并最终确定新的语言标准,这就是ECMAScript,简称ES。 自此ES成为了JS的基础,但现实中只称ES为标准,JS为语言。后期ES陆续地更新了几个版本,各大浏览器厂商也开始兼容这些更新的API。即使在2009年已更新到了ECMAScript5,但很多前端开发者仍在写着ECMAScript3的风格。2015 年,负责制定 ECMAScript…

Continue Reading →

跨域的那些事

前言 最近做项目的时候遇到了一些跨域问题,虽然网上对于跨域的问题分享还挺多的。不过当我实际遇到的时候还是有点懵。趁项目刚上线完,写篇文章总结下。 造成跨域的两种策略 浏览器的同源策略会导致跨域,这里同源策略又分为以下两种 DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。 XmlHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。 只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。 为什么要有跨域限制 了解完跨域之后,想必大家都会有这么一个思考,为什么要有跨域的限制,浏览器这么做是出于何种原因呢。其实仔细想一想就会明白,跨域限制主要是为了安全考虑。 AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略,相当危险,我们发起的每一次HTTP请求都会带上请求地址对应的cookie,那么可以做如下攻击: 用户登录了自己的银行页面 http://mybank.com,http://mybank.com向用户的cookie中添加用户标识。 用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。 http://evil.com向http://mybank.com发起AJAX HTTP请求,请求会默认把http://mybank.com对应cookie也同时发送过去。 银行页面从发送的cookie中提取用户标识,验证用户无误,response中返回请求数据。此时数据就泄露了。 而且由于Ajax在后台执行,用户无法感知这一过程。 DOM同源策略也一样,如果iframe之间可以跨域访问,可以这样攻击: 做一个假网站,里面用iframe嵌套一个银行网站 http://mybank.com。 把iframe宽高啥的调整到页面全部,这样用户进来除了域名,别的部分和银行的网站没有任何差别。 这时如果用户输入账号密码,我们的主网站可以跨域访问到http://mybank.com的dom节点,就可以拿到用户的输入了,那么就完成了一次攻击。…

Continue Reading →

前端:你要懂的单页面应用和多页面应用

单页面应用(SinglePage Web Application,SPA) 只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次,常用于PC端官网、购物等网站 多页面应用(MultiPage Application,MPA) 多页面跳转刷新所有资源,每个公共资源(js、css等)需选择性重新加载,常用于 app 或 客户端等 具体对比分析 单页面应用(SinglePage Web Application,SPA) 多页面应用(MultiPage Application,MPA) 组成 一个外壳页面和多个页面片段组成 多个完整页面构成…

Continue Reading →

2018前端值得关注的技术

1.前言 2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测判断,希望能对大家起到一个参考作用!下面提及的技术,只是建议大家关注,也不是建议大家全部的都要学,而是建议大家按需学,自己觉得哪些需要学,对哪些有兴趣就学哪些!如果大家有什么工具,框架,库觉得可以推荐的,欢迎在评论区提点,让大家相互进步,学习! 2.PWA PWA(Progressive Web Apps)由谷歌提出,用前沿的技术开发,让网页使用如同App般的体验的一系列方案。明确的一点就是:PWA就是一个网页, 可以通过前沿的技术开发出一个网页应用。 自从谷歌提出PWA后,就持续的获得了业界的关注,热度可见一斑。就在今年,谷歌也宣布:PWA将获得与安卓原生应用同等的待遇与权限。这就意味着以后的网页基本和APP将越发将近,那么关注度将会进一步的上升。 资料参考: PWA 入门: 写个非常简单的 PWA 页面 【转载】你的首个 Progressive Web App 【转载】下一代Web应用模型:Progressive Web…

Continue Reading →