vue学习笔记
1.表单提交与验证
<el-form ref="form" v-model="form" rules = "rules">
<el-form-item>
<el-button type="primary" @click="submitForm">确 定</el-button>
</el-form-item>
</el-form>
//提交事件
methods:{
submitForm(){
this.$refs["form"].validate(valid =>{
if(valid){
//todo
}
})
}
}
2.this.$refs的用法(转自:https://www.cnblogs.com/yanggb/p/11536282.html)
一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值。
但是使用了ref绑定之后,我们就不需要再获取dom节点了,可以直接在上面的input上绑定input1,然后$refs里面调用就行。
在JavaScript里面通过this.$refs.input1去调用,这样的做法实际上是访问VUE虚拟出来的DOM,可以有效减少获取/操作DOM节点的性能消耗。
<div id="app"> <input type="text" ref="input1" /> <button @click="add">添加</button> </div>
methods:{ add:function(){ this.$refs.input1.value = "test"; // 有效减少获取dom节点的性能消耗 } }