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:获取 ...
随机推荐
- Win10 高分屏软件界面字体模糊问题解决
只需要将自定义缩放值改为 124% 即可
- 三维计算机视觉 — 中层次视觉 — Point Pair Feature
机器人视觉中有一项重要人物就是从场景中提取物体的位置,姿态.图像处理算法借助Deep Learning 的东风已经在图像的物体标记领域耍的飞起了.而从三维场景中提取物体还有待研究.目前已有的思路是先提 ...
- thinphp5框架遇到 mkdir() Permission denied 解决办法
网站重装 直接复制本地程序文件 里面数据库链接信息要改成线上的 然后mysql apache 等都没有动 运行后出现错误 mkdir() Permission denied 这是由于runtime目录 ...
- jquery实现同时展示多个tab标签+左右箭头实现来回滚动
内容: jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果: 蓝色框圈起来的分别是向上翻. ...
- phpadmin dvwa sqli-labs xsser.me
下载phpadmin,安装后网站根目录 phpStudy\PHPTutorial\WWW 将下载的dvwa文件夹放到该目录下,修改config/config.inc.php文件中的mysql连接信息. ...
- 判断网页请求与FTP请求
实例说明 在访问Internet网络时,经常涉及到很多访问协议,其中最明显.最常用的就是访问页面的http协议.访问ftp服务器的FTP协议等.
- vue里computed的get和set
computed里的对象有get和set方法. get是当该对象所依赖的变量发生变化是执行,重新returncomputed结果. set是该对象的值变化时会执行,并且将变化的结果作为参数传进set里 ...
- eclipse连接mysql数据库实现怎删改查操作实例（附带源码）
package model; public class User { private int id; private String name; private String password; pub ...
- C语言定义的操作mysql数据库的接口
编写的环境:centos7系统下,对mysql的衍生mariadb进行数据库的操作,包含设置访问数据库的参数,查询数据库和增删改数据库的三个功能.对于查询数据库,我这里允许不返回查询结果,用于判断查询 ...
- HTML经典模板总结（地址）
HTML经典模板总结 地址:http://download.csdn.net/tag/html%E6%A8%A1%E6%9D%BF?from=singlemessage