Vue_(组件)实例属性
Vue实例属性与方法中文文档 传送门
Vue实例属性：vue实例直接调用的属性
Learn
一、vm.$data：获取属性
二、vm.$el：获取实例挂载的元素
三、vm.$options：获取自定义选项/属性
四、vm.$refs：获取通过ref属性注册的DOM对象
项目结构
【每个demo下方都存有html源码】
一、使用vm.$data：获取属性
<script>
let vm = new Vue({
el:'div',
data:{
msg:'Hello Gary!!!'
}
}); /*调用data*/
console.log(vm.$data);
console.log(vm.$data.msg); </script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div>
<h1>{{msg}}</h1>
</div>
</body> <script>
let vm = new Vue({
el:'div',
data:{
msg:'Hello Gary!!!'
}
}); /*调用$data*/
console.log(vm.$data);
console.log(vm.$data.msg); </script> </html>
Gary_InstanceProperties.html
二、vm.$el：获取实例挂载的元素
<script>
let vm = new Vue({
el:'div',
data:{
msg:'Hello Gary!!!'
}
}); /*调用$el*/
console.log(vm.$el);
vm.$el.style.color ='red'; </script>
一个用于在控制台输出信息，一个用于修改el元素的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div>
<h1>{{msg}}</h1>
</div>
</body> <script>
let vm = new Vue({
el:'div',
data:{
msg:'Hello Gary!!!'
}
}); /*调用$el*/
console.log(vm.$el);
vm.$el.style.color ='red'; /*调用$data*/
// console.log(vm.$data);
// console.log(vm.$data.msg); </script> </html>
Gary_InstanceProperties.html
三、vm.$options：获取自定义选项/属性
增加自定义选项并通过vm.$options去进行调用
<script>
let vm = new Vue({
el:'div',
data:{
msg:'Hello Gary!!!'
},
username : 'joey',
password : '123',
login(){
console.log("login")
}
}); /*调用$options*/
console.log(vm.$options.username);
console.log(vm.$options.password);
vm.$options.login(); </script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div>
<h1>{{msg}}</h1>
</div>
</body> <script>
let vm = new Vue({
el:'div',
data:{
msg:'Hello Gary!!!'
},
username : 'joey',
password : '123',
login(){
console.log("login")
}
}); /*调用$options*/
console.log(vm.$options.username);
console.log(vm.$options.password);
vm.$options.login(); /*调用$el*/
// console.log(vm.$el);
// vm.$el.style.color ='red'; /*调用$data*/
// console.log(vm.$data);
// console.log(vm.$data.msg); </script> </html>
Gary_InstanceProperties.html
四、vm.$refs：获取通过ref属性注册的DOM对象
添加两个Dom去方便后续vm.$refs去进行操作
<div>
<h1>{{msg}}</h1>
<h2 ref='hello'>Hello</h2>
<h2 ref='vue'>Vue</h2>
</div>
调用$refs去获得这两个DOM对象并对Hello的style样式进行改变
/*调用$refs*/
console.log(vm.$refs);
vm.$refs.hello.style.backgroundColor = 'red';
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
<script type="text/javascript" src="../js/vue.js"></script> </head>
<body>
<div>
<h1>{{msg}}</h1>
<h2 ref='hello'>Hello</h2>
<h2 ref='vue'>Vue</h2>
</div>
</body> <script>
let vm = new Vue({
el:'div',
data:{
msg:'Hello Gary!!!'
},
username : 'joey',
password : '123',
login(){
console.log("login")
}
}); /*调用$refs*/
console.log(vm.$refs);
vm.$refs.hello.style.backgroundColor = 'red'; /*调用$options*/
// console.log(vm.$options.username);
// console.log(vm.$options.password);
// vm.$options.login(); /*调用$el*/
// console.log(vm.$el);
// vm.$el.style.color ='red'; /*调用$data*/
// console.log(vm.$data);
// console.log(vm.$data.msg); </script> </html>
Gary_InstanceProperties.html
Vue_(组件)实例属性的更多相关文章
- Vue 组件实例属性的使用
前言 因为最近面试了二.三十个人,发现大部分都还是只是停留在 Vue 文档的教程.有部分连教程这部分的文档也没看全.所以稍微写一点,让新上手的 Vuer 多了解 Vue 文档的其他更需要关注的点. 因 ...
- Vue_(组件)实例生命周期钩子
Vue生命周期中文文档 传送门 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期钩子:又称为Vue生命周期钩子方法/函数,是Vue为开发者提供的方法,我们可以通过这 ...
- Vue_(组件)计算属性
Vue计算属性中文文档 传送门 Vue计算属性:更强大的属性声明方式,可以对定义的属性进行逻辑处理与数据监视; 注意:模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑 ...
- Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码）
本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...
- Vue组件实例间的直接访问
前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...
- 在被vue组件引用的 js 文件里获取组件实例this
思路: 通过调用函数 把 组件实例this 传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...
- vue构造函数（根实例化时和组件实例对象选项）参数：选项详解
实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$ ...
- 04: vue生命周期和实例属性和方法
1.4 组件的生命周期 1.说明 1. Vue将组件看成是一个有生命的个体,跟人一样,定义了各个阶段, 2. 组件的生命周期:组件的创建过程 3. 组件生命周期钩子函数:当组件处在某个阶段,要执行某个 ...
- yii CComponent组件 实例说明1
yii CComponent组件 实例说明 yii中的module,controller都是CComponent的子类,可以说yii的架构基石就是依托在CCompnent基础上的,这里研究下CComp ...
随机推荐
- 区间dp 整数划分问题
整数划分(四) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 暑假来了,hrdv 又要留学校在参加ACM集训了,集训的生活非常Happy(ps:你懂得),可是他最近 ...
- [C#.net]xlApp.Workbooks.Open打开无法远程访问
上月还能使用的xlApp.Workbooks.Open,这个月报无法远程访问,搞了半天,才找到原因是Foxit PDF 的Execl插件搞的鬼,记录下 Excel.Workbooks wbChecks ...
- C#颜色对话框（WPF可用）
System.Windows.Forms.ColorDialog colorDialog = new System.Windows.Forms.ColorDialog(); //允许使用该对话框的自定 ...
- O059、Backup Volume 操作
参考https://www.cnblogs.com/CloudMan6/p/5662236.html BackUp是将Volume备份到别的地方(备份设备),将来可以通过restore操作恢复. ...
- Eclipse 设置新建文件默认编码为 utf-8 的方法
选择编辑器顶部 Windows->Preferences->搜索jsp->选择utf-8编码->保存.
- Java对象的序列化和反序列化介绍
一.什么序列化和反序列化以及作用: java序列化是指把java对象转换为字节序列的过程,而java反序列化是指把字节序列恢复为java对象的过程 1.序列化: 1)对象序列化的最主要的用处就是在传递 ...
- vue入门：（计算属性和侦听器）
methods watch computed 一.methods-方法 在数据渲染是需要基于多个数据时第一种方法,可以采用methods属性中的方法计算返回值来实现,先来看示例: <div id ...
- 记一次被自己DDOS攻击
服务器报警初步分析进一步分析最终分析总结 TOC 服务器报警 7月24号下午5点半开始,突然服务器报警,检查监控,发现CPU异常100%. 该服务器正常情况下CPU使用率在40%已经算高了,另外负载经 ...
- kbmMW均衡负载与容灾(1)
kbmMW为均衡负载与容灾提供了很好的机制,支持多种实现方式,现在看看最简单的一种,客户端控制的容灾和简单的负载均衡. 现在,我们将kbmMWServer部署到不同的服务器,或者在同一服务器部署多份实 ...
- JAVA语言程序设计课后习题----第四单元解析（仅供参考）
1 本题水题,主要理解题目的意思即可,访问方法和修改方法可以通过快捷方式alt+insert选中你需要的成员变量即可 public class Person { public String name; ...