Vue实例属性：

vue实例直接调用的属性；

常用的实例属性：

vm.$data：获取属性；

vm.$el：获取实例挂载的元素；

vm.$options：获取自定义选项/属性；

vm.$refs：获取通过ref属性注册的DOM对象；

vm.$data：获取属性

vue代码；

<script>

            let vm=    new Vue({

                    el:'div',

                    data:{

                        msg:'欢迎来到perfect*博客园！！！'

                    }

            });

              /*    $data*/

             console.log(vm.$data.msg);

             console.log(vm.msg);

        </script>

HTML：

<h1>{{msg}}</h1>

在控制台可以看出都可以通过这两种方式打印出其内容

vm.$el：获取实例挂载的元素：

并且可以通过$el实例属性修改其样式：

vue代码：

/*    $el*/

            console.log(vm.$el);

            vm.$el.style.color='red';

vm.$options：获取自定义选项/属性

vue代码：

let vm=    new Vue({

                    el:'div',

                    data:{

                        msg:'欢迎来到perfect*博客园！！！'

                    },

                    username:'perfect*',

                    password:'',

                    login(){

                        console.log("Login");

                    }

            });

/*    $options*/

          console.log(vm.$options.username);

          console.log(vm.$options.password);

          vm.$options.login();//获取其方法

vm.$refs：获取通过ref属性注册的DOM对象；

也可以通过该实例属性修改其样式：

vue代码：

console.log(vm.$refs);

         vm.$refs.perfect.style.backgroundColor='red';

html:

<h3 ref='perfect'>perfect</h3>

            <h3 ref='perfect1'>perfect1</h3>

以上4个常用的实例属性总的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>05_常用的实例属性</title>

         <script type="text/javascript" src="../js/vue.js" ></script>

     </head>

     <body>

         <div>

             <h1>{{msg}}</h1>

             <h3 ref='perfect'>perfect</h3>

             <h3 ref='perfect1'>perfect1</h3>

     </div>

     </body>

     <script>

             let vm=    new Vue({

                     el:'div',

                     data:{

                         msg:'欢迎来到perfect*博客园！！！'

                     },

                     username:'perfect*',

                     password:'',

                     login(){

                         console.log("Login");

                     }

             });

 //              /*    $data*/

 //             console.log(vm.$data.msg);

 //             console.log(vm.msg);

 //             

 //             /*    $el*/

 //            console.log(vm.$el);

 //            vm.$el.style.color='red';

            /*    $options*/

 //          console.log(vm.$options.username);

 //          console.log(vm.$options.password);

 //          vm.$options.login();//获取其方法

           /*    $refs*/

          console.log(vm.$refs);

          vm.$refs.perfect.style.backgroundColor='red';

         </script>

 </html>

4个常用的实例属性

更多实例属性：https://cn.vuejs.org/v2/guide/instance.html

Vue基础进阶 之 常用的实例属性的更多相关文章

  1. Vue基础知识之常用属性和事件修饰符（二）

    Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...

  2. Vue基础进阶 之 计算属性的使用

    计算属性的基本使用 初始小示例: 代码: window.onload = () =>{ new Vue({ el:'div', data:{ msg:'' } }) } </script& ...

  3. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  4. Vue基础进阶 之 自定义指令

    自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...

  5. Vue基础进阶 之 实例方法--生命周期

    在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...

  6. Vue基础进阶 之 实例方法

    常用的实例方法: 数据: vm.$set:设置属性值: vm.$delete:删除属性值: vm.$watch:观测数据变化: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destr ...

  7. vue 基础-->进阶 教程(1): 基础（数据绑定）

    第一章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  8. vue 基础-->进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  9. Vue(基础三)_监听器与计算属性

    一.前言 本文主要涉及:     1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...

随机推荐

  1. C++将时间格式转换成秒数

    #include <stdio.h> #include <time.h> #include <string.h> #include <stdlib.h> ...

  2. docker应用-6（mysql+mycat 搭建数据库集群）

    上一节,通过使用overlay网络,搭建了跨主机的docker容器集群.下面,在这个跨主机的docker容器集群环境下,搭建mysql 数据库集群. mysql主从自动备份和自动切换 从数据安全性考虑 ...

  3. oracle如何通过cmd导出某个用户下的所有表

    1:如果要导入的用户下有空表,需要执行下面语句 select 'alter table '||table_name||' allocate extent;' from user_tables wher ...

  4. 8 Oracle语句

    1.select name from v$datafile; 用sys方式登陆,查询所有表空间存放的物理路径 2.create tablespace DEMO_TBS datafile 'D:/TBS ...

  5. 无网络 使用pip安装mxnet

    # 在有网络的同系统机器上运行以下命令:pip download mxnet# 目前mxnet版本为1.3.0,执行后当前目录得到以下文件: # . # ├── certifi--py2.py3-no ...

  6. Spring-Boot数据库密码加密配置

    springboot集成mysql/oracle时需要在yml/properties中配置数据库信息,用户名密码是肯定有的,所以就涉及到密码的加密,当然不加密也是可以的,正如某位大佬所说的,不加密就像 ...

  7. html 中a标签的问题（无反应，跳转，调用方法）

    让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边     点击链接后不跳转可以设置成     1.<a href="javascri ...

  8. linux命令 网络篇

    linux常用命令 netstat 语法(命令)  主要查看端口状态 netstat  语法 netstat -t/tcp 显示Tcp传输协议连线状况; netstat -u/udp 显示UDP传输协 ...

  9. 树状数组 || 线段树 || Luogu P5200 [USACO19JAN]Sleepy Cow Sorting

    题面:P5200 [USACO19JAN]Sleepy Cow Sorting 题解: 最小操作次数(记为k)即为将序列倒着找第一个P[i]>P[i+1]的下标,然后将序列分成三部分:前缀部分( ...

  10. java_BufferedReader的一个应用

    应用来自于我做网页的时候,来读出一个txt文档,由于输出到页面的时候总是没有排版,但是原文件中有换行符,之前是使用的byte数组传输,但是这样无法换行 就使用了BufferedReader,因为它是一 ...