vue系列：vue的常用属性和方法

最新推荐文章于 2024-06-03 11:04:46 发布

Laymanღ

最新推荐文章于 2024-06-03 11:04:46 发布

阅读量2.1k

点赞数 3

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

本文链接：https://blog.csdn.net/TotoroChinchilla/article/details/124669201

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

vue系列：vue的常用属性vm.$ el、vm.$ data、vm.$ options、vm.$ refs和方法vm.$ mount()、vm.$ nextTick()、vm.$ set()、vm.$ delete()

好记性不如烂笔头，学习过程中也要记笔记，方便日后的复习

文章目录

vue系列：vue的常用属性vm.$ el、vm.$ data、vm.$ options、vm.$ refs和方法vm.$ mount()、vm.$ nextTick()、vm.$ set()、vm.$ delete()
前言
一、 vm.$ el、vm.$ data
二、vm.$ options、vm.$ refs
三、vm.$ mount()、vm.$ nextTick（）
- 1、vm.$ mount()
- 2、vm.$ nextTick（）
四、vm.$ set() vm.$ delete()
- 1、vm.$ set（）添加属性
- 2、vm.$ delete（）删除属性
总结

前言

前面我么已经学完了vue的基础内容，接下来学的是中级进阶实战内容，今天我们先来了解一下vue实例中常用的属性和方法。

一、 vm.$ el、vm.$ data

注意：这里$ 符号和el、data 中间都是没有空格的

作用：
通过Vue 实例属性 vm.$ el 即可获取到 Vue 实例挂载到的 dom元素，返回的是一个 dom 对象

通过 Vue 实例属性 vm.$ data 即可获取到 Vue 实例 data 选项数据对象，返回的是一个对象。

<body>
    <div id="app">
        {{msg}}
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{//data 常规存储数据
                msg:"welcome to vue"
            }
        })
        //vm.$el 获取 vm 实例关联的元素/选择器，是一个 dom 对象，就是上面的 div
        console.log(vm.$el)
        //拿到 dom 元素，我们可以做些事情，比如设置样式
        vm.$el.style.color="red"
        vm.$el.style.backgroundColor="blue"
        //vm.$data 获取数据对象 data
        console.log(vm.$data)
        //vm.$data.msg 就可以拿到 data 里面的 msg 属性值，只不过是有下面更简单的方法 vm.msg
        console.log(vm.$data.msg)
        //vm.属性名 获取 data 中的属性(不是在上面的 dom 中获取，上面 dom 获取直接{{msg}}即可)
        console.log(vm.msg)
    </script>
    
</body>

二、vm.$ options、vm.$ refs

注意：这里$ 符号和options、refs 中间都是没有空格的

可以通过 vm.$ options 获取自定义选项,当然 vm.$options也可以获取默认选项值(只不过 el、data 上面有更简单获取方式)

vm.$ refs 属性用来获取页面中所有具有 ref 属性的元素(因此要先设置 ref 属性),返回的是 dom 元素集合对象

<body>
    <div id="app">
        {{msg}}
        <h2 ref='hello'>你好</h2>
        <p ref='world'>小豆子学堂欢迎您</p>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{//data 常规存储数据
                msg:"welcome to vue"
            },
            //也可以自定义一些 Vue 选项，然后通过 vm.$options 获取自定义选项
            name:"zhangsan",
            age:28,
            show:function(){
                console.log("自定义show方法")
            },
            methods:{
                show12(){
                    alert("111")
                }               
            },
            watch:{
                
            },
            computed:{
                
            }
        })
        console.log(vm.$options.methods)
        vm.$options.methods.show12()
        //vm.$options 获取自定义选项
        console.log(vm.$options.name)
        console.log(vm.$options.age)
        vm.$options.show()//获取的执行 show 方法结果
        //使用 Vue 基本不需要去根据 id、class 获取某个 dom 元素，但是某些时候可能也有需要，原生的 js 或者 jquery 就是通过 id、class或者元素标签去获取
//vm.refs 获取页面中所有具有 ref 属性的元素,返回的是 dom 元素集合对象
        console.log(vm.$refs)
        //获取 ref 属性值为 hello 的 dom 对象
        console.log(vm.$refs.hello)
        //拿到 dom 元素后，就可以做些操作，比如下面设置 dom 元素的文字颜色
        vm.$refs.hello.style.color="blue"
    </script>

三、vm.$ mount()、vm.$ nextTick（）

1、vm.$ mount()

用来实现手动挂载 vm 实例到哪个 dom 元素上

<body>
    <div id="app">
        {{msg}}
       
    </div>
    <script>
        var vm=new Vue({
            // el:"#app",
            data:{
                msg:"welcome to vue"
            },           
        }).$mount("#app")
    </script>

相当于把el:“#app”,注释掉，然后在vm后面加上.$ mount (“#app”)

2、vm.$ nextTick（）

vm.$ nextTick(callback) 在 dom 更新完成之后再执行此回调函数，一般是在修改数据之后使用该方法，以便获取更新后的 dom。

<body>
    <div id="app">
        {{msg}}
       <h1 ref="title">标题：{{name}}</h1>
    </div>
    <script>
        var vm=new Vue({
            // el:"#app",
            data:{
                msg:"welcome to vue",
                name:"zhangsan"
            },           
        }).$mount("#app")
        vm.name='李四'
       console.log(vm.$refs.title)
       vm.$nextTick(function(){
          console.log(vm.$refs.title.textContent)
       })      
    </script>    
</body>

四、vm.$ set() vm.$ delete()

1、vm.$ set（）添加属性

vm.$ set(object，key，value)——为对象添加属性：为对象添加属性 key，并给定属性值 value

<body>
    <div id="app">   
        <button  @click='update'>修改属性</button> 
        <button  @click='add'>添加属性</button> 
    
       <h1>{{user.name}}</h1>
       <h1>{{user.age}}</h1>
    </div>
    <script>
        var vm=new Vue({
            // el:"#app",
            data:{
                user:{
                    id:1001,
                    name:'jack'
                }
            }, 
            methods: {
                update(){
                    this.user.name="张三"
                },
                add(){
                    // this.user.age=28
                    //vm.$set 是全局 Vue.set 的别名，即是可以用 Vue.set 来实现。Vue.set 是全局的 set 方法，写法前面是Vue，后面的 set 前没有$符号
                    // this.$set(this.user,'age',28)
                    //第 1 次单击添加属性，显示 age 为 22，后面每单击一次加 1
                    if(this.user.age){//age 属性存在加+1
                        this.user.age++
                    }
                    else
                    {
                        Vue.set(this.user,'age',22)
                    }               
                    console.log(this.user)
                }
            },          
        }).$mount("#app")
       
    </script>
    
</body>

2、vm.$ delete（）删除属性

vm.$ delete(object,key)作用：删除对象属性：删除 object 对象的属性 key。

<body>
    <div id="app">   
        <button  @click='update'>修改属性</button> 
        <button  @click='add'>添加属性</button> 
        <button @click='deleteage'>删除属性</button> 
       <h1>{{user.name}}</h1>
       <h1>{{user.age}}</h1>
    </div>
    <script>
        var vm=new Vue({
            // el:"#app",
            data:{
                user:{
                    id:1001,
                    name:'jack'
                }
            }, 
            methods: {
                update(){
                    this.user.name="张三"
                },
                add(){
                    // this.user.age=28
                    // this.$set(this.user,'age',28)
                    if(this.user.age){
                        this.user.age++
                    }
                    else
                    {
                        Vue.set(this.user,'age',22)
                    }
                   
                    console.log(this.user)
                },
                deleteage(){
                    // delete this.user.age
                    // vm.$delete(this.user,'age')
                    Vue.delete(this.user,'age')
                    console.log(this.user)
                }
            },          
        }).$mount("#app")
       
    </script>
    
</body>

vm.$set 是全局 Vue.set 的别名，即是可以用 Vue.set 来实现. vm.$delete 是全局 Vue.delete 的别名，即可以用Vue.deletet 来实现

总结

以上是本人的学习笔记，为了方便日后回顾，也可供大家参考，如果有错误的地方，还请各位指出。谢谢！！！

Laymanღ

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue系列：vue的常用属性和方法

vue的常用属性vm.$ el、vm.$ data、vm.$ options、vm.$ refs和方法vm.$ mount()、vm.$ nextTick()、vm.$ set()、vm.$ delete()
复制链接

扫一扫