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节点的性能消耗
    }
  }