(精华)2020年7月12日 vue 实例属性的使用
【摘要】
静态实例属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
...
静态实例属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue实例的属性和方法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="itapp">
{{msg}}
<h2 ref="hello">hello</h2>
<p ref="world">world</p>
<h1 ref="title">title：{{nameK}}</h1>
</div>
<script>
var vm = new Vue({
// el:'#app',
data: {
msg: 'welcome to app',
nameK: 'xixihaha'
},
name: 'xut',
age: 10,
show: function () {
console.log('show');
},
methods: {
},
mounted() {}
});
vm.$mount('#app');//手动挂载vue实例
vm.$destroy() //销毁实例
//属性：vm.属性名，获取data中的某个属性
console.log(vm.msg)
// vm.$el 获取vm关联的元素
console.log(vm.$el)
vm.$el.style.color="red";
// vm.$data 获取数据对象data
console.log(vm.$data)
// vm.$options 获取自定义
console.log(vm.$options)
console.log(vm.$options.name)
console.log(vm.$options.age)
vm.$options.show();
// vm.$refs :获取所有添加ref属性的元素
console.log(vm.$refs);
console.log(vm.$refs.hello);
vm.$refs.hello.style.color = 'red';
//在dom更新完后再执行回调函数
vm.$nextTick(callback)
//dom没有更新完， vue实现响应式并不是数据发生变化之后， dom马上变化，需要时间
console.log(vm.msg);
vm.nameK = "测试";
console.log(vm.$refs.title.textContent)
//宏任务
setTimeout(() => {
console.log('setTimeout');
console.log(vm.$refs.title.innerHTML)
}, 0)
//微任务
vm.$nextTick(function () {
console.log('nextTick');
console.log(vm.$refs.title.innerHTML)
});
// $nextTick :推荐
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
console.log('vm.msg', vm.msg);
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
动态实例属性crud
在data中没有的字段，普通的设置并不能使data中实时新增字段和删除字段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加和删除属性：$set、$delete</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="doUpdate">修改属性</button>
<button @click="doAdd()">添加属性</button>
<button @click="doDelete">删除属性</button>
<hr>
{{user}}
<h2>{{user.name}}</h2>
<h2>{{user.age}}</h2>
</div>
<script>
var vm = new Vue({
el: '#app',
// data(){
// return {
// name:'ss'
// }
// },
data: {
user: {
id: 1001,
name: 'tom'
}
},
methods: {
doUpdate() {
this.user.name = '汤姆';
},
doAdd() {
// this.user.age=25; //通过普通方式为对象添加属性时vue无法实时监视到
// this.$set(this.user,'age',25); //通过vue实例的$set方法为对象添加属性，可以实时监视
if (this.user.age) {
this.user.age++;
} else {
Vue.set(this.user, 'age', 20);
}
},
doDelete() {
if (this.user.age) {
//delete this.user.age; //无效， 不能实时渲染
this.$delete(this.user, 'age'); //实例方法
// Vue.delete(this.user,'age'); //vue的全局方法
}
}
}
});
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
数据渲染完强制改变的实例方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加和删除属性：$forceUpdate</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{user.name}}
<!-- {{user.age}} -->
{{country}}
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
user: {
name: 'song'
}
}
},
methods: {
},
created() {
},
beforeMount() {
this.country = 'china';
},
mounted() {
//上面的beforeMount已经渲染完数据
this.country = '中国';
//this.$set(this,'country','中国'); //不可以
this.$forceUpdate(); //迫使vue实例重新渲染
}
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。
原文链接：codeboy.blog.csdn.net/article/details/107303483
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）