vue实例的属性和方法
vue实例的属性和方法
1. 属性
vm.$el
#指定要绑定的元素
vm.$data
#Vue 实例的数据对象
vm.$options
#获取自定义属性的值
new Vue({
customOption: 'foo', 自定义属性
created: function () {
console.log(this.$options.customOption) // => 'foo'
}
})
vm.$refs
#获取所有ref属性的标签
<h2 ref="hello">你好</h2>
<p ref="world">世界</p>
console.log(vm.$refs);
//{hello: h2, world: p}
// vm.$refs.hello.style.color='blue'; 给标签添加style
2. 方法
vm.$mount()
#手动挂载
//vm.$mount('#itany');
vm.$destroy()
#销毁实例
vm.$nextTick(callback)
#将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
data:{
user:{
id:1001,
name:'tom'
}
},
vm.$set(object,key,value)
#添加属性值
Vue.set(this.user,'age',1)
vm.$delete(object,key)
#删除属性值
Vue.delete(this.user,'age')
vm.$watch(data,callback[,options])
#更新属性值
vm.$watch(data,callback[,options])
#监测数值变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监视数据的变化：$watch</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="itany">
<input type="text" v-model="name">
<h3>{{name}}</h3>
<hr>
<input type="text" v-model="age">
<h3>{{age}}</h3>
<hr>
<input type="text" v-model="user.name">
<h3>{{user.name}}</h3>
</div>
<script>
var vm=new Vue({
el:'#itany',
data:{
name:'tom',
age:23,
user:{
id:1001,
name:'alice'
}
},
watch:{ //方式2：使用vue实例提供的watch选项
age:(newValue,oldValue) => {
console.log('age被修改啦，原值：'+oldValue+'，新值：'+newValue);
},
user:{
handler:(newValue,oldValue) => {
console.log('user被修改啦，原值：'+oldValue.name+'，新值：'+newValue.name);
},
deep:true //深度监视，当对象中的属性发生变化时也会监视
}
}
});
//方式1：使用vue实例提供的$watch()方法
vm.$watch('name',function(newValue,oldValue){
console.log('name被修改啦，原值：'+oldValue+'，新值：'+newValue);
});
</script>
</body>
</html>
vue实例的属性和方法的更多相关文章
- Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
- Vue（十二）vue实例的属性和方法
vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...
- 3、Vue实例的属性
1.获取Vue实例的属性 2.data属性 每个Vue实例都会代理其data对象里所有的属性.如果实例创建之后添加或者更改属性,他不会触发视图更新. 这句话说了下面两件事情 1.每个Vue实例都会代理 ...
- vue的计算属性与方法的不同
计算属性 vue的模板里可以使用表达式,但是它的设计初衷是用于简单计算,在模板中放入太多逻辑会让模板过重且难以维护.例如: <div id="example"> {{ ...
- Vue的7属性-8方法-7指令
Vue的7属性: el属性 绑定id,用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符 data属性 用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在dat ...
- vue计算属性和vue实力的属性和方法
生命周期 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 分别给Python类和实例增加属性和方法
#定义一个类Student class Student(object): pass #给类增加一个属性name Student.name = 'xm' print Student.name # xm ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
随机推荐
- MYSQL查询优化：使用索引
索引是提高查询速度的最重要的工具.当然还有其它的一些技术可供使用,但是一 般来说引起最大性能差异的都是索引的正确使用.在MySQL邮件列表中,人们经常询问那些让查询运行得更快的方法.在大多数情况下,我 ...
- Java基础——ArrayList与LinkedList（一）
一.定义 ArrayList和LinkedList是两个集合类,用于储存一系列的对象引用(references). 引用的格式分别为: ArrayList<String> list = n ...
- Java基础——String类（一）
一.String 类代表字符串 Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例实现. 字符串是常量:它们的值在创建之后不能更改.字符串缓冲区支持可变的字符串 ...
- Spring全家桶系列–[SpringBoot入门到跑路]
//本文作者:cuifuan Spring全家桶————[SpringBoot入门到跑路] 对于之前的Spring框架的使用,各种配置文件XML.properties一旦出错之后错误难寻,这也是为什么 ...
- 一些减少代码量、提高开发效率的利器(Java)
Spring Boot mybatis-plus代码生成器和自带CRUD接口 lombok 库: Apache Commons & guava AOP Java8: stream & ...
- python学习之老男孩python全栈第九期_第一次周末考试题（over）第三次添加完毕
day 6python基础数据类型考试题 考试时间:两个半小时 满分100分(80分以上包含80分及格) 一,基础题. 1. 简述变量命名规范(3分) 答:(1) 变量为数字,字母以及下划线的任意组合 ...
- H5自适应屏幕分辨率大小
说明: ①:H5自适应不同分辨率的设备,其实主要就一句 <meta name="viewport" content="width=device-width,init ...
- 【代码笔记】iOS-将地址解析成经纬度
一,工程图. 二,代码. ViewController.h #import <UIKit/UIKit.h> #import <CoreLocation/CoreLocation.h& ...
- 安装nvm管理不同的node版本
在工作或者学习中,偶尔会遇到需要切换不同node版本的需求,幸好有神器nvm可以帮我们解决问题.下面我们就来讲解如何在window系统上安装nvm!
- 从零开始学习html（十）CSS格式化排版——上
一.文字排版--字体 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...