Vue api 学习
文章平均质量分 64
一晌贪欢i
仅仅用来记录学习~~
展开
-
Vue修饰符sync详解
首先官方文档没看懂?不急,我们来举个详细讲讲吧在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动原创 2021-01-06 16:44:53 · 4647 阅读 · 0 评论 -
Vue.nextTick()
官方文档Vue.nextTick() 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM会出问题,所以就衍生出了这个获取更新后的 DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码,比如Swiper扩展包的var swiper = new Swiper('.swiper-containe原创 2020-11-05 19:51:53 · 821 阅读 · 0 评论 -
Vue.observable()
官方文档 Vue.observable()vue2.6发布的一个新的api,可以处理简单的跨组件共享数据状态的问题 ,可以说是个精简版的vuex示例// /store/store.jsimport Vue from 'vue'export const store = Vue.observable({ count: 0 })export const mutations = { setCount (count) { store.count = count }}使用<t原创 2020-11-05 12:02:38 · 4369 阅读 · 0 评论 -
Vue里的keep-alive
keep-alive官方文档官方讲的还是太简单,下面总结一下使用场景吧前言在Vue构建的单页面应用(SPA)中,路由模块一般使用vue-router。vue-router不保存被切换组件的状态,它进行push或者replace时,旧组件会被销毁,而新组件会被新建,走一遍完整的生命周期。但有时候,我们有一些需求,比如跳转到详情页面时,需要保持列表页的滚动条的深度,等返回的时候依然在这个位置,这样可以提高用户体验。在Vue中,对于这种“页面缓存”的需求,我们可以使用keep-alive组件来解决这个原创 2020-10-26 11:33:59 · 916 阅读 · 0 评论 -
Vue.use()
官方文档:Vue.use()vue.use(plugin, arguments) 语法参数:plugin(Function | Object)用法:如果vue安装的组件类型必须为Function或者是Object如果是个对象,必须提供install方法如果是一个函数,会被直接当作install函数执行install函数接受参数,默认第一个参数为Vue,其后参数为注册组件时传入的arguments先举个?我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpac原创 2020-10-17 19:59:25 · 1791 阅读 · 0 评论 -
Vue.filter()
官方实例:Vue.filter()文档介绍的过于简单,下面稍微总结一下吧~vue中的过滤器分为两种:局部过滤器和全局过滤器1、定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { // msg 为固定的参数 即是你需要过滤的数据 return msg.replace(/单纯/g, 'xxx') })完整示例 <div id="app"> <p&g转载 2020-10-17 16:04:32 · 897 阅读 · 0 评论 -
Vue.delete()
官方文档 Vue.delete和Vue.set()一起总结一下吧我们平常使用vue进行开发时,会遇到vue生成实例之后,再次给数据赋值的时候,数据不会更新到视图上的情况,vue文档上说明实例创建之后添加新的属性到实例上,它不会触发视图更新。例如:<template> <div> <ul> <li v-for="item in array">{{item.name}}:{{item.age}}{{item.hobby}}<原创 2020-10-14 21:10:19 · 14521 阅读 · 0 评论 -
Vue.set()
当我们使用vue开发时经常会遇到当vue实例已经创建好了,有时候需要再次给数据赋值时,并不能在视图中改变在vue文档中注意事项写着如果在实例创建之后添加新的属性到实例上,它不会触发视图更新因此比如我们修改一个数组其中的一个值,或者添加一条数据时,不管用。<div id="app"> <p v-for="item in items" v-once>{{item}}</p> <button @click="btn()">添加</button>原创 2020-10-14 20:44:31 · 2786 阅读 · 0 评论 -
Vue里ref($refs)的用法
在Vue中一般很少会用到直接操作DOM,但不可避免有时候需要用到,这时我们可以通过ref和$refs这两个来实现,本文我们就来详细的介绍下这个内容ref ref 被用来给元素或子组件注册引用信息, 引用信息将会注册在父组件的 $refs 对象上,如果是在普通的DOM元素上使用,引用指向的就是 DOM 元素,如果是在子组件上,引用就指向组件的实例。$refs $refs是一个对象,持有已注册过 ref的所有的子组件。详细可看此篇文章比较通俗易懂 Vue教程(ref和$refs的使用)原创 2020-10-14 18:59:28 · 17795 阅读 · 0 评论 -
Vue.extend()
Vue.extend属于Vue的全局API,在实际业务开发中我们很少使用,因为相比常用的 Vue.component写法使用 extend步骤要更加繁琐一些。但是在一些独立组件开发场景中,Vue.extend + $mount这对组合是我们需要去关注的。官方文档学习开始之前我们先来看一下官方文档是怎么描述的。Vue.extend( options )参数:{Object} options用法:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。data选项是特原创 2020-10-14 15:49:21 · 1103 阅读 · 1 评论