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>,根据 ...
随机推荐
- [js]EasyUI导出数据表格(Export DataGrid)
包括 'datagrid-export.js' 文件 <script type="text/javascript" src="datagrid-export.js& ...
- 【原创】大叔经验分享（69）docker启动java应用的时区问题
在docker中启动tomcat或java类应用,获取时间默认是UTC时间,这是因为容器内的locale没有设置为东8区,最简单的方式是增加JAVA_OPTS 如果是java,直接在java命令后增加 ...
- O050、Create Volume 操作 （Part I）
参考https://www.cnblogs.com/CloudMan6/p/5603312.html 前面已经学习了Cinder的架构和相关组件,从本节开始详细分析 Cinder 的各种操作,首先 ...
- O030、Launch 和 shut off 操作详解
参考https://www.cnblogs.com/CloudMan6/p/5460464.html 本节详细分析 instance launch 和 shut off 操作 ,以及如何在日志中快 ...
- Intellij Idea 建立maven项目 报错 :java: 错误: 不支持发行版本 5
百度一搜这个错误,好多人都遇到了 不计其数的人都遇到.网上大多数都是菜鸟的愚见.经过本人的测试发现,用Idea建立普通的Java项目 然后随便建立一个类运行就不会报错. 但是如果用Idea建立一个普通 ...
- 可以用for循环直接删除ArrayList的特定元素吗？可能会出现什么问题？怎样解决？
for循环直接删除ArrayList中的特定元素是错的,不同的for循环会发生不同的错误,泛型for会抛出 ConcurrentModificationException,普通的for想要删除集合中重 ...
- 【科创人·独家】连续创业者高春辉的这六年：高强度投入打造全球领先的IP数据库
您能看到:高春辉的创业观,IPIP.NET半程复盘及未来规划,连续创业的体验,小众产品趣事 您看不到:往年创业的回顾,技术干货,受制于篇幅忍痛割舍的精彩观点 文末彩蛋:<与雷军的分歧并非否定电商 ...
- 快速写个node命令行工具
1.package.json-bin配置 [创建bat文件,把bat路径添加到PATH中]这些固定的工作可以由npm帮我们完成.package.json中有个bin字段配置: bin: { " ...
- (๑•̀ㅂ•́)و✧QQ用户信息管理系统
这是第二篇文章,就直接切主题 这次剖析的也是自己的作业之一:QQ信息管理系统 一:(此处省略了建Proarams类,其实目的只是想强调把连接语句单独放一个类里更容易调用,命名规范如图) 二:(导入SQ ...
- Python lambda 知识点
作者说学会了lambda后,你会用上瘾的,因为让代码复用和简洁. 初识lamdba不太好理解,尤其是它能当着一个变量传递给函数,不过多学着写几个例子就好了,下面是我的学习笔记. lambda 操作符( ...