(精华2020年5月5日更新) vue教程篇 vue实例属性的使用

最新推荐文章于 2024-07-25 10:42:11 发布

2b勿扰

最新推荐文章于 2024-07-25 10:42:11 发布

阅读量1.4w

点赞数 1

分类专栏： (持续更新)vue基础篇文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41181778/article/details/105921184

版权

(持续更新)vue基础篇专栏收录该内容

29 篇文章 3 订阅

订阅专栏

静态实例属性

<!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>

动态实例属性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>

数据渲染完强制改变的实例方法

<!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>