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)监听 ...
随机推荐
- java基础---->String中replace和replaceAll方法
这里面我们分析一下replace与replaceAll方法的差异以及原理. replace各个方法的定义 一.replaceFirst方法 public String replaceFirst(Str ...
- MQTT 嵌入式端通讯协议解析（转）
MQTT,目前物联网的最主要的协议,基本所有收费的云平台都是基于MQTT协议,比如机智云,和所有的开放云平台比如中国移动的oneNet.百度的云平台也都支持MQTT的接入.虽然MQTT很火,但是目前对 ...
- java第一次上机实验--验证码
package javashiyan; import java.awt.Color; import java.awt.event.ActionEvent; import java.awt.event. ...
- centos7 与 archlinux用户 安装 python3模块 pytaglib
对于 centos7用户: yum group install "Development Tools" yum install taglib-devel yum install p ...
- 让wampserver2.5.exe支持sql server数据库的方法
将D:\wamp\bin\php\php5.5.12\ext路径下 这两个文件复制到php.ini中 链接数据库方法 <?php $serverName = "."; $co ...
- 我的WafBypass之道（Misc篇）
先知技术社区独家发表本文,如需要转载,请先联系先知技术社区授权:未经授权请勿转载.先知技术社区投稿邮箱:Aliyun_xianzhi#service.alibaba.com: Author:Tr3je ...
- 窗口，父窗口parentwindow，所有者窗口ownerwindow
参考文档:http://www.cnblogs.com/fwycmengsoft/p/4026592.html 一. parent:创建者,owner:所有者 小玉的父母生下小玉,养到8岁,卖给贾府当 ...
- 利用XML语法 SQL 列转行
--行转列 固定xml语法 declare @xml xml ; set @xml=cast('<v>2</v><v>4</v><v>3&l ...
- python全栈开发 * 12 知识点汇总 * 180530
12 知识点总结 装饰器进阶 ⼀. 通⽤装饰器的回顾1.开闭原则: 对增加功能开放. 对修改代码封闭2.装饰器的作⽤: 在不改变原有代码的基础上给⼀个函数增加功能3.通⽤装饰器的写法:def wrap ...
- partial_sum
版本1: template < class InputIterator, class OutputIterator > OutputIterator partial_sum(InputIt ...