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. thymeleaf 模板使用 之 解决因HTML标签未闭合引起的错误

    一.修改thymeleaf属性配置 spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html spring ...

  2. Leaflet个人封装笔记

    <!DOCTYPE html> <html> <head> <link href="style/leaflet.css" type=&qu ...

  3. 【原创】Linux基础之logrotate

    logrotate logrotate ‐ rotates, compresses, and mails system logs logrotate is designed to ease admin ...

  4. 【原创】大叔经验分享（63）kudu vs parquet

    一 对比 存储空间对比: 查询性能对比: 二 设计方案 将数据拆分为:历史数据(hdfs+parquet+snappy)+ 近期数据(kudu),可以兼具各种优点: 1)整体低于10%的磁盘占用: 2 ...

  5. SpringBoot整合MyBatis的分页插件PageHelper

    1.导入依赖(maven) <dependency> <groupId>com.github.pagehelper</groupId> <artifactId ...

  6. webpack抽取CSS文件与CSSTreeShaking

    webpack抽取CSS文件 CSSTreeShaking 一.webpack抽取CSS文件 抽取CSS文件的插件:mini-css-extract-plugin npm install --save ...

  7. Lua游戏逆向及破解方法介绍

    Lua游戏逆向及破解方法介绍   背景介绍 随着手游的发展,越来越多的Cocos-lua端游开发者转移到手游平台.Lua脚本编写逻辑的手游也是越来越多,如梦幻西游.刀塔传奇.开心消消乐.游龙英雄.奇迹 ...

  8. XDCTF2014 Writeup

    Web50 猜谜语类题目?FLAG在图片中有一些字符的 ASCii值,拼起来就是FLAG. Web100 隐写术.使用工具 StegSolve,把任一颜色的bit0拼起来图片的最开始部分即为  fla ...

  9. ANSIBLE自动化管理工具

    ansible 基础 自动化运维工具 官网:https://www.ansible.com/ 官方文档:https://docs.ansible.com/ ansible 特性 1. 模块化:调用特定 ...

  10. mybatis框架中 动态代理的问题

    在配置文件时候 id唯一性 所以不允许重载 <select id=" querydemo"   resultType="pojo"> sql 语句  ...