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 ...
随机推荐
- 分库分布的几件小事（五）MYSQL读写分离
1.为什么进行读写分离 这个,高并发这个阶段,那肯定是需要做读写分离的,啥意思?因为实际上大部分的互联网公司,一些网站,或者是app,其实都是读多写少.所以针对这个情况,就是写一个主库,但是主库挂多个 ...
- Typora入门：全网最全教程
目录 简介 Markdown介绍 常用快捷键 块元素 换行符 标题级别 引用文字 无序列表 有序列表 任务列表 代码块 数学表达式 插入表格 脚注 分割线 目录(TOC) 跨度元素 链接 网址 图片 ...
- 利用宏方便地书写raw string literals
以前一直没用过标准库的regex,今天写一个hlsl的解析工具的时候用了一下,发现用字符串字面值写regular expression的时候非常不方便,特别是每个“\”字符都要被识别为转义,只能写成“ ...
- mac 下开发golang 配置
1.安装golang 见附件 2.默认安装在 /usr/local/go 目录下 3.配置环境变量: 编辑文件:vim /etc/profile,有的MAC 下没有这个文件,可以新建. 加入环境变量 ...
- Java学习笔记【十、泛型】
简介 Java 泛型(generics)是 JDK 5 中引入的一个新特性, 泛型提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型. 泛型的本质是参数化类型,也就是说所操作的数据 ...
- 8、nginx基础
1Nginx基本简述 Nginx是一个开源且高性能.可靠的Http Web服务.代理服务. 开源: 直接获取源代码 高性能: 支持海量并发 可靠: 服务稳定 我们为什么选择 Nginx服务 Nginx ...
- win10 修改文件夹右击默认打开程序
1.注册表打开 cmd regedit 2.打开如下位置 3.编辑图中2个Anycode.command的值 为打开 保存即可
- 03：Java基础语法（二）
Java基础语法 Java运算符 算术运算符 运算符是一种特殊的符号,用以表示数据的运算.赋值和比较等.1.操作数:参与运算的数据 称为操作数.2.表达式:运算符和操作数的整体 称为表达式.单独的一个 ...
- Manticore search加一个中文分词
Sphinx search 是一款非常棒的开源全文搜索引擎,它使用C++开发,索引和搜索的速度非常快,我使用sphinx的时间也有好多年了.最初使用的是coreseek,一个国人在sphinxsear ...
- 原创：（一）TCP/IP学习笔记之概述
端到端论点和命运共享其实不应该在底层,差错控制应该在应用程序附近来实现.这是因为考虑了连接,而不是传输的准确,因为差错可以根据某些算法(通信中的滤波等)来恢复,不过在大面积网络出现问题的时候有必要进行 ...