五分钟带你快速了解vue的常用实例方法

2024-07-31 16:41:46

前言

在了解vue的常用的实例方法之前，我们应该先要了解其常用的实例属性，你能了解到的vue实例属性有哪些呢？小编在这里就列举了几个常用的vue实例的属性。大家可以一起参考学习一下。

获取挂载的元素 --vm.$el
获取实例的初始化选项的对象 --vm.$options
获取观察的数据对象 --vm.$data
一对象，可持有的注册过ref属性的所有DOM元素和组件实例

一、vue实例方法和实例数据

1、vm.$set

这个实例方法又是Vue.set方法的别称，它的功能是新增属性，因为vue没有办法探测到普通的新增函数属性，所以我们通过使用vm.$set这个方法可以使得vue探测到。

2、vm.$delete

这个方法又是vue,delete的方法的别名，它的功能是删除对象的属性，vue通过这个方法删除属性，可以探测到。

3、vm.$watch

这个实例方法用于观察实例中一个表达式或者一个函数计算结果饿变化，有变化，就函数回调，回调的函数就是得到的参数为新的值和旧的值。

我们可以通过一段代码实例了解一下这个部分：

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<button onclick="addName()">增加</button>
<button onclick="deleteName()">删除</button>
<h3>你想要的东西：{{goods.name}}</h3>
价格：<input type="text" v-model.number="price"></br>
数量：<input type="number" v-model="count"></br>
总和：<input type="text" v-model="total"></br>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    data:{
goods:{},
price:0,
count:1,
total:0
    },

});
function addName(){
    Vue.set(vm.goods,'name','漫画书');
};
function deleteName(){
    if(vm.goods.name){
        vm.$delete(vm.goods,'name');
    }
}
vm.$watch('price',function(newVal,oldVal){
    return this.total = newVal*this.count;
})
vm.$watch('count',function(newVal,oldVal){
    return this.total = newVal*this.price;
})
    </script>
</body>

</html>

运行结果：

每次按下“增加”按钮的时候，就会显示{{goods.name}}里面的“漫画书”，当按下“删除”的时候{{goods.name}}就会显示为空；当价格和数量改变的时候，总的价格也会跟着改变。

二、实例方法和事件

1、vm.$on

这个实例方法可以用于监听vue实例里面的自定义事件，这些事件都是通过vm.$emit触发的，回调函数会接收所有传入的时间触发函数的额外的参数。

2、vm.$emit

这个实例方法通过触发当前实例上的事件，其中的附加的参数都会传给到监听器进行函数回调。

3、vm.$once

这个实例方法功能是监听一个自定义的事件，但是只能触发一次，一旦触发了，监听器就会被溢出。

4、vm.$off

这个实例方法的功能是移除一个自定义的监听器。

我们通过代码的方式了解一下：

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<button @click="zengjia">增加</button>
{{num}}
<button onclick="jianshao()">减少</button>
<button onclick="off()">解除减少操作事件</button>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    data:{
      num:100
    },
    methods:{
        zengjia:function(){
            this.num++;
        }
    }
});
vm.$on("reduce",function(step){
    vm.num =step;
});
function jianshao(){
    vm.$emit("reduce",2);
}
function off(){
    vm.$off("reduce");
}
    </script>
</body>

</html>

运行结果：每次单击“减少”按钮的时候，数值就会减少；当单击“解除减少操作事件”，在点击减少，数值已经不会再改变了。

三、实例方法和生命周期

1、vm.$mount

这个实例方法功能是：如果实例在没有收到el选项的时候，就会处于“没有挂载”的状态，因为没有和它关联的DOM元素。可以使用这个mount方法进行手动挂载。

2、vm.$destroy

这个实例地方法主要用于完全摧毁一个实例，清除和其他实例的连接，并且解除全部指令以及事件监听器。

3、vm.$nextTick

这个实例方法中的回调函数延迟到DOM更新后才能执行，但是如果在vue生命周期里面的created钩子函数进行的DOM事件的话，那么就要放在.nextTick的回调函数中。可以在数据变化之后立刻使用.nextTick，这样回调函数在DOM更新完成之后就可以进行函数调用。

我们通过代码实例来理解：

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<h2 ref="first">{{first}}</h2>
<h3 ref="secnd">{{second}}</h3>
<input type="text" v-model="msg">
<p>{{msg}}</p>
<button onclick="destroy()">销毁</button>
    </div>

    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
let vm = new Vue({
    data:{
    msg:"看到你就烦",
    first:'1',
    second:'2',
    },

});
vm.$mount('#app');
vm.first = '丘比特';
vm.second = vm.$refs.first.textContent;
console.log(vm.second);

Vue.nextTick(function(){
    vm.second = vm.$refs.first.textContent;
    console.log(vm.second);
})
function destroy(){
    vm.$destroy();
}
    </script>
</body>

</html>

运行结果：我们可以看到，console控制台里面的是‘丘比特’，执行vm.$nextTick的值是msg里面的值--‘看到你就烦’，页面也会同步更新。当你点击‘销毁’的时候，在文本框再写入数值、文本等等，是已经销毁不会在更新了。

总结

到此这篇关于vue常用实例方法的文章就介绍到这了,更多相关vue常用实例方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

简单理解vue中Props属性

本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. "prop" 是组件数据的一个字段,期望从父组件传下来.子组件需要显式地用 props 选项声明 props: Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以
Vue.js常用指令汇总（v-if、v-for等）

有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu
Vue 进阶教程之v-model详解

Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2 v-model改进的地方,然后穿插的再说点 Vue 的小知识. 在 Vue 中,有许多方法和 Angular 相似,这主要是因为 Angular 是 Vue 早期开发的灵感来源.然而,Augular 中存在许多问题,在 Vue 中已经得到解决. v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但
五分钟带你快速了解vue的常用实例方法

目录前言一.vue实例方法和实例数据 1.vm.$set 2.vm.$delete 3.vm.$watch 二.实例方法和事件 1.vm.$on 2.vm.$emit 3.vm.$once 4.vm.$off 三.实例方法和生命周期 1.vm.$mount 2.vm.$destroy 3.vm.$nextTick 总结前言在了解vue的常用的实例方法之前,我们应该先要了解其常用的实例属性,你能了解到的vue实例属性有哪些呢?小编在这里就列举了几个常用的vue实例的属性.大家可以一起参考学
五分钟带你快速学习Spring IOC

目录一.IOC底层原理: 1.IOC过程 2.IOC接口二.ioc容器bean管理xml方式(创建对象和set注入) 三.ioc操作bean管理(基于xml方式) 四.IOC操作Bean管理(xml注入其他类型属性) 五.IOC操作Bean管理(注入属性-外部bean,内部bean,级联) 六.IOC操作Bean管理(xml注入集合属性) 七.IOC操作Bean管理(FactoryBean) 八.IOC操作Bean管理(bean作用域) 九.IOC操作Bean管理(bean生命周期) 十.I
十分钟带你快速上手Vue3过渡动画

目录写在前面 Vue的transition组件过渡demo class的命名规则使用animation 过渡模式 appear属性 animate.css库的使用使用动画序列使用自定义过渡class 写在最后写在前面在实际开发中,为了增加用户体验,经常会使用到过渡动画,而过渡动画在CSS中是通过transition和animation实现的.而在Vue中,Vue本身中内置了一些组件和API可以帮助我们方便的实现过渡动画效果:接下来我们就学习一下. Vue的transition组件
五分钟带你搞懂python 迭代器与生成器

前言大家周末好,今天给大家带来的是Python当中生成器和迭代器的使用. 我当初第一次学到迭代器和生成器的时候,并没有太在意,只是觉得这是一种新的获取数据的方法.对于获取数据的方法而言,我们会一种就足够了.但是在我后来Python的使用以及TensorFlow等学习使用当中,我发现很多地方都用到了迭代器和生成器,或者是直接使用,或者是借鉴了思路.今天就让我们仔细来看看,它们到底是怎么回事. 迭代器我们先从迭代器开始入手,迭代器并不是Python独有的概念,在C++和Java当中都有itera
五分钟带你了解Java的接口数据校验

本篇文章给大家分享平时开发中总结的一点小技巧!在工作中写过Java程序的朋友都知道,目前使用Java开发服务最主流的方式就是通过Spring MVC定义一个Controller层接口,并将接口请求或返回参数分别定义在一个Java实体类中,这样Spring MVC在接收到Http请求(POST/GET)后,就会自动将请求报文自动映射成一个Java对象.这样的代码通常是这样写的: @RestController public class OrderController { @Autowired pr
三分钟带你快速学会微信小程序的条件渲染

目录前言 1.wx:if实现条件渲染 2.block结合wx:if使用 3.hiden实现条件渲染 4. wx:if vs hidden 补充:hidden 和 wx:if 的区别总结前言这篇文章是三分钟学会小程序的条件渲染教程,所谓的条件渲染就是判断是否需要把代码渲染到展示页面上.使用以下三种方式可以实现条件渲染,各自有不同的应用场景,只有熟练掌握其用法,在使用时才能得心应手. 1.wx:if实现条件渲染在框架中,使用 wx:if="" 来判断是否需要渲染该代码块: <
六分钟带你快速学会react中的useMemo

目录概念 useMemo 栗子筛选偶数每秒获取时间刷新页面如何优化 useCallback.React.memo 总结概念 react 中是通过一次次的 re-render (重新渲染)保持我们的值及时的更新到页面上的,每次重新渲染都是一次快照,可以把它想象成一张张的照片,在某个时刻它应该是什么样子的 useMemo 把创建函数和依赖数组项作为参数传入 useMemo,它仅仅会在数组依赖项中的值改变时才会重新计算值这种优化有助于避免在每次渲染时都进行高开销的计算 useMemo 的函
十分钟带你快速了解React16新特性

前段时间React的16版本发布了,采用了MIT开源许可证,新增了一些新的特性. Error Boundary render方法新增返回类型 Portals 支持自定义DOM属性 setState传入null时不会再触发更新更好的服务器端渲染新的打包策略 ... 1. 使用Error Boundary处理错误组件之前,一旦某个组件发生错误,整个组件树将会从根节点被unmount下来.React 16修复了这一点,引入了Error Boundary的概念,中文译为"错误边界",当某
五分钟带你搞懂MySQL索引下推

目录什么是索引下推索引下推优化的原理索引下推的具体实践没有使用ICP 使用ICP 索引下推使用条件相关系统参数总结如果你在面试中,听到MySQL5.6"."索引优化" 之类的词语,你就要立马get到,这个问的是"索引下推". 什么是索引下推索引下推(Index Condition Pushdown,简称ICP),是MySQL5.6版本的新特性,它能减少回表查询次数,提高查询效率. 索引下推优化的原理我们先简单了解一下MySQL大概的架构:
五分钟让你快速弄懂MySQL索引下推

大家好,我是老三,今天分享一个小知识点--索引下推. 如果你在面试中,听到MySQL5.6"."索引优化" 之类的词语,你就要立马get到,这个问的是"索引下推". 什么是索引下推索引下推(Index Condition Pushdown,简称ICP),是MySQL5.6版本的新特性,它能减少回表查询次数,提高查询效率. 索引下推优化的原理我们先简单了解一下MySQL大概的架构: MySQL服务层负责SQL语法解析.生成执行计划等,并调用存储引擎层去执