vue
文章平均质量分 58
193Eric
多年后的你,一定会感谢现在拼命的自己
展开
-
vue项目 history模式在nginx多级目录的配置
起因因为测试环境的链接一般都是一个主链接后面加文件目录的形式来配置nginx。例如:www.xxxx.com/admin 、www.xxx.com/clond …admin和clond是不同的项目,只是通过nginx代理使用同一个域名下面。所以我们如果在这种域名下面配置nginx,满足history模式的话,需要更改一些配置。vue官方告诉我们配置方式是:前端:const router = new VueRouter({ mode: 'history', routes: [...]}原创 2022-01-19 18:03:34 · 3462 阅读 · 0 评论 -
Vue3.0体验
Vue3.0体验vue3.0已经问世了,Vue 团队先后对外发布了 vue-function-api 和 vue-compisition-api 的 RFC,我们从最新发布的vue-compisition-api来学习vue3.0的新特性,看看对比vue2.0有什么不同。1.初始化项目安装vue-cli3 npm install -g @vue/cli创建项目 vue create my-project项目中安装 composition-api npm install @vue/compos原创 2020-10-26 21:09:16 · 867 阅读 · 0 评论 -
15分钟学会vue项目改造成SSR
15分钟学会vue项目改造成SSRPs:网上看了好多服务器渲染的例子,基本都是从0开始的,用Nuxt或者vue官网推荐的ssr方案(vue-server-renderer),但是我们在开发过程中基本上是已经有了现有的项目了,我们所要做的是对现有项目的SSR改造。那么这里,跟我一起对一个vue-cil2.0生成的项目进行SSR改造关于这篇文章的案例源代码我放在我的github上面,有兴趣的同学,.........原创 2019-12-16 18:01:24 · 13988 阅读 · 8 评论 -
Vue源码剖析(五)vuex机制
Vuex机制网上看了好多的博客和源码教程,感觉很多仔细的地方没有说清,而且在一些复杂的部分加了好多的描述,所以就想自己也写下心得, 方便自己, 方便他人,有兴趣的同学可以关注我的github里面有我之前一些博文 github/193Eric正常的vue.js里面我们用来传递数据或者状态是用props,或者$emit事件的方式,但是当应用很复杂的时候,还单独用这种方式,页面会乱七八糟,页面与页...原创 2019-10-28 17:50:37 · 15761 阅读 · 0 评论 -
Vue源码剖析(四)nextTick更新机制
nextTick更新机制网上看了好多的博客和源码教程,感觉很多仔细的地方没有说清,而且在一些复杂的部分加了好多的描述,所以就想自己也写下心得, 方便自己, 方便他人,有兴趣的同学可以关注我的github里面有我之前一些博文 github/193Eric为什么大家听到的vue是异步更新机制?传统的dom更新不是同步的吗?vue修改视图的方式是:setter -> Dep -> ...原创 2019-10-28 17:49:47 · 8762 阅读 · 0 评论 -
Vue源码剖析(三)patch和Diff算法
Patch和Diff算法我们知道的,在数据更改后,会触发getter,然后通过dep.notify()来通知watcher触发update进而更新视图,最终是通过Diff算法来对比新老Vnode的差异,并把差异更新到Dom视图上Diff我们知道的,Virtual DOM是一颗树,而diff算法主要把两颗树进行对比,找出之间的差异,来渲染页面diff 算法是通过同层的树节点进行比较而非对...原创 2019-10-28 16:27:23 · 10224 阅读 · 1 评论 -
Vue源码剖析(二)响应式
响应式主要是双向绑定和依赖收集Object.defineProperty,Vue.js就是基于它实现「响应式系统」的。observer(可观察的)我们知道要实现双向绑定需要给对象通过Object.defineProperty添加getter和setter方法。那我们是怎么来设置vue的呢,我们可以实现一个observer函数,我们需要它接收一个对象,那个对象是需要对数据进行响应式的,然后...原创 2019-10-27 23:17:01 · 8542 阅读 · 0 评论 -
Vue源码剖析(一)全局机制
Vue源码剖析网上看了好多的博客和源码教程,感觉很多仔细的地方没有说清,而且在一些复杂的部分加了好多的描述,所以就想自己也写下心得, 方便自己, 方便他人Vuejs全局机制这里想从全局讲一下vue的全局机制,Vue.js 内部是怎么的一个流程初始化过程就像我们所知道的,vue是需要一个new Vue()的过程,在这之中,首先会调用_init()函数进行初始化,它会初始化生命周期、事件...原创 2019-10-25 19:06:51 · 8624 阅读 · 2 评论 -
element-ui select组件传对象的问题
在开发过程中,用了饿了么的element-ui,我只能说它的文档是真的很粗糙,很多变量只给了一句解释,很多时候根本不知道是干嘛的。 在用select组件的时候,官方给出的例子是option 里面的value绑定一个值(不能是对象,绑定的对象的话就变成了选项全部变蓝,而且出问题)。但是在开发过程中,确实遇到了需要绑定对象的时候,看官方文档根本没发现怎么解决,后来通过百度,谷歌才知道,原...原创 2018-06-21 10:46:08 · 6888 阅读 · 1 评论 -
vue单页面程序对谷歌GA事件的应用
公司运营最近在对网页做用户转化率调查这块,找到了谷歌GA事件。按照之前GA官网给出的文档,把代码加入到了index.html里面,一周后发现统计出来的数据跟后台数据库对比对不上。 经过一番研究后,发现谷歌GA事件的网页追踪原理是每一次网页跳转都会调用那个gtag('config')代码,然后追踪当前页面。但是对于单页面来说,其实页面只加载了一次index.html,所以造成了数据丢失...原创 2018-06-21 10:39:00 · 3687 阅读 · 0 评论 -
深入浅出vuex
对于vuex,就像rudux的作者所说的”您自会知道什么时候需要它” 为了理解vuex,demo中运用了vuex来对底部Icon进行变化。Vuex Vuex是专门为 Vue.js 设计的状态管理库 如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。 首先是创建一个 store ,里面有: s原创 2017-04-19 16:58:29 · 1028 阅读 · 0 评论 -
Vue进阶系列之组件
Vue进阶之组件创建并注册组件- 全局创建注册`Vue.component(tagName, options);`- 局部创建注册``` new Vue({ components: { // <my-component> 将只在父模板可用 'my-component':'<h1>hellow world</h1>'原创 2017-05-18 12:06:44 · 447 阅读 · 0 评论 -
vue 进阶系列之指令
vue 进阶之指令vue里面有一些默认的指令,如v-show,v-if,v-model….,除了这些之外,我们还可以自定义指令来对纯 DOM 元素进行底层操。 因为vue里面没有提供其他的操作dom的api,所以对dom操作的时候,可以选择用指令的形式,特别是在v-for数据循环的时候需要对dom进行一些操作时,用指令可以分别对每一个item进行操作 So…如果想对dom进行操作,选择指令吧。又原创 2017-05-18 12:05:34 · 601 阅读 · 0 评论 -
vue 进阶系列之路由
vue 进阶之路由当我们想用vue来创建单页面应用的时候,我们就可以用vue-router来建立起路由来选择将哪个组件映射到当前页面。 其中路由用到的最多的就是<router-view></router-view>设置路由渲染部分。 用<router-link to="/index">index</router-link>来触发,这个类似于一个a标签。点击跳转 最基本的路由应用就是:原创 2017-05-18 12:05:03 · 505 阅读 · 0 评论 -
axios在Vue组件中应用
axios在Vue组件中应用Vue里面虽然有个vue-resource,但是在Vue2.0出来后,作者提倡用axios来做ajax, 在es6的环境下,可以直接: npm install axios import axios from ‘axios’ 在es5中可以直接引用: <script src="https://unpkg.com/axios/dist/axios.min原创 2017-05-02 17:28:20 · 920 阅读 · 0 评论 -
webpack+vue+vueRouter+es6 构建的简单实例项目
webpack-vue-demowebpack+vue+vueRouter+es6 构建的简单实例项目 github地址 https://github.com/193Eric/webpack-vue-vueRouter Vue很轻量,它写组件的方式非常舒服。代码风格也很干净。之前也在网上看了很多案例,知道入门的时候很麻烦,特别是webpack+vue的使用。 所以我用Vue写了一个小dem原创 2017-04-03 17:33:39 · 2176 阅读 · 1 评论 -
Vue js 的生命周期(看了就懂)
用Vue框架,熟悉它的生命周期可以让开发更好的进行。首先先看看官网的图,详细的给出了vue的生命周期:它可以总共分为8个阶段:beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前),de原创 2017-03-03 18:09:53 · 123388 阅读 · 8 评论 -
VueJs开发入门
之所以选择vuejs,除了vuejs比较轻量外,同时还有vuejs的语法结构,非常简单,明了,很容易学习。vuejs主要负责数据渲染的部分,和一些事件,在项目中还可以完美插入Jepto框架。vuejs 2.0版本公司开发项目为公众号商城。用vue来写数据渲染方面和开发公共组件十分方便。 使用npm安装: npm install vue 当然你也可以在gith原创 2017-03-03 15:55:48 · 2650 阅读 · 0 评论