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)监听 ...
随机推荐
- SublimeText插件Pandoc导出PDF中文报错或者中文不显示解决方法
按照如下自定义配置(主要是指定latex的字体[仅限本机字体]) { "user": { // "pandoc-path":"C:\\Program ...
- C# windows GDI+仿画图 绘图程序设计
C# windows GDI+仿画图 绘图程序设计 1.介绍 这里分享一个简单的画图程序 原作者:author: ping3108@163.com 2.程序主窗体设计 3.程序设计 本程序工程使用VS ...
- C#俄罗斯方块小游戏程序设计与简单实现
C#俄罗斯方块小游戏程序设计与简单实现 相信90后或者80后都玩过这款小游戏,一直想干一票,琢磨一下,但又不太懂,于是网上搜集修改就有了以下效果!bug较多,多多包涵! 1.效果展示 2.实现方法 参 ...
- Dart 语言简易教程系列
google Fuchsia系统 及 dart语言简介 在 InteIIiJ IDEA 中搭建 Dart 的开发环境 Dart Linux 开发环境搭建 Dart 语言简易教程(一) Dart 语言简 ...
- post数据过多时，有可能会丢失数据
开奖时,post时请求的user_id过多,导致活动id丢失
- Java课程寒假之开发记账本软件（网页版）之四
一.实现基础功能之一(删除) 在删除的功能实现之前,要明白删除的条件是什么,一开始我是以去向和时间作为条件删除,但是删除的语句好像有问题,好像是因为出现了非法字符(应该是中文吧,不太清楚,因为这不是我 ...
- 微信小程序开发笔记03
今天基本实现了微信小程序主要功能,页面还没有进行优化,有些功能还需完善. 页面之间的信息转化部分还未实现.
- juqery 点击分页显示，指定一页显示多少个，首次加载显示多少个
源代码html: //源代码:html <div class="jq22"> <div class="hidden"> <li&g ...
- python全栈开发 * 31知识点汇总 * 180716
31 模块和包一.模块(一)模块的种类:内置模块,自定义模块,扩展模块第三方模块(二)自定义模块 1.模块的创建 : 新建一个py文件. 2.模块名 : 模块名需要符合变量的命名规范. 3.模块的导入 ...
- java.lang.NoClassDefFoundError 错误
练习jfianl,,,配置数据库插件的时候遇到: java.lang.NoClassDefFoundError: com/mchange/v2/c3p0/ComboPooledDataSource 解 ...