Vue基础进阶 之 实例方法
常用的实例方法：
数据：
vm.$set：设置属性值；
vm.$delete：删除属性值；
vm.$watch：观测数据变化；
生命周期：
vm.$mount：手动挂载Vue实例；
vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听；
vm.$nextTick：将方法中的回调函数，延迟到DOM更新后；
vm.$set：设置属性值与vm.$delete：删除属性值；
示例：
想和上图一样可以添加一个id，如果有id就就行自增，如果没有就添加一个默认值，因此只能使用.$set的实例方法：
vue代码：
<script>
let vm= new Vue({
el:'div',
data:{
user:{
username:'perfect'
}
},
methods:{
changeUsername(){
this.user.username='perfect_1';
},
addId(){
// this.$set(this.user,'id',1);//局部进行添加Id
// Vue.set(this.user,'id',1);//全局设置
if(this.user.id){
this.user.id++;
}else{
Vue.set(this.user,'id',);
}
console.log(this.user.id);
}
}
});
</script>
其中，this.user表示对象，id表示key，1表示value
html:
<body>
<div>
Id:<span>{{user.id}}</span><br /> 用户名：<span>{{user.username}}</span><br />
<button @click="changeUsername">changeUsername</button>
<button @click="addId">添加ID</button> </div>
</body>
同理，我们使用.$delete实例方法：如果有id的时候我们进行删除
使用.$delete实例方法的vue代码：
delId(){
if(this.user.id){
// this.$delete(this.user,'id');
Vue.delete(this.user,'id');//全局的
console.log('已经删除ID');
}
HTML：
<div>
Id:<span>{{user.id}}</span><br /> 用户名：<span>{{user.username}}</span><br />
<button @click="changeUsername">changeUsername</button>
<button @click="addId">添加ID</button>
<button @click="delId">删除ID</button> </div>
.$set与.$delete实例方法总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 06_常用的实例方法</title>
<script type="text/javascript" src="../js/vue.js" ></script> </head>
<body>
<div>
Id:<span>{{user.id}}</span><br /> 用户名：<span>{{user.username}}</span><br />
<button @click="changeUsername">changeUsername</button>
<button @click="addId">添加ID</button>
<button @click="delId">删除ID</button> </div>
</body> <script> let vm= new Vue({
el:'div',
data:{
user:{
username:'perfect'
} },
methods:{ changeUsername(){ this.user.username='perfect_1';
}, addId(){
// this.$set(this.user,'id',1);//局部进行添加Id
// Vue.set(this.user,'id',1);//全局设置 if(this.user.id){
this.user.id++;
}else{
Vue.set(this.user,'id',);
}
console.log(this.user.id);
},
delId(){
if(this.user.id){
// this.$delete(this.user,'id'); Vue.delete(this.user,'id');//全局的
console.log('已经删除ID');
} } } }); </script>
</html>
.$set与.$delete实例方法
vm.$watch：观测数据变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 07_常用的实例方法_watch</title>
<script type="text/javascript" src="../js/vue.js" ></script> </head>
<body>
<div>
<input type="text" v-model="msg" /><br />
msg:<span> {{msg}}</span><br />
<input type="text" v-model="num" /><br />
num:<span> {{msg}}</span><br />
<button onclick="unWatch()">unWatch</button> </div>
</body> <script> let vm= new Vue({
el:'div',
data:{
msg:'perfect',
num: },
watch:{
num:function(newValue,oldValue){
console.log("修改了num old="+oldValue+"new="+newValue);
}
}, });
let unwatch=vm.$watch('msg',function(newValue,oldValue){//返回一个取消观察函数，用来停止触发回调： console.log("修改了msg old="+oldValue+"new="+newValue);
});
function unWatch(){ unwatch();
} </script>
</html>
观测一个普通的属性，可以进行回调
实例方法watch深度观测
当观测一个对象时：需要一个深度观测deep这样才能进行回调
发现打印出来新值与旧值得结果都一样，说明没有获取到修改的username
加入的vue代码：
user:{
handler:function(newValue,oldValue){
console.log("修改了username old="+oldValue.username+"new="+newValue.username);
console.log(oldValue==newValue);
},
deep:true
}
加入的HTML：
<input type="text" v-model="user.username" /><br />
username:<span> {{user.username}}</span><br />
当然.$watch也有这样的写法；
其代码为：
let unwatch=vm.$watch('user',{//返回一个取消观察函数，用来停止触发回调：
handler:function(newValue,oldValue){
console.log("修改了msg old="+oldValue+"new="+newValue);
},
deep:true
});
vm.$watch总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 07_常用的实例方法_watch</title>
<script type="text/javascript" src="../js/vue.js" ></script> </head>
<body>
<div>
<input type="text" v-model="msg" /><br />
msg:<span> {{msg}}</span><br />
<input type="text" v-model="num" /><br />
num:<span> {{msg}}</span><br />
<input type="text" v-model="user.username" /><br />
username:<span> {{user.username}}</span><br />
<button onclick="unWatch()">unWatch</button> </div>
</body> <script> let vm= new Vue({
el:'div',
data:{
msg:'perfect',
num:,
user:{
id:'',
username:'perfect*'
} },
watch:{
num:function(newValue,oldValue){
console.log("修改了num old="+oldValue+"new="+newValue);
}, // user:{
// handler:function(newValue,oldValue){
// console.log("修改了username old="+oldValue.username+"new="+newValue.username);
// console.log(oldValue==newValue);
// },
// deep:true
// }
} }); let unwatch=vm.$watch('user',{//返回一个取消观察函数，用来停止触发回调： handler:function(newValue,oldValue){
console.log("修改了msg old="+oldValue+"new="+newValue);
},
deep:true
});
function unWatch(){ unwatch();
} </script>
</html>
观测数据变化的实例方法
Vue基础进阶 之 实例方法的更多相关文章
- Vue基础进阶 之 实例方法--生命周期
在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...
- vue 基础-->进阶 教程(1): 基础（数据绑定）
第一章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue基础进阶 之 列表过渡
在前面的博客我们一直在操作单个元素的过渡,如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了: 如何使用:将要操作的列表元素放在<transi ...
- Vue基础进阶 之 过渡效果
进入/离开过渡效果:Vue在插入.更新或移除DOM时,可以设置一些动画效果: 如何使用过渡效果:利用<transition></transition>组件将需要应用的过渡效果的 ...
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
- Vue基础进阶 之 常用的实例属性
Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取 ...
随机推荐
- Java-IO基础类回忆
好记性不如烂笔头,就拿Java IO来说吧,这部分的基础类我大学都已经学过一遍了,但是现在忘记的差不多了,所以准备写一篇博客,讲这些东西都回忆一下,并且整理一下. 首先借用网上的一张图: 纵向分为字节 ...
- Spring AOP @AspectJ 入门基础
需要的类包: 1.一个简单的例子 Waiter接口: package com.yyq.annotation; public interface Waiter { void greetTo(String ...
- 动态获取移动端视宽,从而结合rem达到适配
// jq !function(){ var windowWidth= $(window).width(); if(windowWidth > 750) { windowWidth = 750; ...
- PHP（表单元素）
表单: 1.收集用户的输入,发送到后台 <form action="后台地址" method="提交方式" enctype="multipart ...
- php 延迟静态绑定： static关键字
abstract class DomainObject { public static function create() { return new self(); } } class User ex ...
- online ddl与pt-osc详解
Ⅰ.背景 优化sql的过程中发现表上少一个索引,直接加一个?会不会hang住?不加?sql又跑不好,由此引出一个问题--ddl操作怎么做? Ⅱ.闲扯三两句 5.6版本之前的MySQL创建索引不支持on ...
- Xmodem协议简介
1. Xmodem协议 1.1. 简介 在上一章中,BootLoader和APP在串口下的升级其实都用到了一种文件传输协议,即Xmodem协议,该协议因其简单,易实现和使用的特点在很多 ...
- jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- Objective-C语法之代码块(block)的使用 （转载）
代码块本质上是和其他变量类似.不同的是,代码块存储的数据是一个函数体.使用代码块是,你可以像调用其他标准函数一样,传入参数数,并得到返回值. 脱字符(^)是块的语法标记.按照我们熟悉的参数语法规约所定 ...
- bugfree3.0.1-修改“优先级”“严重等级”为中文
1.进入目录C:\xampp\htdocs\bugfree\protected\models 2.打开文件 Info.php