Vue开发常用方法详解

目录
  • $nextTick()
  • $forceUpdate()
  • $set()
  • .sync——2.3.0+ 新增（Vue 3.x中已被v-model替换，不再支持）
  • 总结

$nextTick()

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

使用场景
在一些情况下，变量进行了初始赋值或更新，但是DOM还未更新完成时，使用变量的值是不起作用的。此时就需要通过this.$nextTick()等待DOM更新加载完成后立即进行使用。常用于created钩子函数中以及涉及到DOM更新的情况。
用法

this.$nextTick(() => {  this.$refs.table.refresh(true)})

this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势

$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

使用场景

对于一个复杂的对象，例如一个对象数组，直接去给数组上某一个元素增加属性，或者直接把数组的length变成0，vue无法知道发生了改变时可以使用强制更新

另一方面，表单渲染时，有时进行了选择操作，但是表单内容未更新，可使用强制更新

用法

this.$nextTick(() => {
  this.$refs.table.refresh(true)
})

$set()

使用场景

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi')

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

用法

this.$set( target, propertyName/index, value )

  • target：要更改的数据源(可以是对象或者数组)
  • propertyName/index：对象新添加的属性名或者数组新添加元素的下标位置
  • value：新添加属性的值
// 对象
this.$set(this.student,"age", 24)
// 数组
this.$set(this.arrayList, 2, { name: "张三" })

.sync——2.3.0+ 新增（Vue 3.x中已被v-model替换，不再支持）

使用场景

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”，在vue 2.3.0之后便可以使用.sync修饰符进行操作。Vue 3.0之后不再支持

用法

父组件

<comp :foo.sync="bar"></comp>

实际会被等价扩展为

<comp :foo="bar" @update:foo="val => bar = val"></comp>

子组件

this.$emit('update:foo', newValue)

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • vscode 开发Vue项目的方法步骤

    下载地址: vscode https://marketplace.visualstudio.com/VSCode或者本地地址:https://www.jb51.net/softs/606746.html 开始安装插件 Vetur : vue的文件代码高亮 Atom One Dark Theme : 好看的代码颜色主题 Simple icon theme :清爽文件夹主题 Prettier - code : 代码格式化 ESLint :代码规范检查 Debugger for Chrome :断点调

  • vue 组件开发原理与实现方法详解

    本文实例讲述了vue 组件开发原理与实现方法.分享给大家供大家参考,具体如下: 概要 vue 的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比如我们在平台中封装了自己的附件控件,输入控件等. 组件的开发 在vue 中一个组件,就是一个独立的.vue 文件,这个文件分为三部分. 1.模板 2.脚本 3.样式 我们看一个系统中最常用的组件. <template> <div > <div v-if="right=='r'" class=

  • 加快Vue项目的开发速度的方法

    现如今的开发,比如是内部使用的管理平台这种项目大都时间比较仓仓促.实际上来说在使用了webpack + vue 这一套来开发的话已经大大了提高了效率.但是对于我们的开发层面.还是有很多地方可以再次提高我们的项目开发效率,让我们更加专注于业务,毕竟时间就是生命.下面我们挨个来探讨. 巧用Webpack Webpack是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack来帮我们做一些自动化的事情.首先我们要了解require.context()这个API requi

  • vue 开发之路由配置方法详解

    vue 开发之路由配置方法详解

    本文实例讲述了vue 开发之路由配置方法.分享给大家供大家参考,具体如下: 概要 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 实现代码 1.在main.js 中引入 router.3 import router from './router/i

  • 基于vue 开发中出现警告问题去除方法

    基于vue 开发中出现警告问题去除方法

    出现这个警告问题的时候 我们可以去main.js中在头部添加这句话: Vue.config.productionTip = false 这样即可去除警告! 以上这篇基于vue 开发中出现警告问题去除方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 使用vue.js开发时一些注意事项 Vue开发过程中遇到的疑惑知识点总结

  • Vue开发环境中修改端口号的实现方法

    Vue开发环境中修改端口号 如上图所示,在开发环境中,8080便是端口号,这也是使用Vue脚手架创建的项目运行时的默认的端口. 1.Vue 2.x config文件夹中有一个index.js其中部分内容如下,port即为端口号,在这里更改即可. module.exports = { dev: { env: require('./dev.env'), port: 8080, // 端口号 assetsSubDirectory: 'static', assetsPublicPath: '/', pr

  • Vue开发常用方法详解

    Vue开发常用方法详解

    目录 $nextTick() $forceUpdate() $set() .sync--2.3.0+ 新增(Vue 3.x中已被v-model替换,不再支持) 总结 $nextTick() this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行.在修改数据之后立即使用它,然后等待 DOM 更新. 使用场景 在一些情况下,变量进行了初始赋值或更新,但是DOM还未更新完成时,使用变量的值是不起作用的.此时就需要通过this.$nextTick()等待DOM更新加载完成后立即进行使

  • Vue关于组件化开发知识点详解

    全局组件注册 Vue.component('first-component', { data: function () { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' }) data 必须是一个函数 组件模板内容必须是单个根元素 组件模板内容可以是模板字符串 全局组件可以嵌套全局组件 组件命名方式 Vue.component('first-com

  • Vue.js用法详解

    Vue.js用法详解

    vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: V

  • vue相关配置文件详解及多环境配置详细步骤

    1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息.比如项目名称,项目版本,项目执行入口文件,项目贡献者等等.npm install 命令会根据这个文件下载所有依赖模块. 文件结构如下: { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsa

  • VUE跨域详解以及常用解决跨域的方法

    VUE跨域详解以及常用解决跨域的方法

    目录 跨域 解决跨域常用方法: 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 跨域 当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时,那说明跨域了. 跨域是因为浏览器的同源策略所导致,同源策略(Same origin policy)是一种约定,它是浏览器最核

  • 绘制flowable 流程图的Vue 库使用详解

    绘制flowable 流程图的Vue 库使用详解

    目录 引言 workflow-bpmn-modeler 注册 bpmnModeler 组件 muheflow-bpmn-modeler 引言 之前松哥发了一篇文章和小伙伴们介绍了前端的 bpmn.js 这个库,利用这个库我们可以自己将绘制流程图的功能嵌入到我们的项目中. 然而,这个库默认是给 Camunda 设计的,所以画出来的流程图导出来的 XML 文件无法直接使用,必须要做一些深度定制,才能将 XML 文件转为 Flowable 流程引擎可用的 XML 文件.这个深度定制太太太麻烦了. 所以

  • Java Http请求方式之RestTemplate常用方法详解

    目录 引言 常见用法 简单Get\Post请求 Post提交常规表单 Post上传文件 配置项 请求添加Cookie\Header 配置请求工厂 超时.代理 配置拦截器.转换器,错误处理 错误重试(额外) SSL请求 基于RestTemplate一些工具 钉钉机器人通知 总结 引言 在开发中有时候经常需要一些Http请求,请求数据,下载内容,也有一些简单的分布式应用直接使用Http请求作为跨应用的交互协议. 在Java中有不同的Http请求方式,主要就是HttpURLConnection或者Ap

  • Vue自定义事件(详解)

    前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface),即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是 $on 和 $emit 不是addEventListener 和 disp

  • Vue渲染函数详解

    Vue渲染函数详解

    前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器.本文将详细介绍Vue渲染函数 引入 下面是一个例子,如果要实现类似下面的效果.其中,H标签可替换 <h1> <a name="hello-world" href="#hello-world" rel="external nofol

  • 通过npm引用的vue组件使用详解

    通过npm引用的vue组件使用详解

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

随机推荐