Vue基础进阶 之 常用的实例属性
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基础进阶 之 常用的实例属性的更多相关文章
- Vue基础知识之常用属性和事件修饰符（二）
Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...
- Vue基础进阶 之 计算属性的使用
计算属性的基本使用 初始小示例: 代码: window.onload = () =>{ new Vue({ el:'div', data:{ msg:'' } }) } </script& ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
- Vue基础进阶 之 实例方法--生命周期
在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...
- Vue基础进阶 之 实例方法
常用的实例方法: 数据: vm.$set:设置属性值: vm.$delete:删除属性值: vm.$watch:观测数据变化: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destr ...
- vue 基础-->进阶 教程(1): 基础（数据绑定）
第一章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue(基础三)_监听器与计算属性
一.前言 本文主要涉及: 1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...
随机推荐
- 理解面向过程（OPP）、面向对象（OOP）、面向切面（AOP）
概念 面向过程编程OPP:Procedure Oriented Programming,是一种以事物为中心的编程思想.主要关注“怎么做”,即完成任务的具体细节. 面向对象编程OOP:Object Or ...
- Java并发面试题
一.什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线程完成一 ...
- springmvc中为我们做了什么
这应该是每个使用框架的人应该自问的.这就要从没有使用框架时说.在没用框架开发web应用时,自己是怎么开发的,就是写servlet,jsp. 使用springmvc后,使用Controller注解,其实 ...
- linux搭建mysql集群
一.公共配置 请在三个虚拟机上分别配置此处的配置项. 1. 安装虚拟机 虚拟机操作系统安装CentOS 6.5的x86_64版本. 2. 拷贝mysql cluster 下载以下版本的MySQL-Cl ...
- bash 脚本。find 命令，xargs
rm 排除指定文件或文件夹 rm -r !(.git) find 命令两个用法 find <指定目录> <指定条件> <指定动作> $ find . -name ' ...
- HTML、CSS知识点,面试开发都会需要--No.3 盒子模型
No.3 盒子模型 1.盒子模型属性 (1)包含的CSS属性:width.height.padding.border.margin. 1.盒子模型属性 (1)包含的CSS属性: width.heigh ...
- ArcPy第一章-Python基础
学习Arcpy,从零开始积累.1.代码注释: python中,说明部分通常使用注释来实现: 方式: # 或者 ## + 注释部分内容2. 模块导入: 方式: import Eg: import arc ...
- phpredis中文开发文档
刚好要用看了网上翻译版本都是2011,2012年的,随手翻译一下新版 2017年10月28日23:48:08 使用方法 : Ctrl+F 官方英文版 https://github.com/phpred ...
- 审核被拒：1. 1 Safety: Objectionable Content ;3. 1.1 Business: Payments - In-App Purchase ;4. 3 Design: Spam ;5. 1.1 Legal: Privacy - Data Collection and Storage
1. 1 Safety: Objectionable Content 有人民币符号—隐藏收费课程 3. 1.1 Business: Payments ...
- Intellij IDEA注册激活破解
1.2017年适用(2016.3.5到2017.2.4版均生效) 安装IntelliJ IDEA 最新版 启动IntelliJ IDEA 输入 license时,选择输入 [License serve ...