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. Java static和final

    java提高篇(七)-----关键字static static 在Java中并不存在全局变量的概念,但是我们可以通过static来实现一个“伪全局”的概念,在Java中static表示“全局”或者“静 ...

  2. 桥接模式(Bridge)

    1.概念 桥接模式将抽象部分与它的实现部分分离,使它们都可以独立地变化,属于结构性模式的一种. 2.模式结构 Abstraction(抽象类):定义抽象接口,拥有一个Implementor类型的对象引 ...

  3. JavaOne 2016主旨演讲畅谈Java近期及远期规划

    在 JavaOne 2016 主题演讲开场,来自 Oracle 的 Java 产品管理负责人 Sharat Chander 指出 Java 盛行于个人和工作的日常生活各个领域,无论是大数据.物联网甚至 ...

  4. 5月8日——iOS中的3D Touch效果

    需要在manifest.json文件中进行配置 需要执行的js代码为: 最终操作效果为 本篇文章主要采用了HTML5+  中的 launcher属性 具体可参照 http://www.html5plu ...

  5. PHP中NOTICE错误常见解决方法

    对于初学者,肯定会遇到不同的错误提示,比如:警告,致命,等等,其中NOTICE错误等级最低,页面中,好多类似 Notice: Use of undefined constant title - ass ...

  6. Geolocation API

    Geolocation API--地理定位 navigator.geolocation getCurrentPosition() 触发请求用户共享地理定位信息的对话框 接收3个参数: 1.成功回调函数 ...

  7. js-ES6学习笔记-Generator函数

    1.Generator 函数是 ES6 提供的一种异步编程解决方案.形式上,Generator 函数是一个普通函数,但是有两个特征.一是,function关键字与函数名之间有一个星号:二是,函数体内部 ...

  8. Textarea输入字数限制（兼容iOS&安卓）

    最近在做一个微信公众号的页面,其中有对textarea做输入字数限制,而且需要兼容iOS和安卓手机,下面直接贴代码: <!DOCTYPE html> <html lang=" ...

  9. [可能不知道]什么是PeopleSoft的JOLT以及相关进程

    PeopleSoft applecation server依赖于Jolt,Jolt是与Tuxedo配套的产品,可以处理所有web请求.换句话说,Jolt是application server与web ...

  10. GDAL打开HDF格式时遇到的中文路径问题（未解决）

    众所周知,中文环境下(VS2010 C++工程编码为多字节编码),在使用1.8.0版本以后的GDAL打开中文路径下的影像文件(如GeoTiff文件)时, 需对中文文件路径做特殊处理,有2种方法:(我使 ...