【Vue五分钟】五分钟了解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实例的属性。大家可以一起参考学习一下。
- 获取挂载的元素 --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 订单支付15分钟倒计时
vue 订单支付15分钟倒计时 //支付倒计时ComputetTime(data) {let st = data.currentTime.replace(/\-/g, "/"),/ ...
- Vue 学习第五天 学习笔记
Vue 学习第五天 1. keyup事件 <div id="app"> <input type="text" v-model=" ...
- 好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
- Vue学习第五天(路由相关)
Vue学习第五天(路由相关) 今天主要学习了vue中ref关键字和路由相关的知识点 对于ref,可以理解为引用,当我们在一个传统的html标签上使用这个标签以后 <login ref=" ...
- Vue实战篇五:实现文件上传
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- Vue进阶(五十三):vue-cli 脚手架 webpack.prod.conf.js 配置文件详解
文章目录 一.前言 二.optimize-css-assets-webpack-plugin 插件 三.拓展阅读 一.前言 webpack.prod.conf.js 配置文件是webpack生产环境核 ...
- vue 插入word模板 项目_10 分钟为你的 vue 项目编写代码文档
代码文档是软件开发使用和维护的必备资料,有了文档,开发和维护以及协作的效率将变得大大提升.tips:如果对 JSDoc 已经熟悉,可以直接跳到实战演练环节. 什么是文档?软件文档或者源代码文档是指与软 ...
- 第五节:轻松掌握 vue 实例的生命周期
公众号后台收到不少同学催更新,马上来. 上两节我们都是讲vue的实例,简单创建和定义实例的4个常用选项,没看过的伙伴可以先去看上两节,按顺序学习比较容易掌握. 这一节我们学习vue实例的生命周期,没错 ...
- 十分钟带你了解Vue框架
Vue 框架诞生于2014年,其作者为中国人--尤雨溪. Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架,该框架遵循CMD规范,并且提供的设计模式为MVVM模式. (M ...
- Vue入门(五)之组件
组件 1.组件的概念 2.组件的使用(定义,注册,和使用) 2.1.定义组件 2.2.注册组件 2.3.使用组件 2.4.组件编写方式与 Vue 实例的区别: 3.组件嵌套 4.组件的属性 4.1.使 ...
最新文章
- windows下忘记mysql超级管理员密码的解决办法
- 郑州计算机技校哪个学校好,郑州十大技校排名 详细介绍
- 自已做的第一个autoconf程序(不断完善中)
- C++笔记-ClassA a和ClassA a()的区别与联系
- 一个web项目web.xml的配置中context-param配置作用
- 路由器网络性能测试软件,路由器压力测试工具 路由器UDP攻击软件 路由器性能测试...
- selenium 在pycharm中安装selenium
- 2.5 js格式化时间库
- C语言中 各数据类型求绝对值abs(),fabsf()等函数的使用。
- java split竖线_java对竖线|进行分割(split)操作
- 如何将时间序列分解为周期序列和趋势序列的和?
- 关于React报Too many re-renders. React limits the number of renders to prevent an infinite错误的解决方案
- 计算语言学之语法理论
- 我来告诉大家一些无耻的电脑知识
- finally语句什么时候不会执行
- ubuntu密码忘记了怎么办
- ubuntu下手动安装gnome插件
- 学习并使用HC-SR04超声波测距模块+STM32
- PDF预览组件 Adobe Reader ActiveX控件使用
- .netCore在Linux容器上的发布