vue
cnccl-web-js
web前端工程师-5年
展开
-
vue中methods,watch和computed的使用
1、computed:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。2、methods:methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。3、watch:是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一...原创 2018-08-15 09:17:56 · 279 阅读 · 0 评论 -
vue中如何缓存你想缓存的路由
<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!--这里是会被缓存的路由--> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"...原创 2019-10-05 21:40:16 · 1074 阅读 · 0 评论 -
vue中axios的封装
一、axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios文...原创 2019-10-04 09:08:35 · 290 阅读 · 1 评论 -
前端路由的实现
前言前端路由是现代SPA应用必备的功能,每个现代前端框架都有对应的实现,例如vue-router、react-router。我们不想探究vue-router或者react-router们的实现,因为不管是哪种路由无外乎用兼容性更好的hash实现或者是H5 History实现,与框架几个只需要做相应的封装即可。提前声明: 我们没有对传入的参数进行及时判断而规避错误,也没有考虑兼容性问题...原创 2019-09-30 10:58:03 · 118 阅读 · 0 评论 -
key在Vue列表渲染时究竟起到了什么作用
key的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。最常见的用例是结合...原创 2019-09-29 17:35:59 · 213 阅读 · 0 评论 -
Vue的组件通信之Provide与Inject机制
Vue中父组件到子组件的通信主要由子组件的props属性实现。但是在一些情况下,父组件无法直接向子组件的props传值。比如子组件通过父组件的slot进入父组件,父组件根本不知道子组件是谁,更不用说用子组件的props了。这时应该怎么办呢?Vue在2.2.0版本引入了provide与inject,正好适合处理这一情况。什么是provide与inject用文档的话说:provide...原创 2019-09-29 10:32:26 · 1298 阅读 · 1 评论 -
Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners)
Vue组件如何通信?Vue组件通信的方法如下:props/$emit+v-on: 通过props将数据自上而下传递,而通过$emit和v-on来向上传递信息。 EventBus: 通过EventBus进行信息的发布与订阅 vuex: 是全局数据管理库,可以通过vuex管理全局的数据流 $attrs/$listeners: Vue2.4中加入的$attrs/$listeners可以...原创 2019-09-29 10:23:54 · 312 阅读 · 0 评论 -
Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用。本文不讲语法,就讲自定义指令的用法。 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。 比如谷歌图片的加载做得非常优雅,在图片未完成加...原创 2019-09-28 18:27:15 · 138 阅读 · 0 评论 -
Vue和React到底选哪个?
Vue和React都是前端UI框架,那么到底该选哪个用于开发项目呢?主要区别Vue与react有很多的相似之处,但他们也有完全不一致的地方。模板 vs JSXReact与Vue最大的不同是模板的编写。Vue鼓励你去写近似常规HTML的模板。写起来很接近标准HTML元素,只是多了一些属性。<ul> <template v-for="item in it...原创 2019-09-18 16:02:38 · 1187 阅读 · 0 评论 -
Vue 四行代码实现无感知上拉加载更多
话不多说,直接上代码://可滚动容器的高度let innerHeight = document.querySelector('#app').clientHeight;//屏幕尺寸高度let outerHeight = document.documentElement.clientHeight;//可滚动容器超出当前窗口显示范围的高度let scrollTop = document....原创 2019-09-02 14:48:52 · 249 阅读 · 0 评论 -
vue中利用索引直接设置一个数组项,不能触发视图更新的问题
由于 JavaScript 的限制,Vue不能检测以下数组的变动:当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength举个例子:var vm = new Vue({ data: { items: ['a', 'b', 'c'] }...原创 2019-07-29 15:40:59 · 875 阅读 · 0 评论 -
vue中向对象中添加未在data中声明到属性
受现代 JavaScript 的限制 (而且Object.observe也已经被废弃),Vue无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化,所以属性必须在data对象上存在才能让 Vue 将它转换为响应式的。例如:var vm = new Vue({ data:{ a:1 }})// `vm.a` ...原创 2019-07-29 15:39:34 · 3238 阅读 · 0 评论 -
图片降质和剪裁
<img :src="item.coverImg | imageSearch" alt=""/>//搜索页列表裁剪Vue.filter('imageSearch',(value)=>{ if (process.env.NODE_ENV === 'development') { return value; }else{ re...原创 2018-08-31 17:26:24 · 371 阅读 · 0 评论 -
vue中的$nextTick()理解
前提vue更新数据是异步的1.0 中确实是通过 v-el:xxx 标记 dom 然后在组件里通过 this.$els.xxx 就可以获得这个 dom 对象了$nextTick(() => {}) 与DOM相关操作写在该函数回调中,确保DOM已渲染Vue.nextTick()文档解释在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的...原创 2018-08-16 17:56:10 · 729 阅读 · 0 评论 -
另一种方式实现vue的响应式原理
Proxy在目标对象之前架设一层“拦截”,外界对该对象的访问都必须先通过这层拦截,因此提供一种机制,可以对外界的访问进行过滤和改写。<input type="text" id="txt" /><div id="show"></div><script type="text/javascript"> // proxy的实现 const ...原创 2019-10-06 22:12:35 · 84 阅读 · 0 评论