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实例的属性
- 获取挂载的元素 --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.js实例方法之生命周期详解
本文主要给大家介绍的是关于Vue.js实例方法之生命周期的相关内容,分享出来供大家参考学习,学习的朋友们下面来一起看看详细的介绍: 一.$mount()挂载方法 $mount是用来挂载扩张的.如果 Vue 实例在实例化时没有收到 el 选项,则它处于"未挂载"状态,没有关联的 DOM 元素.可以使用 vm.$mount() 手动地挂载一个未挂载的实例. 比如我们扩张了一个全局组件,通过$mount手动的挂载到DOM上,也就生成了一个Vue实例. <div id="#ap
-
详解vue 实例方法和数据
1.vm.$set 问题描述: 如何在不通过循环数据给list数据添加一个showMore属性,并且在moreFun中改变这个新增属性的值,并实现双向绑定? <template> <div id="app"> <div class="demo"> <ul> <template v-for="(v,index) in list"> <li>{{v.name}}</li&g
-
Vue v-bind动态绑定class实例方法
现在很多网站,都是希望动态切换class,更换css样式.下面我们使用Vue的v-bind绑定class v-bind动态绑定class 对象语法绑定(常用) red和size的值为true就在class显示red和size,false就不显示.下面有两种写法: <style> .red{ color: red; } .size{ font-size: 20px; } </style> <div id="app"> <ul> <!-
-
Vue+axios+WebApi+NPOI导出Excel文件实例方法
一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页(如会员信息,订单信息等)表格数据导出,如表格数据进行了条件筛选,则需要将条件传至后端api,筛选数据后,导出成Excel. 思考过前端导出的3种方案: 1.使用location.href 打开接口地址.缺点: 不能传token至后端api, 无法保证接口的安全性校验,并且接口只能是get方式请求.
-
vue项目中引入Sass实例方法
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal
-
用vue.js组件模拟v-model指令实例方法
1.问题描述 在使用v-model指令实现输入框数据双向绑定,输入值时对应的这个变量的值也随着变化:但是这里不允许使用v-model,需要写一个组件实现v-model指令效果 <div id="user"> <input type="text" v-model="username"> <label>{{username}}</label> </div> <script> le
-
VUE项目中加载已保存的笔记实例方法
现在笔记内容每次改变都会进行保存操作,我们需要在应用重新打开的时候恢复数据.这里 将使用 localStorage.getItem() API.将下面的代码添加到 JavaScript 文件的最后: 一个基本的笔记编辑器 console.log('restored note:', localStorage.getItem('content')) 当刷新应用时,可以看到在浏览器控制台打印出了已经保存的笔记内容. 1. 生命周期钩子 将笔记内容恢复到 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实例的属性 获取挂载的元素 --vm.$el 获取实例的初始化选项的对象 --vm.$options 获取观察的数据对象 --vm.$data 一对象,可持有的注册过ref属性的所
-
Vue常用指令详解分析
Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较适用于移动端,轻量级的框架,文件小,运行速度快.最近,闲来无事,所以学习一下Vue这个流行的框架,以备后用. 一.指令 v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model) v-for 格式: v-for="字段名 in(of) 数组json" 循环数组或
-
五分钟带你快速了解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实例的属性.大家可以一起参考学
-
vue的常用组件操作方法应用分析
项目技术: webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例: 1.数组数据还未获取到,做出预加载的动画 <el-carousel :interval="3000" type="card" height="200px" class="common-mt-md"> <el-carousel-item v-f
-
常用的Docker命令及示例汇总分析
目录 1.容器生命周期管理 (1)docker run (2)start/stop/restart (3)docker kill (4)docker rm (5)pause/unpause (6)create (7)docker exec (8)docker ps (9)docker inspect (10)top 1.容器生命周期管理 (1)docker run 命令说明 创建一个新的容器并运行一个命令 语法 docker run [OPTIONS] IMAGE [COMMAND] [
-
Vue中sync修饰符分析原理及用法示例
目录 不使用sync修饰符的代码示例 使用sync修饰符的代码示例 sync修饰符的原理 前几天在看别人代码时,发现了sync修饰符的妙用,特记录其用法和原理如下. 不使用sync修饰符的代码示例 父组件: <template> <div> <div v-if="show">11111</div> <h3>下面是子组件</h3> <SyncDemo :show="show" @update
-
Vue常用传值方式、父传子、子传父及非父子实例分析
本文实例讲述了Vue常用传值方式.父传子.子传父及非父子.分享给大家供大家参考,具体如下: 父组件向子组件传值是利用props 子组件中的注意事项:props:['greetMsg'],注意props后面是[]数组可以接收多个值,不是{}. 且此处的greetMsg用greet-msg会报错,记住需用驼峰法命名 非父子组件进行传值 非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中 间仓库来传值,不然路由组件之间达不到传值的效果. import Vue from 'vue' e
-
深入理解Vue官方文档梳理之全局API
Vue.extend 配置项data必须为function,否则配置无效.data的合并规则(可以看<Vue官方文档梳理-全局配置>)源码如下: 传入非function类型的data(上图中data配置为{a:1}),在合并options时,如果data不是function类型,开发版会发出警告,然后直接返回了parentVal,这意味着extend传入的data选项被无视了. 我们知道实例化Vue的时候,data可以是对象,这里的合并规则不是通用的吗?注意上面有个if(!vm)的判断,实例化
-
基于JS对象创建常用方式及原理分析
前言 俗话说"在js语言中,一切都对象",而且创建对象的方式也有很多种,所以今天我们做一下梳理 最简单的方式 JavaScript创建对象最简单的方式是:对象字面量形式或使用Object构造函数 对象字面量形式 var person = new Object(); person.name = "jack"; person.sayName = function () { alert(this.name) } 使用Object构造函数 var person = { na
-
Vue官方文档梳理之全局配置
本文主要介绍了Vue官方文档梳理之全局配置,分享给大家,也给自己留个笔记.具体如下: optionMergeStrategies 用于自定义选项的合并策略,Vue已经预定义了一些自己配置项的合并策略,如下图所示. 比如props.methods.computed就是同一个策略:子配置项会覆盖父级配置项.源码如下: var strats = config.optionMergeStrategies; strats.props = strats.methods = strats.computed =