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等插件实现 ...
随机推荐
- 使用javacv，解码socket接收的H264码流（byte[]）,转为yuv处理，最后再合成转为H264
其实是一个用java实现录像的功能,还没有实现,但解码和转码已经可以. 1.maven环境,pom.xml配置 1 <properties> 2 <javacpp.version&g ...
- Android 7.0 以上保留数据去除锁屏密码的方法
在很多情况下,由于我们的疏忽,导致忘记了锁屏密码.也没有开启 USB 调试,内置存储中还有要保留的数据.我们需要在不清除数据的情况下删除锁屏密码.接下来我们就介绍该如何做. 注意事项 首先要注意,这个 ...
- js文字滚动效果
function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...
- Java 取得文件名的后缀
作者QQ:1095737364 QQ群:123300273 欢迎加入! 文件上传的时候可能需要修改文件名,因此需要取得文件的后缀: String filename="123.t ...
- SpringMVC 文件上传（Multipart）
作者QQ:1095737364 QQ群:123300273 欢迎加入! 平时用的上传一般是输入流和输出流上传,今天使用的是transferTo方法: Multipart请求是在控制器实例 ...
- Intellij IDEA创建javaweb步骤详解
一.创建并设置javaweb工程 1.创建javaweb工程File --> New --> Project... 设置工程名字: 创建完成后工程结构如下: 2. Web工程设置2.1 在 ...
- [Android] 锁定屏幕
最近玩的比较欢脱,欠了好多东西没写.今天先简单地补一篇简单的内容.就是最近涉及到一个锁定Android设备屏幕的设计,大概就是通过一个按钮或者服务消息,来控制设备界面完全锁定,不能点击任何东西.感觉上 ...
- MAC安装了mumu安卓模拟器，但无法检测到该模拟器
1.adb devices 看不到模拟器 2.adb connect 127.0.0.1:5555 3.adb kill-server 没有报错,即成功 4. adb start-server ...
- Python+Selenium笔记（十八）：持续集成jenkins
(一)安装xmlrunner 使用Jenkins执行测试时,测试代码中会用到这个模块. pip install xmlrunner (二)安装jenkins (1) 下载jekins https: ...
- .gitignore文件规则不起效的解决办法
在一个项目里面,多少会有一些文件是不需要上传到git上面的,比如node的依赖模块node_modules,这个文件夹超过10000个文件,大小也超过80M.所以,一个.gitignore文件省不了, ...