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 ...
随机推荐
- dev gridview表格按钮
固定列的位置 添加按钮控件位置,使用buttonEdit 添加按钮 按钮属性设置 按钮设置后的效果 //注册按钮事件 this.ribtndata.ButtonClick += new DevExpr ...
- 服务端相关知识学习（四）之Zookeeper启动过程
在上一篇,我们了解了zookeeper最基本的配置,也从中了解一些配置的作用,那么这篇文章中,我们将介绍Zookeeper的启动过程,我们在了解启动过程的时候还要回过头看看上一篇中各个配置参数在启动时 ...
- 初识 vue------简单介绍
/** vue 作者:尤雨溪 类型:MVVM 准确的来说是MV框架 为什么要学习vue 1.传统的项目是通过操作dom元素来修 ...
- Java--java.util.stream.Collectors文档实例
// java.util.stream.Collectors 类的主要作用就是辅助进行各类有用的 reduction 操作,例如转变输出为 Collection,把 Stream 元素进行归组. pu ...
- 阿里云环境中配置tomcat7可能出现的问题及解决方法
前提是安装好了tomcat,但是输入ip+端口无法访问,那么情况有一下几种 (1)可能防火墙没有关闭 systemctl stop firewalld.service #停止firewall syst ...
- Scrapy框架之Spider模板 转
一.安装scrapy 首先安装依赖库Twisted pip install (依赖库的路径) 在这个网址http://www.lfd.uci.edu/~gohlke/pythonlibs#twiste ...
- 怎么处理U盘无法正常弹出的情况？
我们都知道U盘和移动硬盘在使用完毕后需要点击“安全删除硬件并弹出”后才能拔出,这样可以避免U盘还在工作时被拔出而造成的故障. 但有时我们点击“安全删除硬件并弹出”时,系统会提示U盘正在工作,没有办法停 ...
- Use pkgsrc on ARM
What is this page? This page describes how to use pkgsrc on ARM architecture with EABI support. I bo ...
- Networker软件安装
- CUDA C编程——NO.1
CUDA C编程 啥玩意是CUDA? CUDA® is a parallel computing platform and programming model invented by NVIDIA. ...