Vue 常用属性方法

最新推荐文章于 2024-05-15 01:08:22 发布

季布，

最新推荐文章于 2024-05-15 01:08:22 发布

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47906106/article/details/125832092

版权

Vue 专栏收录该内容

84 篇文章 14 订阅

订阅专栏

计算属性

计算属性也是用来存储属性数据，但是具有以下特点

可以对数据进行逻辑处理操作，实现数据包装
计算属性通常依赖于当前vue对象中的普通属性
当依赖的普通属性发生变化时计算属性也会发生变化，实时数据监控

计算属性由两部分组成：

get 用来获取计算属性
set用来设置计算属性

</body>
<script>
    Vue.createApp({
        data(){
            return {
                // 普通属性
               msg:"welcome to",
               num:4

            }
        },
        // 计算属性依赖于普通属性,对普通属性进行逻辑处理 该函数有返回值，用来获取属性成为get函数
        computed:{
            reverseMsg:function(){
                return this.msg.toUpperCase().split(' ').reverse().join(' ')
            },
            doubleNum:{ 
                get:function(){
                    return this.num*2
                },
                set:function(value){
                    {{value}}
                    this.num = value //doubleNum 依赖于num 所以要给num赋值
                }
            }
        },
        methods:{

        }
    }).mount('#app')
</script>

在这里插入图片描述

监视器

监视器(watch)是用来监视数据的变化,对数据进行监控
定义监视器的两种方式：

在vue实例内部通过watch选项
通过vue实例的$watch()方法

<body>
   <div id="app">
        <input type="text" v-model="name">
        <hr>
        <p>{{user.password}}</p>
        <input type="text" v-model="user.password">
    </div>
</body>
<script>
    Vue.createApp({
        data(){
            return {
               
               name:'tom',//基本数据类型
               user:{ //引用数据类型
                id:1001,
                username:'admin',
                password:'123'
               }
            }
        },
       watch:{
        name:function(newValue,oldValue){
            console.log(`name被修改,原值:${oldValue},新值:${newValue}`)
        },
        user(newValue){
            console.log('user被修改',newValue)
        }
       },
        methods:{

        }
    }).mount('#app')
</script>

实例属性

通过vue实例对象可以直接访问的属性，成为实例属性
实例属性都以$开头

vm.$el:当前Vue实例使用的根DOM元素
vm.$data:当前vue实例观察的数据对象
vm.$options:当前实例的初始化选项
vm.$refs:当前vue实例容器中定义了ref属性的所有DOM元素

<body>
   <div id="app">
        <p>{{msg}}
            <span>{{info}}</span>
        </p>
        
    </div>
</body>
<script>
    vm = Vue.createApp({
        data(){
            return {
            msg:'welcome',
            info:'hello'
            }
        },
        methods:{

        }
    }).mount('#app')
console.log(vm.$el)
</script>

在这里插入图片描述

<body>
   <div id="app">
        <p>{{msg}}
            <span>{{info}}</span>
        </p>
        
    </div>
</body>
<script>
    vm = Vue.createApp({
        data(){
            return {
            msg:'welcome',
            info:'hello'
            }
        },
        methods:{

        }
    }).mount('#app')
console.log(vm.$data)
</script>

在这里插入图片描述

<body>
   <div id="app">
        <p>{{msg}}
            <span ref="'aaa">{{info}}</span>
            <span ref="'bbb">{{info}}</span>
        </p>
        
    </div>
</body>
<script>
    vm = Vue.createApp({
        data(){
            return {
            msg:'welcome',
            info:'hello'
            }
        },
        methods:{

        }
    }).mount('#app')
console.log(vm.$refs)
</script>

在这里插入图片描述

实例方法

通过Vue实例对象可以直接访问的方法，称为实例方法
实例方法都是以$开头

vm.$watch:监视数据的变化，对数据进行监控
vm.$nextTick:在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更行后的DOM并操作

模板

模板就是定义Vue时指定的页面结构构成
默认使用mount(‘选择器’)指定的挂载元素的内容来构成页面模板
可以使用template选项独立定义页面模板，此时挂载元素的内容将被忽略

生命周期

vue实例从创建到销毁的过程，成为生命周期，共有八个阶段：

beforeCreate、created
beforeMount、mounted
beforeUpdate、updated
beforeUnmount、unmounted
在生命周期的每个阶段头提供了相应的钩子函数，可以在狗子函数中执行操作，操作生命周期的各个阶段

在这里插入图片描述

<body>
   <div id="app">
        <p>{{msg}}</p> 
    </div>
</body>
<script>
    vm = Vue.createApp({
        data(){
            return {
            msg:'welcome',
            info:'hello'
            }
        },
        beforeCreate(){
            console.log('beforeCreate---实例刚刚创建,初始化环境事件和生命周期钩子函数')
            console.log(this.$el)
            console.log(this.$data)
        },
        created(){
            console.log('created---实例已经完成初始化(完成数据的监测和注入)')
            console.log(this.$el)
            console.log(this.$data)
        },
        beforeMount(){
            console.log('beforeMount---挂载之前，此时模板已经编译，但是没有关联到页面上')
            console.log(this.$el)
            console.log(this.$data)
        },
        mounted(){
            console.log('mounted---挂载完成，已经关联到页面上')
            console.log(this.$el)
            console.log(this.$data)
        },
        beforeUpdate(){
            console.log('beforeUpdate---Dom更新之前执行')
            console.log(this.$el)
            console.log(this.$data)
        },
        updated(){
            console.log('beforeUpdate---Dom更新完成')
        },
    }).mount('#app')
</script>

季布，

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 常用属性方法

可以使用template选项独立定义页面模板，此时挂载元素的内容将被忽略。默认使用mount(‘选择器’)指定的挂载元素的内容来构成页面模板。监视器(watch)是用来监视数据的变化,对数据进行监控。通过vue实例对象可以直接访问的属性，成为实例属性。通过Vue实例对象可以直接访问的方法，称为实例方法。计算属性也是用来存储属性数据，但是具有以下特点。模板就是定义Vue时指定的页面结构构成。实例方法都是以$开头。...
复制链接

扫一扫