Vue_(组件)实例方法
Vue.js实例方法/生命周期 传送门
常用的实例方法
数据： 传送门
vm.$set：设置属性值
vm.$delete：删除属性值
vm.$watch：观测数据变化
生命周期
vm.$mount：手动挂载Vue实例
vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听
vm.$nextTick：将方法中的回调函数，延迟到DOM更新后 传送门
Learn
一、vm.$set
二、vm.$delete
三、vm.$watch
四、实例方法-生命周期
项目结构
【每个demo下方都存有html源码】
一、vm.$set 传送门
vm.$set：设置属性值
给user添加一个username属性和两个实例方法，通过changeUsername()方法去修改username属性的值，通过addId()去添加用户的id，通过按钮点击事件分别触发这两个方法
<div>
Id：<span>{{user.id}}</span><br />
用户名：<span>{{user.username}}</span><br />
<button @click="changeUsername">change</button><br />
<button @click="addId">addId</button><br />
</div>
data:{
user:{
username:'Gary'
}
},
methods:{
changeUsername(){
this.user.username = 'Gary-2!!!';
console.log(this.user.username);
},
addId(){
this.user.id=1;
console.log(this.user.id);
}
}
可以看到user的id并没有被赋值1，而user的username属性已经是被改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</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">change</button><br />
<button @click="addId">addId</button><br />
</div>
</body> <script>
let vm = new Vue({
el:'div',
data:{
user:{
username:'Gary'
}
},
methods:{
changeUsername(){
this.user.username = 'Gary-2!!!';
console.log(this.user.username);
},
addId(){
this.user.id=1;
console.log(this.user.id);
}
}
}); </script> </html>
Gary_InstanceMethod.html
解决方法：使用vm.$set就可以给未设置属性值的user设置属性值id，全局方法Vue.set(this.user,'id',1);
changeUsername(){
this.user.username = 'Gary-2!!!';
console.log(this.user.username);
},
addId(){
//his.user.id=1;
this.$set(this.user,'id',1);
console.log(this.user.id);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</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">change</button><br />
<button @click="addId">addId</button><br />
</div>
</body> <script>
let vm = new Vue({
el:'div',
data:{
user:{
username:'Gary'
}
},
methods:{
changeUsername(){
this.user.username = 'Gary-2!!!';
console.log(this.user.username);
},
addId(){
//his.user.id=1;
this.$set(this.user,'id',1);
//全局方法
//Vue.set(this.user,'id',1);
console.log(this.user.id);
}
}
}); </script> </html>
Gary_InstanceMethod.html
二、vm.$delete 传送门
vm.$delete：删除属性值
当然也可以通过Vue.delete(this.user, 'id')去删除ID对象，全局方法Vue.delete(this.user, 'id');
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</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">change</button><br />
<button @click="addId">addId</button><br />
<button @click="delId">delId</button>
</div>
</body> <script>
let vm = new Vue({
el:'div',
data:{
user:{
username:'Gary'
}
},
methods:{
changeUsername(){
this.user.username = 'Gary-2!!!';
console.log(this.user.username);
},
addId(){
//his.user.id=1;
this.$set(this.user,'id',1);
//全局方法
//Vue.set(this.user,'id',1);
console.log(this.user.id);
},
delId(){
if(this.user.id){
//this.$delete(this.user, 'id');
Vue.delete(this.user, 'id');
}
}
}
}); </script> </html>
Gary_InstanceMethod.html
三、vm.$watch 传送门
vm.$watch：观测数据变化
观测msg值发生的变化，使用时可以传两个参数，一个是oldValue，另一个是newValue
<input type="text" v-model="msg" /><br />
msg : <span>{{msg}}</span><br />
vm.$watch('msg',function(newValue,oldValue){
console.log("修改了msg old="+oldValue +" new="+newValue);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</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 />
</div>
</body> <script>
let vm = new Vue({
el:'div',
data:{
msg:'Gary'
},
}); vm.$watch('msg',function(newValue,oldValue){
console.log("修改了msg old="+oldValue +" new="+newValue);
}); </script> </html>
Gary_InstanceMethod_watch.html
vm.$watch也有一个回调函数，回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。
观测普通属性值可直接使用
watch : {
num : function(newValue, oldValue){
console.log("修改了num old= " + oldValue + " new= " + newValue);
}
观为了发现对象内部值的变化，必须在选项参数中指定 deep: true，否则会观测不到
watch : {
num : function(newValue, oldValue){
console.log("修改了num old= " + oldValue + " new= " + newValue);
},
// user : function(newValue, oldValue){
// console.log("修改了user old= " + oldValue + " new= " + newValue);
// }
user : {
handler : function(newValue, oldValue){
console.log("修改了num old= " + oldValue.username + " new= " + newValue.username);
console.log(oldValue == newValue);
},
deep : true
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</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>{{num}}</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 : 'Gary',
num : 1,
user : {
id : '01',
username : 'Gary-user'
}
},
watch : {
num : function(newValue, oldValue){
console.log("修改了num old= " + oldValue + " new= " + newValue);
},
// user : function(newValue, oldValue){
// console.log("修改了user old= " + oldValue + " new= " + newValue);
// }
user : {
handler : function(newValue, oldValue){
console.log("修改了num 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>
Gary_InstanceMethod_watch.html
四、实例方法-生命周期 传送门
Vue对象中把el：绑定的<div>标签注解掉，通过使用vm.$mount("");方法去手动挂载<div>对象
<div id="GaryId">
<input type="text" v-model="msg" /><br />
num : <span>{{msg}}</span><br />
</div>
<script>
let vm = new Vue({
//el : 'div',
data:{
msg:'Gary'
}
}); // 手动挂载
vm.$mount("#GaryId"); </script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div id="GaryId">
<input type="text" v-model="msg" /><br />
num : <span>{{msg}}</span><br />
</div>
</body> <script>
let vm = new Vue({
//el : 'div',
data:{
msg:'Gary'
}
}); // 手动挂载
vm.$mount("#GaryId"); </script> </html>
Gary_InstanceMethod_lifeCycle.html
通过button去调用_destory()方法，使用vm.$destroy()去销毁数据的绑定
<div id="GaryId">
<input type="text" v-model="msg" /><br />
num : <span>{{msg}}</span><br />
<button onclick="_destory()">销毁</button>
</div>
function _destory(){
vm.$destroy();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div id="GaryId">
<input type="text" v-model="msg" /><br />
num : <span>{{msg}}</span><br />
<button onclick="_destory()">销毁</button>
</div>
</body> <script>
// let vm = new Vue({
// //el : 'div',
// data:{
// msg:'Gary'
// }
// });
//
// 手动挂载
// vm.$mount("#GaryId"); let vm = new Vue({
data:{
msg:'Gary'
}
}).$mount('#GaryId'); function _destory(){
vm.$destroy();
} </script> </html>
Gary_InstanceMethod_lifeCycle.html
Vue_(组件)实例方法的更多相关文章
- vue_组件间通信：自定义事件、消息发布与订阅、槽
自定义事件 只能用于 子组件 向 父组件 发送数据 可以取代函数类型的 props 在父组件: 给子组件@add-todo-event="addTodo" 在子组件: 相关方法中, ...
- Vue_(组件通讯)使用solt分发内容
Vue特殊特性slot 传送门 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title</h1> </com-a> 如果想 ...
- Vue_(组件通讯)非父子关系组件通信
Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...
- Vue_(组件通讯)单项数据流
Vue单项数据流 传送门 单向数据流:父组件值的更新,会影响到子组件,反之则不行 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据 如果对数 ...
- Vue_(组件通讯)子组件向父组件传值
Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: ...
- Vue_(组件通讯)父组件向子组件传值
Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:c ...
- Vue_(组件通讯)父子组件简单关系
Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的 ...
- Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...
- Vue_(组件通讯)动态组件
动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件<component></component>,根据 ...
随机推荐
- 27-Perl 进程管理
1.Perl 进程管理Perl 中你可以以不同的方法来创建进程.本教程将讨论一些进程的管理方法. 你可以使用特殊变量 $$ 或 $PROCESS_ID 来获取进程 ID. %ENV 哈希存放了父进程, ...
- Spring boot data jpa 示例
一.maven pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns ...
- Java基础第二天--多态、接口
多态 多态的概述 同一个对象,在不同时刻表现出来的不同形态 多态的前提和体现 有继承/实现关系 有方法重写关系 有父类引用指向子类对象 public class Animal { public voi ...
- SVN客户端（TortoiseSVN）保存密码自动登录后，如何切换使用其它帐户登录方法
清除SVN客户端(TortoiseSVN)保存的认证信息(用户名和密码) 1.选择TortoiseSVN---->Settings. 2.点"Clear” ,清空Authenticat ...
- mqtt协议实现 java服务端推送功能（三）项目中给多个用户推送功能
接着上一篇说,上一篇的TOPIC是写死的,然而在实际项目中要给不同用户 也就是不同的topic进行推送 所以要写活 package com.fh.controller.information.push ...
- Redis之淘汰策略
Redis 内存数据集大小上升到一定大小的时候,就会进行数据淘汰策略. Redis 提供了 6 种数据淘汰策略: 1. volatile-lru:从已设置过期时间的数据集中挑选最近最少使用的数据淘汰. ...
- Redis-Hash常用命令
Redis-Hash常用命令 hset key field value 设置一个散列,但是在散列中一次只能设置一个属性,如果要批量设置多个属性,则需要使用 hmset命令 hget key field ...
- 当在terminal中输入一行命令的时候，查找的顺序如何看
大多数时候,尤其是安装了anaconda的时候,我们常常会知道,实际上因为conda的环境变量写到了该用户下的.bashrc下面,所以在terminial敲如python的时候,会显示conda的py ...
- 错误处理：java.lang.NoClassDefFoundError: javax/jms/JMSContext
原因是少包,需要在pom文件增加依赖 <dependency> <groupId>javax.jms</groupId> <artifactId>jav ...
- Python—selenium模块(浏览器自动化工具)
selenium可以用来完成浏览器自动化相关的操作,写一些代码制定一些基于浏览器自动化的相关操作(行为动作),当代码执行后,浏览器就会自动触发相关的事件 安装方法: pip install selen ...