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实例的属性和方法的更多相关文章

  1. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  2. Vue（十二）vue实例的属性和方法

    vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...

  3. 3、Vue实例的属性

    1.获取Vue实例的属性 2.data属性 每个Vue实例都会代理其data对象里所有的属性.如果实例创建之后添加或者更改属性,他不会触发视图更新. 这句话说了下面两件事情 1.每个Vue实例都会代理 ...

  4. vue的计算属性与方法的不同

    计算属性 vue的模板里可以使用表达式,但是它的设计初衷是用于简单计算,在模板中放入太多逻辑会让模板过重且难以维护.例如: <div id="example"> {{ ...

  5. Vue的7属性-8方法-7指令

    Vue的7属性: el属性 绑定id,用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符 data属性 用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在dat ...

  6. vue计算属性和vue实力的属性和方法

    生命周期 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. 分别给Python类和实例增加属性和方法

    #定义一个类Student class Student(object): pass #给类增加一个属性name Student.name = 'xm' print Student.name # xm ...

  8. vue中计算属性computed方法内传参

    vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...

  9. Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

随机推荐

  1. Mybatis的枚举处理器

    Mybatis有两个默认枚举处理器 EnumOrdinalTypeHandler EnumTypeHandler 自定义枚举 EnumOrdinalTypeHandler 这个处理器负责将pojo里面 ...

  2. 纯HTML和CSS实现JD轮播图

    博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识.  ,如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体,这里没有使用). <!DOCTYPE ...

  3. python学习之老男孩python全栈第九期_day004知识点总结

    1. 列表list: 列表转换成字符串: s = 'kidd' s1 = '_'.join(s) # 用_连接 字符串转换成列表: split() range(头,尾,步长): [0,1,2,3,4, ...

  4. 【读书笔记】iOS-网络-同步请求，队列式异步请求，异步请求的区别

    一,同步请求的最佳实践. 1,只在后台过程中使用同步请求,除非确定访问的是本地文件资源,否则请不要在主线程上使用. 2,只有在知道返回的数据不会超出应用的内存时才使用同步请求.记住,整个响应体都会位于 ...

  5. hadoop重启后，hdfs目录权限问题

    今天重启了下Hadoop集群,使用Eclipse调试hdfs api的时候报错: [WARNING] java.lang.NullPointerException at org.conan.kafka ...

  6. froala富文本编辑器与golang、beego，脱离ueditor苦海

    一直用百度的ueditor,可是阿里云这种"wo chuo"的云上部署的beego做的服务,总是出现ueditor.all.min.js语法错误,清理浏览器缓存后又会好起来.本地调 ...

  7. windows 10安装jdk8

    1.下载jdk,选择jdk软件版本和对应windows 32/64位版本 jdk下载链接:https://www.oracle.com/technetwork/java/javase/download ...

  8. 第二篇 windows container 微软的原生容器

    先上图,显示windows container的体积: 以下是我使用docker pull 命令下载后,又用命令保存到本地的,相对于linux container体积依然巨大无比:据官方新闻,微软原生 ...

  9. Oracle EBS FA 资产编号跳号

  10. SQL Server复制入门(二)----复制的几种模式 （转载）

    简介本系列文章的上一篇对复制是什么做了一个概述.本篇文章根据发布服务器,分发服务器和订阅服务器的组织方式和复制类型来讲述常用复制的几种模式. 模式的选择选择复制的模式取决于多个方面.首先需要考虑具体的 ...