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. O032、Nova reboot 和 lock 操作

    参考https://www.cnblogs.com/CloudMan6/p/5479408.html   前面通过日志详细分析了 nova 的 launch.shutoff .start 操作.   ...

  2. java实现spark常用算子之Take

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  3. JSTreeShaking的webpack-deep-scope-plugin插件的应用

    webpack自身实现词法分析的JSTreeShaking webpack-depp-scope-plugin插件实现作用域分析的JSTreeShaking 一.webpack词法分析的JSTreeS ...

  4. var正在声明变量

    var正在声明变量也可以直接分配一个变量,而不在JS中声明它,但是这种变量在默认情况下是全局的.<!-/->是HTML中的注释,在JS中不起作用.它只是用来忽略无法识别脚本的浏览器的脚本内 ...

  5. 转载： Linux查看系统开机时间

    转自: https://www.cnblogs.com/kerrycode/p/3759395.html 查看Linux系统运行了多久时间,此时需要知道上次开机启动时间: 有时候由于断电或供电故障突然 ...

  6. 在线程中使用ClientQuery注意的问题

    今天遇到奇怪的问题,在线程中建立一个TkbmMWClientQuery的临时对象q,及一个TkbmMWBinaryStreamFormat的临时对象bsf,第一次执行正常,再次执行时一直等待,也不产生 ...

  7. Delphi MSCom安装

  8. Python map学习笔记

    map是一个高阶用法,字面意义是映射,它的作用就是把一个数据结构映射成另外一种数据结构. map用法比较绕,最好是对基础数据结构很熟悉了再使用,比如列表,字典,序列化这些. map的基本语法如下: m ...

  9. 解决canvas图片getImageData,toDataURL跨域问题

    图片服务器需要配置Access-Control-Allow-Origin 当需要需要对canvas图片进行getImageData()或toDataURL()操作的时候,跨域问题就出来了.图片服务器需 ...

  10. kotlin的loop和Range、list和map

    继续学习Kolin的基础语法,比较简单,直接练习代码.loop和range: 这里用一个场景来说明:计算从1到100之间数的总和,那在kotlin中是如何搞的呢? 上面这么简单的一句代码确实是能表达么 ...