Vue基础进阶 之 常用的实例属性

时间:2023-03-08 23:59:46
Vue基础进阶 之 常用的实例属性

Vue实例属性:

vue实例直接调用的属性;

常用的实例属性:

vm.$data:获取属性;

vm.$el:获取实例挂载的元素;

vm.$options:获取自定义选项/属性;

vm.$refs:获取通过ref属性注册的DOM对象;

vm.$data:获取属性

Vue基础进阶 之 常用的实例属性

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基础进阶 之 常用的实例属性

vue代码:

/*    $el*/
console.log(vm.$el);
vm.$el.style.color='red';

vm.$options:获取自定义选项/属性

Vue基础进阶 之 常用的实例属性

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基础进阶 之 常用的实例属性

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