- 浏览: 599285 次
- 性别:
- 来自: 厦门
文章分类
- 全部博客 (669)
- oracle (36)
- java (98)
- spring (48)
- UML (2)
- hibernate (10)
- tomcat (7)
- 高性能 (11)
- mysql (25)
- sql (19)
- web (42)
- 数据库设计 (4)
- Nio (6)
- Netty (8)
- Excel (3)
- File (4)
- AOP (1)
- Jetty (1)
- Log4J (4)
- 链表 (1)
- Spring Junit4 (3)
- Autowired Resource (0)
- Jackson (1)
- Javascript (58)
- Spring Cache (2)
- Spring - CXF (2)
- Spring Inject (2)
- 汉字拼音 (3)
- 代理模式 (3)
- Spring事务 (4)
- ActiveMQ (6)
- XML (3)
- Cglib (2)
- Activiti (15)
- 附件问题 (1)
- javaMail (1)
- Thread (19)
- 算法 (6)
- 正则表达式 (3)
- 国际化 (2)
- Json (3)
- EJB (3)
- Struts2 (1)
- Maven (7)
- Mybatis (7)
- Redis (8)
- DWR (1)
- Lucene (2)
- Linux (73)
- 杂谈 (2)
- CSS (13)
- Linux服务篇 (3)
- Kettle (9)
- android (81)
- protocol (2)
- EasyUI (6)
- nginx (2)
- zookeeper (6)
- Hadoop (41)
- cache (7)
- shiro (3)
- HBase (12)
- Hive (8)
- Spark (15)
- Scala (16)
- YARN (3)
- Kafka (5)
- Sqoop (2)
- Pig (3)
- Vue (6)
- sprint boot (19)
- dubbo (2)
- mongodb (2)
最新评论
属性:
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 })
发表评论
文章已被作者锁定,不允许评论。
-
Vue 组件相关知识学习
2018-04-13 15:27 391Vue.js 组件 // 组件(Component)是 ... -
Vue methods中方法之间的调用
2018-04-12 09:04 1736delAllOrderList:function(good ... -
Vue 计算属性(computed)学习
2018-04-11 15:55 9631.基础例子: <div id = "exam ... -
Vue 过滤器(|)学习
2018-04-11 14:30 740一、Vue提供的过滤器 vue本身提供了很多便利的过滤器,这里 ... -
Vue 所有指令(v-on:click = @click v-blind:class = :class)的学习
2018-04-11 09:38 1402先说一下指令里面的值都是表达式 new Vue({ ... -
js 动态Post请求防止在输入栏中显示参数
2018-01-08 10:21 633动态进行Post请求 var f=document.cre ... -
js autocomplete实现下拉模糊查询
2018-01-04 10:48 11121.js编写 // 获得焦点是重新进行查询 $(&quo ... -
js 遍历并且赋值
2017-12-19 13:46 642$("#productInfo").f ... -
js 鼠标移过去渐变的效果(页面固定 定位栏)
2017-10-31 11:29 6291.html代码 <div id="loc ... -
js 判断图片是否存在
2017-10-27 08:56 877当图片不存在时,将触发onerror,onerror 中img ... -
js 在页面中跳转到指定位置
2017-10-24 15:29 13441.页面中代码 <div style="lef ... -
Javascript 总结汇总
2016-11-04 15:06 349var timeoutid = window.setTimeo ... -
js easyui tree判断是否父节点
2016-09-08 10:17 812function isIncludeParentNode( ... -
CSS 点击div的同时显示或隐藏的div
2016-08-16 17:18 621<div id="up"> ... -
js 通过调用方法终止js代码继续执行的问题(采用throw解决)
2016-07-12 14:15 491一个方法如何终止另一个方法执行的问题 function ... -
js lightbox展示图片的案例
2016-06-13 09:35 688如何使用 1、Lightbox v2.0 使用 Protot ... -
js 静态方法与实例方法
2016-05-31 14:26 1548静态方法是指不需要声明类的实例就可以使用的方法 实例方法是 ... -
js 动态显示时间(setTimeout)
2016-05-23 15:20 667// 全局变量 var timeoutId ; //开 ... -
jQuery toggle trigger方法使用
2016-05-17 14:44 1104toggle 定义 toggle() 方法用于绑定两个或多个 ... -
js 全局函数一览
2016-05-17 09:46 3901、decodeURI() 参数:string 功能描述: ...
相关推荐
然而在某些情况下,可能需要手动调用Vue实例的$forceUpdate方法来强制重新渲染。这应当作为最后的手段来使用,并且要小心处理。 总结以上,解决Vue下拉框回显并默认选中随机问题的关键在于确保数据加载的正确时机和...
// 在Vue实例的方法中 methods: { handleChange(selectedValue, otherValue) { console.log('选中的值:', selectedValue); console.log('其他需要的值:', otherValue); } } ``` 这样,你可以在`handleChange`...
可以使用 Vue 的计算属性和 Echarts 的 `resizeHandler` 方法来监听窗口大小变化: ```javascript export default { data() { return { chartInstance: null } }, computed: { chartWidth() { return this....
- **$option**、**$el**、**$data**:这都是Vue实例的内置属性,`$options`存储传入的配置项,`$el`指向挂载的DOM元素,`$data`则包含实例的初始数据。 - **_ProxyData()**:这个方法的作用是将`data`中的属性转化...
另一方面,如果在模板中直接使用`this.data-id`,Vue会将其视为尝试访问Vue实例上的`data-id`属性,但是由于`data-id`并不存在于Vue实例的数据对象中,因此无法正确获取其值。 本文也提到了如何在点击事件处理函数...
Proxy 提供了一种机制,允许开发者创建一个对象的代理,这个代理可以拦截并定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。因此,Proxy 代理不仅可以代理对象,还可以代理数组,甚至代理一些内部...
在Vue.js项目中,Element UI库的`el-transfer`组件是一个非常实用的工具,用于在两个列表之间进行数据传输。然而,原生的`el-transfer`并不直接支持拖拽排序功能。为了满足芯资管项目的需求,我们需要利用第三方库...
Vue Select 二级联动第二级默认选中第一个 Option 值的实例详解 在本篇文章中,我们将详细介绍 Vue Select 二级联动第二级默认选中第一个 Option 值的实例。该实例具有很好的参考价值,希望对大家有所帮助。 知识...
3. **实现联动效果**:在Vue实例中,我们可以定义三个数据属性分别存储当前选中的省份、城市和区县。当其中一个值改变时,通过计算属性或watch监听器来更新其他两个选项的可选值。 4. **使用Element UI组件**:利用...
6. Vue.js的key属性:如果存在循环渲染的el-option,确保为每个el-option提供一个唯一的key属性。Vue.js通过key来识别虚拟DOM中的节点,这对于渲染性能和列表更新有重大影响。 示例代码中提到的问题可能与初始化...
在上述代码中,`v-model`绑定的`selectedValue`将保存选中的`value`,而`ref="myselect"`用于为`el-select`组件创建一个引用,这样我们就可以在Vue实例中通过`this.$refs.myselect`访问到这个组件实例。 当需要获取...
在这里,`selectedOption`是Vue实例的一个属性,它会随着用户在下拉框中的选择自动更新。 接下来,日期时间选择器通常通过插件或自定义组件实现。jQuery有许多日期选择器插件,如`bootstrap-datetimepicker`或`...
3. 方案三:深入Element-ui的源码,找到控制popperEl显示隐藏的实例属性。在`select.vue`组件中,`visible`属性决定了popperEl的可见性。因此,可以尝试在滚动事件中修改`visible`的值。例如,可以监听滚动事件,当...
在Vue开发中,数据字典的管理是必不可少的,它涉及到对系统中各种常量值的维护,如性别、证件类型、审批状态等。为了提高代码的可复用性和维护性,我们可以对这些常见的功能进行封装,特别是对于前端展现常用的下拉...
通过理解`v-model`的工作原理以及如何在Vue实例的`data`中初始化它,我们可以轻松地在Element-UI的`el-select`组件中实现预期的默认选中效果。在实际项目开发中,灵活运用这些知识能够提高用户体验,同时降低出错的...
但需要注意的是,如果option的value属性直接使用数字,那么使用`.number`修饰符后,Vue会自动将对应的字符串转换为数字。反之,如果value属性使用的是字符串形式的数字,Vue也会将其转换为数字类型,但这种情况下,...
在JavaScript部分,我们创建Vue实例并定义`data`选项,其中包含`provs`省份数据、空的`citys`城市数据、`selectProv`当前选中的省份和`selectCity`当前选中的城市。当用户在省份选择器中改变选项时,会触发`getProv`...
在el-option上设置disabled属性,该属性接受一个表达式,当表达式为真时,对应的el-option会被禁用。 8. 使用第三方UI组件库:示例代码中使用了Element UI组件库,这是一个流行的基于Vue.js的UI框架。使用Element ...
在对应的Vue实例中,你需要定义`selectedValues`和`options`,并实现`handleSelectChange`方法: ```javascript export default { data() { return { selectedValues: [], options: [ { value: 'option1', ...
这允许我们跟踪用户的选择,并自动同步至Vue实例的数据属性。 **示例代码:** ```html 性别: 男 女 ``` **解释:** - `name`属性确保单选按钮组内只有一个选项被选中。 - `value`属性用于定义选中此选项时,...