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等插件实现 ...
随机推荐
- 漫画 | Java多线程与并发（二）
1.什么是线程池? 为什么要使用它? 2.Java中invokeAndWait 和 invokeLater有什么区别? 3.多线程中的忙循环是什么? 4.Java内存模型是什么? 线程内的代码能够按先 ...
- 微信小程序 发现之旅（三）—— 组件之间的参数传递
一.URL 传参 当使用 navigateTo() 方法跳转页面的时候,可以在 url 后面接 query 参数 然后在 Page 页面的生命周期函数 onLoad 中可以接收到这些参数 这种方式只能 ...
- 随手记：tomcat 与JDK 安装与配置
写了3年的JAVA 每次遇到配置JDK 与按照tomcat的时候都要去网上找一下,太丢人了,所以还是记一下比较好,虽然都知道要配置哪些,但每次都还是有些不确定的感觉~ JDK : 1.安装官网 htt ...
- 小程序通过用户授权获取手机号之getPhoneNumber
小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如get ...
- Oracle常用方法备份
1.UNION ALL 和UNION.INTERSECT.MINUS 连接所有的查询结果.去掉重复的结果.操作返回查询结果中公共的行.在进行两个表格或者两个查询结果的时候,返回在第一个表格/查询结果中 ...
- Loadrunner 脚本开发-利用web_custom_request函数进行接口测试
脚本开发-利用web_custom_request函数进行接口测试 by:授客 QQ:1033553122 一.POST + JSON格式参数 例: web_custom_request(" ...
- 如何用WebSocket实现一个简单的聊天室以及单聊功能
百度百科中这样定义WebSocket:WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端.简单的说,We ...
- 关于通过ServletContext获取数据出现的http500的错误的解决方案
1.问题的简述 我创建了一个两个servlet以及一个jsp页面,假定给两个servlet分别命名(初始化数据servlet)和(数据处理servlet),jsp页面用于传递数据至数据处理servle ...
- [WPF 容易忽视的细节] —— Exception in WPF's Converter
前言: 在WPF中,Converter是我们经常要用到的一个工具,因为XAML上绑定的数据不一定是我们需要的数据. 问题: 在Converter中抛出一个异常导致程序崩溃,而且是在对未捕获异常进行集中 ...
- cuda和gcc版本不兼容
gcc8.1和cuda9.0版本不兼容,比较坑. 下面是各版本cuda支持的gcc: 从CUDA 4.1版本开始,现在支持gcc 4.5.gcc 4.6和4.7不受支持. 从CUDA 5.0版本开始, ...