聊聊keep-alive组件的使用及其实现原理
写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answershuto/learnVue。在学习过程中，为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src以及Vuex的注释https://github.com/answershuto/learnVue/tree/master/vuex-src，希望可以对其他想学习源码的小伙伴有所帮助。可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。keep-alivekeep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。它提供了include与exclude两个属性，允许组件有条件地进行缓存。具体内容可以参考官网。使用用
vue学习之组件通信
vue用组件化简化了我们编写代码的复杂度，组件之间经常会出现数据传递的情况，那么组件之间是怎样通信的呢？使用props传递数据组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。父组件的数据需要通过prop才能下发到子组件中。假设我们现有一个这样的父组件varvm=newVue({el:"#app",data:{parentMessage:'h'},components:{Child}})可以看到在该父组件中注册了一个子组件Child，还有一条data数据parentMessage接下来我们怎样在子组件Child中拿到parentMessage呢？在子组件中这样写varChild={//声明当前组件内部能够接受一个m
Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard demo
在线预览仓库地址：https://github.com/wangduandu...效果图：使用到的技术：VueVue-routerElement-uiwebpackNormalize.cssvue-awesomebabel1vue-cli安装模板➜vue-el-dashboardgit:(master)vueinitwebpack?Generateprojectincurrentdirectory?Yes?Projectnamevue-el-dashboard?ProjectdescriptionAVue.jsproject?Authorwangdd<wangdd@welljoint.com>?Vuebuildstandalone?Installvue-router?Yes?UseESLinttolintyourcode?Yes?PickanESLintpresetStandard?Setupunit
理解vuex -- vue的状态管理模式
备注：本文的示例等代码将会采用es6的语法。链接vuex官方中文网站使用vue和vuex实现的简易商城，仅供参考vuex是什么？先引用vuex官网的话：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态管理模式、集中式存储管理一听就很高大上，蛮吓人的。在我看来vuex就是把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件中供其他组件使用。这么说吧，将vue想作是一个js文件、组件是函数，那么vuex就是一个全局变量，只是这个“全局变量”包含了一些特定的规则而已。在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用props+emit这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex这个时候就很实用，不过在使用vuex之后也带来了更
vue.js组件学习（上）
组件是vue.js中非常重要的一部分，打个比方，会用组件得人喝着茶就写完的页面，不会用的代码打到手抽筋也未必完的成。首先何为组件组件可以封装重用的代码，扩展HTML元素，更高的说组件是自定义元素。组件化的html写入vue.js的基本结构<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><divid="app"></div><scr
Vue实战前必须掌握的10个指令
1.v-text指令v-text指令用于更新标签包含的文本。我们看看它的用法：我们给<p></p>标签加上了指令v-text，它的值就是我们data数据中的msg，就这么简单，最后我们来看看渲染结果：它的作用跟{{msg}}效果是一样的：2.v-html指令v-html这个指令它帮助我们绑定一些包含html代码的数据在视图上，比如：“<b>hello,vue</b>”，这个字符串包含了<b>标签，要想<b>不被当作普通的字符串渲染出来，就得用v-html指令。还是上面的代码，我们把v-text指令换成v-html指令，msg的值变成了含有html代码的：“<b>hellovue</b>”，我们看看渲染效果：就这样，<b>标签被成功解析并渲染出来，视图上的文本也有了加粗的效果，这就是v-html发挥了作用，bingo！3.v-show指令v-show听这名字就可以
vue的学习过程
声明式渲染<divid="app">{{msg}}渲染变量的值，不能有HTML<spanv-once>{{msg}}</span>//渲染变量的值，只渲染一次，后期修改后不改变<divv-html="rawHtml"></div>//渲染HTML的元素<divv-bind:id="dynamicId"></div>//将dynamicId变量动态的绑定到id属性上表达式{{number+1}}//表达式{{ok?'YES':'NO'}}//三元运算表达式{{message.split('').reverse().join('')}}//表达式<divv-bind:id="'list-'+id"></div>//动态绑定值的时候也可以使用表达式,字符串list-加上id变量{{vara=1}}这是语句，不是表达式{{if(ok){retu
Vue初步了解组件——父子组件
组件什么是组件？组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生HTML元素。也可分为：有结构HTML有样式CSS有交互（效果）行为信号量存数据系统组件<inputtype="number"style="outline:10pxsolidred"step="3"min="0"max="30"oninput="console.log(1)"onclick="change()">组件的行为可以定制？通过属性设置在Vue中有什么样的组件(组件进行分类)：实现基本功能的基础的组件（最小的元素）可复用的逻辑组件（业务组件）页面组件页面上所有的东西全都是组件：形成了组件树局部注册--自定义组件你不必把每个组件都注册到全局。你可以通过某个Vue实例/组件的实例选项compone
前端每周清单第 39 期: OpenAI 与 gRPC, Gitlab 的 Vue 年度总结，GraphQL 技术栈漫游
前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单。新闻热点国内国外，前端最新动态React16.1.0发布:本周React16.1.0版本发布，自该版本开始React不再发布到Bower，而是采用unpkg来镜像存放UMD构建版本；那些依赖于Bower进行依赖管理的开发者只能选择使用老的版本。此外该版本中还修复了UMD构建中，异常全局变量的错误；并且为实验性的ReactCallReturn模块添加了父子通信的接口。Node.js9.1.0发布:本周Node.js9.1.0版本发布，整合了一系列的提交；值得注意的变化包括NODE_OPTIONS环境变量开始支持--stack-trace-limit选项，OpenSSL更新到了1.0.2m，对于http模块开始支持103EarlyHin
你见过用命令行写的简历吗？
废话：如果是“不能给hr发这样的简历”之类大家都懂的话，麻烦您就不要回复了，谢谢！国际惯例：https://github.com/dongsuo/vu...正文：作为一名程序员，还是有一份有特色的在线简历会比较好吧……在线简历很容易做得很丑哎……套模板这种事情有点丢人呀……那……干嘛不用程序员最熟悉的命令行来写简历呢？啊咧？！上图就是一个用vuejs在浏览器中模拟出来的终端界面，用这个来做一份简历还是有点小酷吧？(在线体验：https://dongsuo.github.io/ter...，源码：https://github.com/dongsuo/vu...OK，闲话少叙，来动手做一个吧。首先，你需要把这个项目(https://github.com/dongsuo/vu...fork到你自己的Github目录下，然后pull到本地。（如果你不明白这一步的话，以下是你可以在谷歌或者百度输入框输入的关键词：git,github,仓库，repository,本地仓库。所有关键词可以随意组配，直到你明白这一步为止，下同。）然后，
vue引入ueditor及node后台配置
最近公司的某个客户要用上我们公司的产品，他的后台管理里的富文本编辑器要求有点多，开始打算用Quill，但是发现Quill根本满足不了他的需求。在调研了市面上的富文本编辑器后，最后似乎只剩了百度的ueditor。虽然很丑~~~，不过没关系，政府网站和这种效果更搭:-D我是不是说了什么（逃vue引入ueditor步骤百度ueditor下载，随便哪个版本就好(本文章以php版为例)，不需要特别全面功能的可以考虑下UM喽将对应的文件夹放到static中修改前端vue部分引用的ueditor.confg.js，设置路径window.UEDITOR_HOME_URL="/static/utf8-php/"window.UEDITOR_HOME_URL="/static/utf8-php/"varURL=window.UEDITOR_HOME_URL||getUEBasePath();/***配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。*/window.
[总结]在vue相关开发中知识点整理（持续更新）
1.(webpack)vue-cli构建的项目如何设置每个页面的title在路由里每个都添加一个meta[{path:'/login',meta:{title:'登录页面'},component:'login'}]钩子函数：在main.js中添加如下代码router.beforeEach((to,from,next)=>{window.document.title=to.meta.title;next()})2.vue项目中使用axios上传图片等文件首先安装axios：1.利用npm安装npminstallaxios–save2.利用bower安装bowerinstallaxios–save3.直接利用cdn引入<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>一般情况上传照片有两种方式：1.本地图片转换成base64，
关于elementUI中el-form的rules
以下代码是借用链接描述一般我们在使用elementUI来实现一个表单验证的时候，我们需要使用rules这个标签，表单验证规则，它后面所跟的就是你写的规则，这个是写在data中的。rqueired:是否必填，如不设置，则会根据校验规则自动生成trigger:不太清楚为啥要这么写，validator:这里是指定自己写的规则。在自己写的方法中，可以将公共方法给调用进来这里的Error代表：表单域验证错误信息,设置该值会使表单验证状态变为error，并显示该错误信息
[工具配置]通过webpack+vue+vueRouter+vuecli的配置文件package.json创建一个新的项目
如果是简单通过package.json来创建一个项目，只需要执行npminstall首先，我们自己得手动创建一个webpack+vue+vueRouter+vuecli工程，执行下面：如：新建一个vue项目,创建一个基于"webpack"的项目,项目名为vuedemo：$vueinitwebpackvuedemo安装完成后进入工程名称再根据原来项目的配置文件初始化$cdvuedemo$npminstall但是由于在新建的时候对eslint的选择中选择了Yes,所以后面根据配置package.json的时候，发现没有eslint-friendly-formatter模块，由于原来的工程应该没有配置这个，所以这儿需要安装下，如下代码：npmi-Deslinteslint-friendly-formatter模块地址：https://www.npmjs.com/package/eslint-friendly-formatter安装后执行:npmrundev发现运行起来的页面没有启动起来，原因是还是这个
Vue2 源码漫游（二）
Vue2源码漫游（二）描述：在（一）中其实已经把Vue作为MVVM的框架中数据流相关跑了一遍。这一章我们先看mount这一步，这样Vue大的主线就基本跑通了。然后我们再去看compile，v-bind等功能性模块的处理。一、出发点path:platforms\web\entry-runtime-with-compiler.js这里对原本的公用$mount方法进行了代理.实际的直接方法是core/instance/lifecycle.js中的mountComponent方法。根据组件模板的不同形式这里出现了两个分支，一个核心：分支：1、组件参数中有render属性：执行mount.call(this,el,hydrating)2、组件参数中没有render属性：将template/el转换为render方法核心：Vue.prototype._render公共方法/*@flow*/importconfigfrom'core/config'i
Vue源码解析(四)-components组件
组件初始化渲染本文以局部组件的注册方式介绍组件的初始化渲染，demo如下newVue({el:'#app',template:`<div><div>fathercomponent!</div><my-component></my-component></div>`,components:{'my-component':{template:'<div>childrencomponent!</div>'}}})1、根据template函数生成vnodeupdateComponent=function(){vm._update(vm._render(),hydrating);};//template生成的render函数vm._render会调用vm._c('my-component'）vm._c=
vue组件学习（下）
上次我们说了什么是组件，和它的基本应用，下面我们来看一下我自认为的进阶内容。子组件控制父组件首先写好基本结构，创建一个子组件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><divid="app">{{text}}<children></children><children></children><children>&
Vue组件——子组件向父组件传递数据以及路由
自定义事件我们知道，父组件使用prop传递数据给子组件。但子组件怎么跟父组件通信呢？这个时候Vue的自定义事件系统就派得上用场了。使用绑定自定义事件v-on每个Vue实例都实现了事件接口，即：使用$on(eventName)监听事件使用$emit(eventName)触发事件Vue的事件系统与浏览器的EventTargetAPI有所不同。尽管它们的运行起来类似，但是$on和$emit并不是addEventListener和dispatchEvent的别名。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。不能用$on侦听子组件释放的事件，而必须在模板里直接用v-on绑定，参见下面的例子。//定义子组件varChild={//获取data()中的数据，并添加一个点击事件template:`<button@click="addCounter">{{counter}}</button>`,data(
Win x64 +VS2013 + python2.7环境下caffe的配置学习过程
前言最近项目需要用到caffe这个框架，所以试着配置。由于绝大多数的教程都是基于Linux环境的，所以对于Window的用户来说教程比较少。几经波折以后，终于配置成功，我把配置的重点步骤记录下来。准备python2.7VisualStudio2013caffe下载地址:https://github.com/Microsoft/...下载以后会得到一个叫作caffe-master.zip的包,把它解压到出来。会得到如下的目录：这是其中的一部分。配置文件的设置在./caffe-master/windows/路径下找到CommonSettings.props.example文件。打开这个文件，并且进行设置。<PythonSupport>true</PythonSupport>这个标签必须把它写成true。以上是我的配置参数。至于上面三个标签是根据自己的需要设定的。这里我选择只用cpu，如果用到CuDNN的话必须提前下载，还必须把Cuda的版本号写对。设置好了以后记得保存，然后回到./ca
VC6.0+ddk+DriverStudio3.2安装与配置
一、下载地址：1.vc6.0英文原版（最好不要用中文版）:http://down.liangchan.NET/mic...2.WinXP_DDK：安装DDK，安装时注意需要将所有的组件、工具、例子等都安装（避免出现hidport.h找不到的问题）。3.DriverStudio3.2：二.配置DriverStudio1.从网上找到库文件ntstrsafe.lib+csq.lib.rar，把解压出来的两个库文件拷贝到WinXP_DDK的安装目录下的库目录中.（我的是C:WINDDK2600libwxpi386）。启动vc6，然后进行简单的配置：菜单DriverStudio菜单下的DDKBuildSettings，在弹出的对话框中选择已经安装的DDK目录（比如我的是C:WINDDK2600）。ntstrsafe.lib+csq.lib.rar下载地址：http://vdisk.weibo.com/s/ziJ-...2.在WindowsDDKcompilerOptions中选择"EnableonlyforDrive