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)监听 ...
随机推荐
- Axure RP 9 Beta 开放下载(更新激活密钥和汉化包)
2018年9月9号,7月9号来厦门入职,已经两个月了.这两个月的生活状态真心不好,一方面工作很忙(刚工作是这样?),虽然工资还可以,但总感觉性价比很低,自已对这份工作不够热爱也许.另一方面,来到新城市 ...
- 【html5】 解决 video标签 不自动全屏
<video controls="controls" poster='' src='' preload="auto" x5-playsinline=&qu ...
- 【thinkphp5.1】 endroid/qrcode 二维码生成
composer 链接: https://packagist.org/packages/endroid/qrcode 注意:PHP版本 要求 7.1+ 1. 使用 composer 安装 endroi ...
- LeetCode - 767. Reorganize String
Given a string S, check if the letters can be rearranged so that two characters that are adjacent to ...
- linux signal
1) SIGHUP 本信号在用户终端连接(正常或非正常)结束时发出, 通常是在终端的控制进程结束时, 通知同一session内的各个作业, 这时它们与控制终端不再关联. 登录Linux时,系统会分配给 ...
- 关于4A网络安全管控平台控件加载失败的解决方法
最近电脑重装系统后,到公司登录4A管控平台提示"控件加载失败","无效的参数为:Null","点击资源无任何反映"等等问题 别人的电脑用的好 ...
- Centos下普通用户设置sudo权限
若执行sudo命令的用户没有sodu权限,则会报以下错误 violet is not in the sudoers file.This incident will be reported 若想让vio ...
- Nodejs exec和spawn的区别
spawn child_process.spaen会返回一个带有stdout和stderr流的对象.你可以通过stdout流来读取子进程返回给Node.js的数据. stdout拥有’data’,’e ...
- HTML页面本地正常,部署到服务器稍微异常解决方案
<meta http-equiv="X-UA-Compatible" content="IE=edge" > 在IE浏览器正常显示
- H - Expedition 优先队列 贪心
来源poj2431 A group of cows grabbed a truck and ventured on an expedition deep into the jungle. Being ...