Vue（十二）vue实例的属性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){ var vm = new Vue({
el:'#app',
data:{
msg:'Hello Word !',
name:'tom',
age:24,
},
show:function(){
console.log('show');
}
}) /**
* 属性
*/
//vm.属性名 获取data中的属性
console.log(vm.msg); //vm.$el 获取vue实例关联的元素
console.log(vm.$el); //DOM对象
vm.$el.style.color='red'; //vm.$data //获取数据对象data
console.log(vm.$data);
console.log(vm.$data.msg); //vm.$options //获取自定义属性
console.log(vm.$options.name);
console.log(vm.$options.age);
vm.$options.show(); //vm.$refs 获取所有添加ref属性的元素
console.log(vm.$refs);
console.log(vm.$refs.hello); //DOM对象
vm.$refs.hello.style.color='blue';
} </script>
</head> <body> <div id="app">
{{msg}} <h2 ref="hello">你好</h2>
<p ref="world">世界</p> <hr> <h1 ref="title">标题：{{name}}</h1> </div> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){
/**
* 方法
*/
//vm.$mount() 手动挂载vue实例
// vm.$mount('#itany'); var vm = new Vue({
data:{
msg:'欢迎来到武汉',
name:'Tom'
}
}).$mount('#app'); //vm.$destroy() 销毁实例
// vm.$destroy(); // vm.$nextTick(callback) 在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM
//修改数据
vm.name='汤姆'; //DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！
// console.log(vm.$refs.title.textContent);
vm.$nextTick(function(){
//DOM更新完成，更新完成后再执行此代码
console.log(vm.$refs.title.textContent);
});
} </script>
</head> <body> <div id="app">
{{msg}} <h1 ref="title">标题：{{name}}</h1> </div> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
user:{
id:10010,
name:'Tom'
}
},
methods: {
//通过普通方式为对象添加属性时vue无法实时监视到
doUpdate:function(){
//this.user.name = 'Jam';
this.$set(this.user,'name','Jam');
},
doAdd:function(){
//this.user.age = 23;
//this.$set(this.user,'age',18); //通过vue实例的$set方法为对象添加属性，可以实时监视
//Vue.set(this.user,'age',18)
if(this.user.age){
this.user.age++;
}else{
Vue.set(this.user,'age',1)
}
},
doDelete(){
if(this.user.age){
Vue.delete(this.user,'age');
}
}
}
})
} </script>
</head> <body> <div id="app">
<h1>{{user.name}}</h1>
<h1>{{user.age}}</h1> <button v-on:click="doUpdate">修改属性</button>
<button v-on:click="doAdd">添加属性</button>
<button v-on:click="doDelete">删除属性</button>
</div> </body> </html>
vm.$watch(data,callback[,options])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
name:'Tom',
age:22,
user:{
id:10010,
name:'Maria'
}
},
watch:{ //方式2：使用vue实例提供的watch选项
age:function(newVal,oldVal){
console.log('age原值：'+oldVal+'，age新值：'+newVal);
},
user:{
handler:(newVal,oldVal) => {
console.log('user原值：'+oldVal.name+'，user新值：'+newVal.name);
},
deep:true //深度监视，当对象中的属性发生变化时也会监视
}
}
})
//方式1：使用vue实例提供的$watch()方法
vm.$watch('name',function(newVal,oldVal){
console.log('name原值：' + oldVal,'name新值：' + newVal);
},true)
} </script>
</head> <body> <div id="app"> <input type="text" v-model="name">
<h2>{{name}}</h2> <hr> <input type="text" v-model="age">
<h2>{{age}}</h2> <hr> <input type="text" v-model="user.name">
<h2>{{user.name}}</h2> </div> </body> </html>
Vue（十二）vue实例的属性和方法的更多相关文章
- Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
- vue实例的属性和方法
vue实例的属性和方法 1. 属性 vm.$el #指定要绑定的元素 vm.$data #Vue 实例的数据对象 vm.$options #获取自定义属性的值 new Vue({ customOpti ...
- Vue2.0源码思维导图-------------Vue 构造函数、原型、静态属性和方法
已经用vue有一段时间了,最近花一些时间去阅读Vue源码,看源码的同时便于理解,会用工具画下结构图. 今天把最近看到总结的结构图分享出来.希望可以帮助和其他同学一起进步.当然里边可能存在一些疏漏的,或 ...
- “全栈2019”Java多线程第十二章：后台线程setDaemon()方法详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战：个人博客第一版(axios+router)
前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
- python学习笔记（二十二）实例变量、实例方法、类变量、类方法、属性方法、静态方法
实例变量:在类的声明中,属性是用变量来表示的.这种变量就称为实例变量,也就是成员变量. 实例方法:在类中声明的方法,例如:my(self),必须实例化之后才可以使用,否则会报错. 类变量:公共的变量, ...
- vue入门(二)----模板与计算属性
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- vue教程二 vue组件(3)
给属性传递数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
随机推荐
- [Bjoi2018]二进制
题解: 首先发现性质 只有1个1的区间 或者 奇数个1且0的个数少于2这个区间是不合法的 然后这个东西暴力是比较好处理的 刚开始写的比较傻逼,分几种情况 先把0,1缩在一起 1.k1个0+1+k2个0 ...
- .net core2.1 - ef core数据库迁移，初始化种子数据
起因:早上偶然看见一篇文章说是ef core(2.x)使用种子数据,主表子表迁移时候,正常情况下说是无法迁移成功,索性就试试,结果是和ef6的一样,没感觉有什么大的区别.一切OK,见下面内容. 1.首 ...
- [转]xshell使用技巧
https://yq.aliyun.com/articles/44721 xshell是我用过的最好用的ssh客户端工具,没有之一.这个软件完全免费,简单易用,可以满足通过ssh管理linux vps ...
- spark操作Kudu之写 - 使用DataFrame API
在通过DataFrame API编写时,目前只支持一种模式“append”.尚未实现的“覆盖”模式 import org.apache.kudu.spark.kudu._ import org.apa ...
- 获取Form表单数据转化成JSON对象
$.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() ...
- 51Nod1362 搬箱子 排列组合,中国剩余定理
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1362.html 题目传送门 - 51Nod1362 题意 题解 首先考虑枚举斜着走了几次.假设走了 ...
- Vijos1755 靶形数独 Sudoku NOIP2009 提高组 T4 舞蹈链 DLX
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目(传送门) 题意概括 给出一个残缺的数独,求这个数独中所有的解法中的最大价值. 一个数独解法的价值之和为每个位置所填的数值 ...
- 002 如何在一台PC上装两个版本的python
在之前学习爬虫的时候,使用的是python2.7,现在主流已经是3.7了. 在这里,写了一下如何在2.7的基础上安装python3.6 一:检查python版本 1.cmd 二:安装python3 1 ...
- 大数据技术 - 通俗理解MapReduce之WordCount（二）
上一章我们搭建了分布式的 Hadoop 集群.本章我们介绍 Hadoop 框架中的一个核心模块 - MapReduce.MapReduce 是并行计算模块,顾名思义,它包含两个主要的阶段,map 阶段 ...
- Unity容器在asp.net mvc中的IOC应用及AOP应用
<asp.net-mvc框架揭秘>一书中,有个示例,是使用unity容器来注入自定义的控制器工厂.代码示例可以自己去下载源码,在这里我就不说了.IOC容器的本质是解耦的实例化接口类,而如何 ...