完美

[学习|工作|博客|交流平台|完美起航]

作者头像congming2018.03.18 17:06 

vue生命周期的学习

1、什么是vue生命周期?答: Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。2、vue生命周期的作用是什么?答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。3、vue生命周期总共有几个阶段?答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后4、第一次页面加载会触发哪几个钩子?答:第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子5、DOM 渲染在 哪个周期中就已经完成?答:DOM 渲染在 mounted 中就已经完成了。6、简单描述每个周期具体适合哪些场景?答:生命周期钩子的一些使用方法: beforecreate : 可以在这加个loading事件,在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用 mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数 beforeDestroy: 可以做一个确认停止事件的确认框 nextTick: 更新数据后立即操作dom

vue 3532 2

作者头像congming2018.03.18 17:05 

vue相关原理学习(二)

一、请说下具体使用vue的理解?答:1、使用vue不必担心布局更改和类名重复导致的js重写,因为它是靠数据驱动双向绑定,底层是通过Object.defineProperty() 定义的数据 set、get 函数原理实现。2、组件化开发,让项目的可拓展性、移植性更好,代码重用性更高,就好像农民工建房子,拿起自己的工具包就可以开工。项目经理坐等收楼就好。3、单页应用的体验零距离接触安卓原生应用,局部组件更新界面,让用户体验更快速省时。4、js的代码无形的规范,团队合作开发代码可阅读性更高。二、你觉得哪些项目适合vue框架?答:1、数据信息量比较多的,反之类似企业网站就无需此框架了。2、手机web和app应用多端共用一套界面的项目,因为使用vue.cli+webpack后的前端目录,非常有利于项目的跨平台部署。三、怎么理解MVVM模式的这些框架?答:1、M就是Model模型层,存的一个数据对象。2、V就是View视图层,所有的html节点在这一层。3、VM就是ViewModel,它通过data属性连接Model模型层,通过el属性连接View视图层。四、PC端项目你会在哪些场景使用Vue框架?答:上万级数据需要瀑布流更新和搜索的时候,因为数据庞大的时候,用原生的dom操作js和html都会有列表的html布局,迭代很困难。再一个dom节点的大面积添加会影响性能。那么vue为什么解决这些问题呢?第一:只需用v-for在view层一个地方遍历数据即可,无需复制一段html代码在js和html两个地方。第二:vue通过Virtual Dom就是在js中模拟DOM对象树来优化DOM操作。

vue 1651 0

作者头像congming2018.03.18 16:56 

vue相关原理学习(一)

1、active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件。2、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?答:在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id3、vue-router有哪几种导航钩子?答:三种,一种是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。第二种:组件内的钩子;第三种:单独路由独享组件4、scss是什么?安装使用的步骤是?有哪几大特性?答:预处理css,把css当前函数编写,定义变量,嵌套。先装css-loader、node-loader、sass-loader等加载器模块,在webpack-base.config.js配置文件中加多一个拓展:extenstion,再加多一个模块:module里面test、loader4.1、scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?答:css的预编译。使用步骤:第一步:用npm 下三个loader(sass-loader、css-loader、node-sass)第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss第三步:还是在同一个文件,配置一个module属性第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss”有哪几大特性:1、可以用变量,例如($变量名称=值);2、可以用混合器,例如()3、可以嵌套5、mint-ui是什么?怎么使用?说出至少三个组件使用方法?答:基于vue的前端组件库。npm安装,然后import样式和js,vue.use(mintUi)全局引入。在单个组件局部引入:import{Toast} from‘mint-ui’。组件一:Toast(‘登录成功’);组件二:mint-header;组件三:mint-swiper6、v-model是什么?怎么使用? vue中标签怎么绑定事件?答:可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:<input @click=doLog() />7、axios是什么?怎么使用?描述使用它实现登录功能的流程?答:请求后台资源的模块。npm install axios -S装好,然后发送的是跨域,需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中8、axios+tp5进阶中,调用axios.post(‘api/user’)是进行的什么操作?axios.put(‘api/user/8′)呢?答:跨域,添加用户操作,更新操作。9、什么是RESTful API?怎么使用?答:是一个api的标准,无状态请求。请求的路由地址是固定的,如果是tp5则先路由配置中把资源路由配置好。标准有:.post.put.delete10、vuex是什么?怎么使用?哪种功能场景使用它?答:vue框架中状态管理。在main.js引入store,注入。新建了一个目录stor

vue 1784 1

作者头像zyw3272018.03.17 15:00 

react学习笔记一

React来自Facebook,2013年诞生 和Angular不同,react并不是一个完整的MVC/MVVM框架,它只专注于提供清晰、直接的view视图层解决方案。它的功能全部以构建组件视图为核心,并提供类似控制器的函数接口和生命周期函数。在React中没有控制器、没有服务、没有过滤器等等。React非常轻,目标是minimal API interface,只提供组件化相关的非常少量的API。简化了一切可以简化的东西。比如说Angular中做一个组件,实际上叫做E级的指令,要写scope、link函数,但是react最大限度的简化了一个组件的开发,事实上react就是为了组件开发而诞生的。 React可以搭配flux等架构(Redux实现)。有flux架构护航,数据的单向流动,自称是比MVC、MVVM更高级的一种模式。可以开发大型应用。 React使用virtual DOM技术,使得它性能卓越,开销很小。 Virtual DOM是react中的一个很重要的概念,在日常开发中,前端工程师们需要将后台的数据呈现到界面中,同时要能对用户的操作提供反馈,作用到UI上....这些都离不开DOM操作。但是我们知道,频繁的DOM操作会造成极大地资源浪费,也通常是性能瓶颈的原因。于是react引入了virtual DOM。Virtual DOM 的核心就是计算比较改变前后的DOM区别,然后用最少的DOM操作语句对DOM进行操作。 现在需要将上图左边的DOM结构替换成右边的结构,这种情景在实战项目中是经常会遇到的,但是如果直接操作DOM的话,进行移除的话可能就是四次删除,五次插入吗,这种消耗是巨大的,但是使用Virtual DOM那就是比较两个结构的差异,发现仅仅改变了四次内容,一次插入。这种消耗就小很多,无非加上一个比较的时间。 Virtual DOM使用了DIFF算法,DIFF算法是一个比较计算方法。主要用来计算DOM之间的差异。 Virtual DOM技术,此时要删除3个节点,插入3个节点。使用virtual DOM技术仅仅需要移动节点即可。 React 中使用了JSX语法糖,jsx=JavaScript+xml。Js文件中写html模板,代码语境不需要来回切换的。也就是说,在Angular中模板写在.html文件中。React中使用.js文件来当做html模板,语境是统一的,非常清晰简明。Jsx语法比``运算符还要简单,是最优雅的将html和js结合的方案。

react 3187 5

作者头像wuyande2018.03.17 00:28 

php扩展库开发

我们先假设业务场景,是需要有这么一个扩展,提供一个叫ccvita_string的函数,他的主要作用是返回一段字符。(这个业务场景实在太假,大家就这么看看吧)对应的PHP代码可能是这样:functionccvita_string($str){ $result='<ahref="'.$str.'">Link</a>'; return$result; }第一步,生成代码PHP为了扩展开发的方便,提供了一个类似代码生成器的工具ext_skel,具体可以参见说明。首先我们创建一个文件ccvita.skel,它的内容为stringccvita_string(stringstr)就是告诉ext_skel这个东西,我们要做的扩展里面有个函数叫ccvita_string。然后执行cdMooENV/src/php-5.3.8/ext/ ./ext_skel--extname=ccvita--proto=ccvita.skel cdccvita/这时候,ccvita这个扩展的代码框架就已经出来了。第二步,修改配置然后修改config.m4文件将10、11、12三行最前面的dnl删除掉,就是将dnlPHP_ARG_WITH(ccvita,forccvitasupport, dnlMakesurethatthecommentisaligned: dnl[--with-ccvitaIncludeccvitasupport])修改为PHP_ARG_WITH(ccvita,forccvitasupport, Makesurethatthecommentisaligned: [--with-ccvitaIncludeccvitasupport])第三步,实现功能修改源码ccvita.c文件找到将ccvita_string这个函数修改为PHP_FUNCTION(ccvita_string) { char*str=NULL; intargc=ZEND_NUM_ARGS(); intstr_len; char*result; if(zend_parse_parameters(argcTSRMLS_CC,"s",&str,&str_len)==FAILURE) return; str_len=spprintf(&result,0,"<ahref=\"%.78s\">Link</a>",str); RETURN_STRINGL(result,str_len,0); }第四步,编译扩展保存后,开始编译/usr/local/php/bin/phpize ./configure--with-php-config=/usr/local/php/bin/php-config make第五步,添加扩展这时候,一切顺利的话,该扩展已经在modules/ccvita.so这个位置了。下面就是将这个扩展加入到PHP中去,让我们PHP程序可以调用到。cpmodules/ccvita.so/usr/local/php/ext/ vim/usr/local/php/etc/php.ini extension=/usr/local/php/ext/ccvita.so#在php.ini文件最后增加这一行 servic

php 1814 1

作者头像wuyande2018.03.17 00:08 

PHP Ajax 跨域问题最佳解决方案

PHP Ajax 跨域问题最佳解决方案分类 编程技术本文通过设置Access-Control-Allow-Origin来实现跨域。例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com。如果直接使用ajax访问,会有以下错误:XMLHttpRequestcannotloadhttp://server.runoob.com/server.php.No'Access-Control-Allow-Origin'headerispresentontherequestedresource.Origin'http://client.runoob.com'isthereforenotallowedaccess.1、允许单个域名访问指定某域名(http://client.runoob.com)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码:header('Access-Control-Allow-Origin:http://client.runoob.com');2、允许多个域名访问指定多个域名(http://client1.runoob.com、http://client2.runoob.com等)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码: $origin=isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:''; $allow_origin=array( 'http://client1.runoob.com', 'http://client2.runoob.com' ); if(in_array($origin,$allow_origin)){ header('Access-Control-Allow-Origin:'.$origin); }3、允许所有域名访问允许所有域名访问则只需在http://server.runoob.com/server.php文件头部添加如下代码:header('Access-Control-Allow-Origin:*');

php 1236 0

作者头像zyw3272018.03.14 23:39 

javascript设计模式之単例模式

Javascript中的设计模式JavaScript是一门特别灵活的语言,早些年被认为是玩具式的语言,只能做一点为网页涂脂抹粉的小差事。项目工程也不是很大,更无从说起设计模式在JavaScript的应用,但随着Nodejs以及html5和web2.0的兴起,JavaScript本身变得越来越受重视。但是很多本该有的东西javascript都有,并没有作为正式的部分。这些年来人们利用自己对计算机编程的思想,利用了很多晦涩的技巧实现了很多javascript设计者都未曾预计到的任务,比如各种设计模式的实现,以及面向对象编程等。设计原则设计模式的存在原因是为了代码的复用性,增加代码的可维护性,有如下原则:【开闭原则】,对扩展开放,对修改关闭,ps高考的试卷。【里式转换原则】,子类继承父类,单独掉完全可以运行,ps盗版光盘【依赖倒转原则】,引用一个对象,如果这个对象有底层类型吗,直接引用底层,【接口隔离原则】 每一个接口应该是一种角色,ps汽车的usb插口,【合成/聚合复用原则】 新的对象应使用一些已有的对象,使之成为新对象的一部分,【迪米特原则】, 一个对象应对其他对象有尽可能少的了解设计模式之单例模式单例模式的概念解读単例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在则创建返回,这样就保证一个只有一个实例对象。在JavaScript里,単例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。单例模式的概念拟物化解读有门则进去,没门则创建门,只有一个门可以进去单例模式的作用与注意事项单例模式作用:1.模块间通信。系统中某个类的对象只能存在一个。2.系统中某个类的对象只能存在一个。3.保护自己的属性和方法注意事项:注意this的使用。闭包容易造成内存泄漏,不需要的赶快干掉。注意new的成本単例模式代码实战和总结代码实战<scripttype="text/javascript"> //1.独立的对象建立两个一个xiaowang一个xiaoli //2.让xiaoli跟xiaowang通过门铃通信 //3.先看一下xiaowang家有没有门如果有门之间通过门铃通讯didi如果没有门先建门 //4.两个単例之间开始通信 varxiaowang=(function(argument){ varxiaowangjia=function(message){ this.menling=message; } varmen; varinfo={ sendMessage:function(message){ if(!men){ men=newxiaowangjia(message); }; returnmen; } } returninfo; })(); varxiaoli={ callXiaowang:function(msg){ var_xw=xiaowang.sendMessage(msg); alert(_xw.menling); _xw=null;//等待垃圾回收 } }; xiaoli.callXiaowang('didi'); </script>

设计模式 2242 2

作者头像zyw3272018.03.14 23:32 

vue2.0+webpack的项目搭建与开发

vue2.0vue2.0是一个MVVM框架,对于这样的一个框架,我们应怎样搭建环境,用webpack+loader+babel,还是AAL,怎么样创建组件,基本的自定义标签的创建,数据的封装性,数据和模板的关系,组件的生命周期,组件的状态,内部的值组件与组件之间的数据传递。Vue2.0与vue1.0几乎90%的API和核心概念都没有变,具体可以看https://cn.vuejs.org/v2/guide/migration.htmlVue2.0的环境安装Npm install --save vueVue2中新增有两种构建方式:1.独立构建和运行构建,他们的区别在于前者包含模板编译器而后者不包含。模板编译器的职责是将模板的字符串编译为纯JavaScript的渲染函数。如果你想要在组件中使用template选项,你就需要编译器。独立构建包含模板编译器并支持template选项,他也依赖于浏览器的接口存在,所以你不能使用它来为服务器短渲染。2.运行时构建不包含模板编译器,因此不支持template选项,只能用render选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为render函数。运行时构建比独立构建要轻量30%,只有17.14kb min+gzip大小。默认npm包导出的是运行时构建。为了使用独立构建,在webpack配置中添加如下别名:resolve:{ alias:{ 'vue$':'vue/dist/vue.common.js' } }vue2.0的注意事项Vue2.0的组件必须有根元素Vue1.0中的beforeCompile换成了createdVue1.0中的Compile换成了mountedVue2.0的指令指令可以接受修饰符和参数,参数只能有一个,修饰符可以有很多个例如:<divv-yangse:hong.color="blue">ccc{{children}}</div>data(){ return{ blue:'red' }; }, directives:{ yangse(el,bingding){ el.style.background=bingding.value(); if(bingding.modifiers.color){ el.style.background='yellow'; } //console.log(bingding); } }vuex的使用Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。vuex基础使用importVuexfrom'vuex' importVuefrom"vue"; Vue.use(Vuex); conststore=newVuex.Store({ //这里state必须是json,是一个对象 state:{ count:0,//这里是初始值的罗列 students:[ {name:'panda

vue 2132 0

作者头像test1232018.03.07 10:31 

NPM结合vue的使用

1.允许用户从NPM服务器下载别人编写的第三方包到本地使用2.允许用户从NPM服务器下载并安装编写的命令行程序到本地使用3.允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用常用命令:npm install npm unistall num update npm ls 树形结构打印依赖包常用参数:-g global 全局依赖npm一般用于安装脚手架脚手架:搭建好一个一个基本的模板vue支持IE9 及更高版本├── build // 构建相关├── config // 配置相关├── src // 源代码│ ├── api // 所有请求│ ├── assets // 主题 字体等静态资源│ ├── components // 全局公用组件│ ├── directive // 全局指令│ ├── filtres // 全局 filter│ ├── icons // 项目所有 svg icons│ ├── lang // 国际化 language│ ├── mock // 项目mock 模拟数据│ ├── router // 路由│ ├── store // 全局 store管理│ ├── styles // 全局样式│ ├── utils // 全局公用方法│ ├── vendor // 公用vendor│ ├── views // view│ ├── App.vue // 入口页面│ ├── main.js // 入口 加载组件 初始化等│ └── permission.js // 权限管理├── static // 第三方不打包资源│ └── Tinymce // 富文本├── .babelrc // babel-loader 配置├── eslintrc.js // eslint 配置项├── .gitignore // git 忽略项├── favicon.ico // favicon图标├── index.html // html模板└── package.json // package.jsoncomponents:/HelloWorld.vue 实际页面的html样式router/index.js 配置了路由src/App.vue 页面级vue组件src/main.js 页面配置index.html 主页面入口一个页面要这么复杂吗vue提供一个过渡效果....<divid="app"> <ul> <testv-for="itemingroceryList"v-bind:todo="item"></test> </ul> </div> <script> Vue.component('

vue 1073 0

作者头像zyw3272018.03.05 22:00 

vue1.0+webpack开发

vue1.0+webpack搭建项目,vue1.0要与指定版本的webpack结合才能正确运行,与vue2.0项目的依赖有很大的不同,vue1.0项目相关依赖如下。{ "name":"first", "version":"1.0.0", "description":"firstvue", "main":"nodeindex.js", "scripts":{ "test":"nodetest.js", "server":"webpack-dev-server--content-base./--port8000" }, "repository":{ "type":"git", "url":"https://github.com/zyw327/vue1.0.git" }, "keywords":[ "vue" ], "author":"smartzeng", "license":"MIT", "bugs":{ "url":"https://github.com/zyw327/vue1.0/issues" }, "homepage":"https://github.com/zyw327/vue1.0/blob/master/README.md", "dependencies":{ "babel-core":"^6.26.0", "babel-loader":"^7.1.3", "babel-preset-es2015":"^6.24.1", "css-loader":"^0.28.10", "vue":"^1.0.28", "vue-html-loader":"^1.2.4", "vue-loader":"^8.7.0", "vue-style-loader":"^4.0.2", "webpack":"^2.4.1", "webpack-cli":"^2.0.10", "webpack-dev-server":"^2.4.5" } }webpack的配置如下:constpath=require('path'); module.exports={ entry:'./app/main.js&#

vue 1766 1

a6bfb44cbd5549740eb36647f36ef83a