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

转载于:https://www.cnblogs.com/1138720556Gary/p/10428634.html

Vue_(组件)实例属性相关推荐

Vue 组件实例属性的使用
前言因为最近面试了二.三十个人,发现大部分都还是只是停留在 Vue 文档的教程.有部分连教程这部分的文档也没看全. 所以稍微写一点,让新上手的 Vuer 多了解 Vue 文档的其他更需要关注的点. ...
Vue 实例之全局API，实例属性，全局配置，组件进阶
文章目录写在前面 Vue 全局 API Vue.directive Vue.use Vue.extend Vue.set Vue.mixin Vue 实例属性 vm.$props vm.$optio ...
reactjs组件实例的三大属性之props使用示例:在函数式组件中使用props
props基本使用 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
调用父级方法_通信:找到任意组件实例的findComponents系列方法，5个终极方案
已经介绍了两种组件间通信的方法:provide / inject 和 dispatch / broadcast.它们有各自的使用场景和局限,比如前者多用于子组件获取父组件的状态,后者常用于父子组件间通 ...
【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框获取组件实例常用的两种方式...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html ...
php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
vue基础入门-应用组件实例
https://v3.cn.vuejs.org/guide/instance.html#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%BA%94%E7%94%A8%E ...
yii CComponent组件实例说明1
yii CComponent组件实例说明 yii中的module,controller都是CComponent的子类,可以说yii的架构基石就是依托在CCompnent基础上的,这里研究下CComp ...
2-2.vue的实例属性：data
2-2.vue的实例属性:data data属性的作用 data属性的作用是存储vue实例或组件里面的数值.在vue的实例中它是以一个对象的方式(多个键值对),在组件中它是一个函数,通过函数返回一个对 ...
Vue实例和组件实例
一.创建一个应用实例每一个vue应用都是通过createApp函数创建一个新的应用实例开始的 const app = Vue.createApp({ /*选项*/ }) 该应用实例是用来在应用中注册 ...

Vue_(组件)实例属性

Vue_(组件)实例属性相关推荐

最新文章

热门文章