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 ...
随机推荐
- pat L2--005 简单复习一下并差集
布置宴席最微妙的事情,就是给前来参宴的各位宾客安排座位.无论如何,总不能把两个死对头排到同一张宴会桌旁!这个艰巨任务现在就交给你,对任何一对客人,请编写程序告诉主人他们是否能被安排同席. 输入格式: ...
- Power BI 报表服务器中的行级别安全性 (RLS)
在 Power BI Desktop 中定义角色和规则 你可以在 Power BI Desktop 中定义角色和规则. 发布到 Power BI 时,它还会发布角色定义. 若要定义安全角色,请执行以下 ...
- vs2013nuget版本更新
记录记录. NuGet 程序包还原失败: “Newtonsoft.Json 12.0.1”程序包需要 NuGet 客户端版本“2.12”或更高版本,但当前的 NuGet 版本为“2.7.40911.2 ...
- js之运算符（关系运算符）
关系运算符用于测试两个值之间的关系,根据关系是否存在而返回true或者是false.关系表达式总是返回一个布尔值. 具有如下8个关系运算符:大于(>),小于(<),小于等于(<=), ...
- django概念理解
STATIC_URL 和 STATICFILES_DIRS 区别 static_url指定浏览器上访问静态文件的url前缀,也就是'/static/'前缀的都会认为是静态文件,django不解析,直 ...
- 关于IDEA导入依赖问题,阿里云下载不了
关于阿里云,有部分数据是不能够下载的,就拿ojdbc8-12.2.0.1.0.jar来说 pom.xml <!--Oracle驱动 因为maven仓库下载不了,采用本地导入--> < ...
- （转）Java垃圾回收基本过程
本编博客内容来自oschina,是一篇译文,文中图片比较直观的介绍了JVM进行垃圾回收的过程.原文内容来自oracle官网:Java Garbage Collection Basics oschina ...
- php生成器yield
上次说了php的生成器Iterator,这次说一下yield 迭代生成器 (迭代)生成器也是一个函数,不同的是这个函数的返回值是依次返回, 而不是只返回一个单独的值.或者,换句话说,生成器使你能更方便 ...
- Twitter的支撑架构：扩展网络与存储并提供服务——架构原则：一次性将事情做对，NFL原则 LSM+B+存储替代cassandra
Twitter工程团队近期提供了Twitter核心技术的演进和扩展的详细资料,这些核心技术支撑了Twitter自营数据中心的系统架构,用于提供社会媒体服务.他们分享的关键经验包括:超越原始规格和需求进 ...
- impdp导入报错39002
原文:https://www.cnblogs.com/huacw/p/3888807.html 1 create directory data_pump_dir as '\exphd\datapump ...