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#WinForm窗体内Panel容器中嵌入子窗体、程序主窗体设计例子

    C#WinForm父级窗体内Panel容器中嵌入子窗体.程序主窗体设计例子 在项目开发中经常遇到父级窗体嵌入子窗体所以写了一个例子程序,顺便大概划分了下界面模块和配色,不足之处还望指点 主窗体窗体采用 ...

  2. [原][openstack-pike][controller node][issue-3][horizon] dashboard show internal error 500 Cannot serve directory /var/www/html

    问题点: 安装完pike后发现只能使用 ip:80 登录到http的主页面 不能使用 http://controller_ip:80/dashboard 登录openstack登录页面.如下图 重启h ...

  3. window 控制台解决中文乱码

    console.log 输出中文乱码,怎么解决 是由于DOS窗口显示的编码同logcat日志中不同导致的乱码问题.DOS窗口默认的编码是GBK,而LogCat打印的是UTF-8的编码,所以要设置DOS ...

  4. Hudson持续集成服务器的安装配置与使用

    Hudson只是一个持续集成服务器(持续集成工具),要想搭建一套完整的持续集成管理平台, 还需要用到前面课程中所讲到的 SVN.Maven.Sonar等工具,按需求整合则可. 1.安装  JDK并配置 ...

  5. 关于 python中的转义字符

    "abc\n" 前面加 r,表示原生输出,不转义.实际上是用 \代替 \\,其实是已经转义过了,并不是不转义. 看这个例子: print(r"abc \n") ...

  6. CentOS从源码安装Erlang

    ### 首先下载资源 wget http://erlang.org/download/otp_src_18.3.tar.gz ### 解压 .tar.gz ### 安装依赖包 yum install ...

  7. juqery 点击张三触发李四的方法 trigger(); 和 被选元素前插入指定的内容的方法 brfore();

    $('.zc_fabu_img_1').on('click',function(){ $("#upImg img").trigger("click"); }) ...

  8. linux中的cd

    cd命令 实例 hling@hling:~$ cd /home/hling/桌面/huanghling@hling:~/桌面/huang$ cd ..hling@hling:~/桌面$ cd ..hl ...

  9. js中级小知识3

    函数: 函数在调用的时候,会形成一个私有作用域,内部的变量不会被外面访问,这种保护机制叫闭包.这就意味着函数调用完毕,这个函数形成的栈内存会被销毁. 有些时候我们不希望他被销毁. 函数归属谁跟它在哪调 ...

  10. java面试基础题------》Java 中List、Set、Map异同点

    借鉴地址:http://blog.csdn.net/speedme/article/details/22398395 几句喜欢的话,拷贝下来: 世间上本来没有集合,(只有数组参考C语言)但有人想要,所 ...