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_(组件)实例属性的更多相关文章

  1. Vue 组件实例属性的使用

    前言 因为最近面试了二.三十个人,发现大部分都还是只是停留在 Vue 文档的教程.有部分连教程这部分的文档也没看全.所以稍微写一点,让新上手的 Vuer 多了解 Vue 文档的其他更需要关注的点. 因 ...

  2. Vue_(组件)实例生命周期钩子

    Vue生命周期中文文档 传送门 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期钩子:又称为Vue生命周期钩子方法/函数,是Vue为开发者提供的方法,我们可以通过这 ...

  3. Vue_(组件)计算属性

    Vue计算属性中文文档 传送门 Vue计算属性:更强大的属性声明方式,可以对定义的属性进行逻辑处理与数据监视; 注意:模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑 ...

  4. Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码）

    本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...

  5. Vue组件实例间的直接访问

    前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...

  6. 在被vue组件引用的 js 文件里获取组件实例this

    思路: 通过调用函数 把 组件实例this  传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...

  7. vue构造函数（根实例化时和组件实例对象选项）参数：选项详解

    实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$ ...

  8. 04: vue生命周期和实例属性和方法

    1.4 组件的生命周期 1.说明 1. Vue将组件看成是一个有生命的个体,跟人一样,定义了各个阶段, 2. 组件的生命周期:组件的创建过程 3. 组件生命周期钩子函数:当组件处在某个阶段,要执行某个 ...

  9. yii CComponent组件 实例说明1

    yii CComponent组件 实例说明 yii中的module,controller都是CComponent的子类,可以说yii的架构基石就是依托在CCompnent基础上的,这里研究下CComp ...

随机推荐

  1. linux 下安装 jre

    本文链接:https://blog.csdn.net/qq_34368587/article/details/79559102 Linux下安装Java运行环境 现需要项目部署到Linux中,需要配置 ...

  2. JAVA问题String literal is not properly closed by a double-quote

    String literal is not properly closed by a double-quote 这个错误:string字串没有以双引号结束String DBURL = "jd ...

  3. python之数字类型小知识

    数字是表示计数的抽象事物,也是数学运算和推理的基础,所以,生活中数字是生活中无处不在的,那么,在python语言中运用数字有哪些小知识呢,不妨花点时间看一下这篇博文,牢记这些小知识. 整数类型中四种进 ...

  4. 设计模式及UML图

    UML图 1. 依赖关系

  5. global.css

    global.css /* 页面元素初始化和常用样式定义-start */ /*======== 全局 ========*/ body, div, dl, dt, dd, ul, ol, li, h1 ...

  6. 利用宏方便地书写raw string literals

    以前一直没用过标准库的regex,今天写一个hlsl的解析工具的时候用了一下,发现用字符串字面值写regular expression的时候非常不方便,特别是每个“\”字符都要被识别为转义,只能写成“ ...

  7. 如何从git上批量拉取本地当前分支的所有代码

    1 我本地有一个文件_netrc文件里面存储这git的相关信息,包括用户名和密码 你可以根据自己的git相关信息配置自己的信息 2 我当前的分支是dev,我要拉取当前分支下的所有代码,编写shell脚 ...

  8. 第十一章、super()详解

    目录 第十一章.super()详解 一.引出super()来由 第十一章.super()详解 一.引出super()来由 原始用法: 在python类的方法中,要调用父类的某个方法,通常是类.方法() ...

  9. How to mount remote Windows shares

      Contents Required packages Basic method Better Method Even-better method Yet Another Even-better m ...

  10. Mysql(三)-1:存储引擎

    一 什么是存储引擎 mysql中建立的库===>文件夹 库中建立的表===>文件 现实生活中我们用来存储数据的文件有不同的类型,每种文件类型对应各自不同的处理机制:比如处理文本用txt类型 ...