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)监听 ...
随机推荐
- Qt编写自定义控件8-动画按钮组控件
前言 动画按钮组控件可以用来当做各种漂亮的导航条用,既可以设置成顶部底部+左侧右侧,还自带精美的滑动效果,还可以设置悬停滑动等各种颜色,原创作者雨田哥(QQ:3246214072),驰骋Qt控件界多年 ...
- pandas 基础操作 更新
创建一个Series,同时让pandas自动生成索引列 创建一个DataFrame数据框 查看数据 数据的简单统计 数据的排序 选择数据(类似于数据库中sql语句) 另外可以使用标签来选择 通过位置获 ...
- 网络流24T
说出来你们可能不信,我咕了三个多星期了,今晚忽然不想再写题了,(写自闭了,把这边整理一下 1. 洛谷P2756 飞行员配对问题 二分图匹配: #include <bits/stdc++.h> ...
- 21.react 组件通信
状态属性可以修改 this.setState()中可以写对象,也可以写方法 <script type="text/babel"> class Test extends ...
- elk之elasticsearch（二）
一.下载安装包:注意版本统一 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.3.2.zip wge ...
- ThinkPHP 缓存技术详解 使用大S方法
如果没有缓存的网站是百万级或者千万级的访问量,会给数据库或者服务器造成很大的压力,通过缓存,大幅减少服务器和数据库的负荷,假如我们把读取数据的过程分为三个层,第一个是访问层,第一个是缓存层,第三个是数 ...
- python全栈开发 * 23 面向对象 知识点汇总 * 180704
23 面向对象 -----特殊方法 1. isinstance(obj,类名) 判断对象是否是此类实例化或者此类的子类实例化出来的class A:passclass B(A):passb1=B()pr ...
- 转载：MySQL EXPLAIN 命令详解学习
转载自:https://blog.csdn.net/mchdba/article/details/9190771 MySQL EXPLAIN 命令详解 MySQL的EXPLAIN命令用于SQL语句的查 ...
- 自定制property
class Lazyproperty: def __init__(self, func): self.func = func def __get__(self, instance, owner): p ...
- React Router API文档
React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...