`

Vue 实例属性($option $el等)

 
阅读更多


属性:
vm.$el:获取Vue实例关联的DOM元素
vm.$data:获取Vue实例的data选项(对象)
vm.$options:获取Vue实例的自定义属性(如vm.$options.methods,获取Vue实例的自定义属性methods)
vm.$refs:获取页面中所有含有ref属性的DOM元素(如vm.$refs.hello,获取页面中含有属性ref = “hello”的DOM元素,如果有多个元素,那么只返回最后一个);

var app   = new Vue({  
            el:"#container",  
            data:{  
                msg:"hello,2018!"  
            },  
            address:"长安西路"  
        })  
        console.log(app.$el);//返回Vue实例的关联DOM元素,在这里是#container  
        console.log(app.$data);//返回Vue实例的数据对象data,在这里就是对象{msg:”hello,2018“}  
        console.log(app.$options.address);//返回Vue实例的自定义属性address,在这里是自定义属性address  
        console.log(app.$refs.hello)//返回含有属性ref = hello的DOM元素(如果多个元素都含有这样的属性,只返回最后一个)<h3 ref = "hello">呵呵 1{{msg}}</h3> 


方法:


vm.$mount(DOM选择器):手动挂载实例的关联元素
vm.$destroy():销毁Vue实例
vm.$nextTick(callback):在DOM更新完成后再执行callback函数,一般在修改数据之后使用该方法,以便获取更新后的DOM元素。

var app1 = new Vue({  
            data:{  
                msg1:"hello,旺旺年!",  
                age:"19"  
            }  
        })  
        //vm.$mount(选择器):手动挂载Vue实例的关联元素  
        app1.$mount("#wangYear")  
        //vm.$destroy():销毁Vue实例,但是数据还在  
      
  
        //vm.$nextStick(callback):  
        app1.age = 39;  
        //修改了数据age。  
        console.log(app1.$refs.age1.textContent)//19,怎么不是39,明明修改了呀,原因是-----  
        // 当执行这一句的时候,DOM还没更新完,Vue实现响应式并不是数据发生改变后DOM立即变化,而是需要一定的策略进行DOM更新,这是需要时间的!!  
        // 那为什么我们在页面中一下子就看到数据已经发生变化了呀?那是因为在我们看到的时候,DOM已经更新完成了,这个过程进行的很快。  
        app1.$nextTick(function(){  
            console.log(app1.$refs.age1.textContent)//39  
        })  


  • 大小: 54.6 KB
  • 大小: 55 KB
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    Vue下拉框回显并默认选中随机问题

    然而在某些情况下,可能需要手动调用Vue实例的$forceUpdate方法来强制重新渲染。这应当作为最后的手段来使用,并且要小心处理。 总结以上,解决Vue下拉框回显并默认选中随机问题的关键在于确保数据加载的正确时机和...

    Vue + Element-ui的下拉框el-select获取额外参数详解

    // 在Vue实例的方法中 methods: { handleChange(selectedValue, otherValue) { console.log('选中的值:', selectedValue); console.log('其他需要的值:', otherValue); } } ``` 这样,你可以在`handleChange`...

    vue-echarts可视化模板

    可以使用 Vue 的计算属性和 Echarts 的 `resizeHandler` 方法来监听窗口大小变化: ```javascript export default { data() { return { chartInstance: null } }, computed: { chartWidth() { return this....

    简易版 vue实现.doc

    - **$option**、**$el**、**$data**:这都是Vue实例的内置属性,`$options`存储传入的配置项,`$el`指向挂载的DOM元素,`$data`则包含实例的初始数据。 - **_ProxyData()**:这个方法的作用是将`data`中的属性转化...

    vue.js 获取当前自定义属性值

    另一方面,如果在模板中直接使用`this.data-id`,Vue会将其视为尝试访问Vue实例上的`data-id`属性,但是由于`data-id`并不存在于Vue实例的数据对象中,因此无法正确获取其值。 本文也提到了如何在点击事件处理函数...

    Vue 3.0双向绑定原理的实现方法

    Proxy 提供了一种机制,允许开发者创建一个对象的代理,这个代理可以拦截并定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。因此,Proxy 代理不仅可以代理对象,还可以代理数组,甚至代理一些内部...

    【JavaScript源代码】vue element el-transfer增加拖拽功能.docx

    在Vue.js项目中,Element UI库的`el-transfer`组件是一个非常实用的工具,用于在两个列表之间进行数据传输。然而,原生的`el-transfer`并不直接支持拖拽排序功能。为了满足芯资管项目的需求,我们需要利用第三方库...

    vue select二级联动第二级默认选中第一个option值的实例

    Vue Select 二级联动第二级默认选中第一个 Option 值的实例详解 在本篇文章中,我们将详细介绍 Vue Select 二级联动第二级默认选中第一个 Option 值的实例。该实例具有很好的参考价值,希望对大家有所帮助。 知识...

    基于Vue+element UI 的手动创建地区json的三级联动

    3. **实现联动效果**:在Vue实例中,我们可以定义三个数据属性分别存储当前选中的省份、城市和区县。当其中一个值改变时,通过计算属性或watch监听器来更新其他两个选项的可选值。 4. **使用Element UI组件**:利用...

    vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    6. Vue.js的key属性:如果存在循环渲染的el-option,确保为每个el-option提供一个唯一的key属性。Vue.js通过key来识别虚拟DOM中的节点,这对于渲染性能和列表更新有重大影响。 示例代码中提到的问题可能与初始化...

    el-select获取选中的label值.pdf

    在上述代码中,`v-model`绑定的`selectedValue`将保存选中的`value`,而`ref="myselect"`用于为`el-select`组件创建一个引用,这样我们就可以在Vue实例中通过`this.$refs.myselect`访问到这个组件实例。 当需要获取...

    jQuery基于vue.js下拉框菜单选择和日期时间选择代码

    在这里,`selectedOption`是Vue实例的一个属性,它会随着用户在下拉框中的选择自动更新。 接下来,日期时间选择器通常通过插件或自定义组件实现。jQuery有许多日期选择器插件,如`bootstrap-datetimepicker`或`...

    Element-ui中元素滚动时el-option超出元素区域的问题

    3. 方案三:深入Element-ui的源码,找到控制popperEl显示隐藏的实例属性。在`select.vue`组件中,`visible`属性决定了popperEl的可见性。因此,可以尝试在滚动事件中修改`visible`的值。例如,可以监听滚动事件,当...

    使用VUE自定义组件封装数据字典实战

    在Vue开发中,数据字典的管理是必不可少的,它涉及到对系统中各种常量值的维护,如性别、证件类型、审批状态等。为了提高代码的可复用性和维护性,我们可以对这些常见的功能进行封装,特别是对于前端展现常用的下拉...

    详解element-ui中el-select的默认选择项问题

    通过理解`v-model`的工作原理以及如何在Vue实例的`data`中初始化它,我们可以轻松地在Element-UI的`el-select`组件中实现预期的默认选中效果。在实际项目开发中,灵活运用这些知识能够提高用户体验,同时降低出错的...

    vue绑定数字类型 value为数字的实例

    但需要注意的是,如果option的value属性直接使用数字,那么使用`.number`修饰符后,Vue会自动将对应的字符串转换为数字。反之,如果value属性使用的是字符串形式的数字,Vue也会将其转换为数字类型,但这种情况下,...

    vue动态循环出的多个select出现过的变为disabled(实例代码)

    在el-option上设置disabled属性,该属性接受一个表达式,当表达式为真时,对应的el-option会被禁用。 8. 使用第三方UI组件库:示例代码中使用了Element UI组件库,这是一个流行的基于Vue.js的UI框架。使用Element ...

    Element-ui中 选择器(select)多选下拉框实现全选功能.zip

    在对应的Vue实例中,你需要定义`selectedValues`和`options`,并实现`handleSelectChange`方法: ```javascript export default { data() { return { selectedValues: [], options: [ { value: 'option1', ...

    Day02 VUE资料整理

    这允许我们跟踪用户的选择,并自动同步至Vue实例的数据属性。 **示例代码:** ```html 性别: 男 女 ``` **解释:** - `name`属性确保单选按钮组内只有一个选项被选中。 - `value`属性用于定义选中此选项时,...

    VUE2 前端实现 静态二级省市联动选择select的示例

    在JavaScript部分,我们创建Vue实例并定义`data`选项,其中包含`provs`省份数据、空的`citys`城市数据、`selectProv`当前选中的省份和`selectCity`当前选中的城市。当用户在省份选择器中改变选项时,会触发`getProv`...

Global site tag (gtag.js) - Google Analytics