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等插件实现 ...
随机推荐
- (六)彻底理解synchronized
1.sychronized简介 在学习知识之前,我们先来看一个现象 public class SynchronizedDemo implements Runnable { private static ...
- 【Linux】rpm常用命令及rpm参数介绍
RPM是RedhatPackageManager的缩写,是由RedHat公司开发的软件包安装和管理程序,同Windows平台上的Uninstaller比较类似.使用RPM,用户可以自行安装和管理Lin ...
- java项目运用server运行(eclipse、myeclipse通用)
右键点击”new“选择“Other”,打开选项 勾选”Show All Wizards“ 然后在搜索处输入server,选择server,点击next 刚进来时此处都是空的,点击Configure r ...
- 继续畅通工程（hdu1879）并查集
继续畅通工程 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- Maven 那些破事
deploy 只上传了pom 晚上输命令,打算打包上传到本地库里,然后去服务器上部署新版本 mvn clean package deploy 结果看着mvn的build过程只是上传了pom,去库服务器 ...
- java.lang.IllegalArgumentException: findUserById is ambiguous in Mapped Statements collection
这是由于mybatis的mapper xml文件中的id 名字和mybatis内置的方法可能有冲突导致的, 更改xml 的id 名字就可以了!
- Mac 上用 Homebrew 安装 .NET Core 1.0 RC4 004771
年级大了,其实并不是很喜欢升级到最新版,特别是不怎么爱用还没有 Release 的版本了.虽然 .NET Core 已经是 RC4,但毕竟还没有 Release.可过年回来,用 yeoman 创建了一 ...
- openCV 视频分解及合成
1. 视频分解 import cv2 # ************************** # 分解视频 cap=cv2.VideoCapture('1.mp4')#获取一个视频cap isOpe ...
- 【three.js练习程序】随机生成100个方块
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- idea总是编译启动报错
使用多环境配置时候,总是会出现莫名其妙的启动报错.主要是没有多环境配置的参数,挺奇怪的,因为这个问题时现时不现.又没有什么具体规律,一直找不到原因.今天一个偶然的机会,发现会不会是这个原因?