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. 【JavaFx教程】第一部分：Scene Builder

    第一部分的主题 开始了解 JavaFX . 创建并运行一个 JavaFX 项目. 使用 Scene Builder 来设计用户界面. 使用 模型 - 视图 - 控制器(MVC)模式 构造基础的应用. ...

  2. Java_万年历（简单）

    1.方法,需要一个年份,一个月份.然后在控制台输出日历 // 输入一个年份和一个月份显示日历 public static void printCalendar(int year, int month) ...

  3. [转]sqlserver转换为Mysql工具使用

    https://files.cnblogs.com/files/miantiaoandrew/mss2sql_v5-3.zip 1.首先下载工具,链接如上 2.解压出来,运行mss2sql.exe 3 ...

  4. [bug]解决chrome浏览器不支持所有媒体音乐不自动播放问题

    声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...

  5. InfoQ观察：Java EE的未来

    原创 2017-03-06 Charles Humble 聊聊架构 作者|Charles Humble编辑|薛命灯 作为InfoQ下一年编辑关注点审核工作的一部分,我们挑选了Java作为深入探讨的主题 ...

  6. Android Studio引用自定义的framework.jar包

    1.在app/libs/目录下添加framework.jar包. 2.打开build->Edit Libraries and Dependencies,把libs/framework.jar放到 ...

  7. 【转】vs2010打开qt的.pro文件时错误解决办法

    注意:qt creator工程中一般都已经存在*.pro文件,里面存放着一些自己配置的包含头文件和lib库文的信息,最好不要再重新使用qmake -project生成,若重新生成,则可能要重新增加配置 ...

  8. web调试-禁止/清空chrome页面缓存

    Chrome会对页面缓存,web页面调试的时候,后端修改页面.js之后,刷新页面经常不生效,非常不方便. 有一些小技巧可以解决该问题. 技巧一: 开发者工具-setting/设置,可以关闭缓存. 开发 ...

  9. CSS布局(三) 布局模型

    布局模型 在网页中,元素有三种布局模型:1.流动模型(Flow) 默认的2.浮动模型 (Float)3.层模型(Layer) 1.流动模型(Flow) 流动(Flow)模型是默认的网页布局模式.也就是 ...

  10. Alpha课堂展示（麻瓜制造者）

    目录 成员简介 演示动态图 预期用户量 演示动态图 目标用户视频 分工协作 项目管理 质量控制 团队角色与具体贡献 用户反馈 成员简介 刘双玉 http://www.cnblogs.com/liu42 ...