Vue表单数据绑定及事件

表单数据绑定

数据绑定

做表单数据交互的时候，前端最好定一个json，json的key和后端要求的字段保持一致，这样，后期传参的时候会更方便。

1、输入框

<div>姓名：<input type="text" v-model="user.name"></div>
<div>年龄：<input type="number" v-model="user.age"> </div>

2、单选框

 对于单选框需要给input设置value，value是选中的值

<div>性别：
  <input type="radio" name="sex" value="0" v-model="user.sex">男
  <input type="radio" name="sex" value="1" v-model="user.sex">女
</div>

3、下拉菜单

单选：对于下拉菜单单选，option中间的是给用户看的，option的value是选中的值 。

多选：对于下拉菜单多选的时候，初始值需要是数组。

<!--下拉菜单单选， -->
<!-- <div>职业：
  <select v-model="user.job">
  <option value="">--请选择--</option>
  <option value="1">php工程师</option>
  <option value="2">web工程师</option>
</select>
</div> -->
<div>职业：
  <select v-model="user.job">
    <option value="" disabled>--请选择--</option>
    <option  v-for="item in jobs" :value="item.id" :key="item.id">{{item.name}}</option>
  </select>
</div>

<!-- 下拉菜单多选 -->
<div>零食：
  <select v-model="user.lingshi" multiple>
    <option value="">--请选择--</option>
    <option v-for="item in lingshis" :key="item.id" :value="item.id">{{item.name}}</option>
  </select>
</div>

4、多选框

对于多选框来说，如果初始值是[],那么最后的结果就是[];如果初始值不是数组，那结果就是boolean。

<div>
  <!-- value对应的值如果想要的是number,需要加上v-bind  -->
  爱好：
  <input type="checkbox" :value="1" v-model="user.hobby">看电视
  <input type="checkbox" :value="2" v-model="user.hobby">打游戏
  <input type="checkbox" value="3" v-model="user.hobby">写代码
  <input type="checkbox" value="4" v-model="user.hobby">唱歌
</div>
<div>
  <!-- 对于多选框来说，默认，勾上就是true，不勾就是false -->
  <input type="checkbox" v-model="user.isAgree">同意协议{{user.isAgree}}
</div>

表单修饰符

.lazy 输入框失去光标，才修改模型数据

.number 将得到的数据转为number类型

.trim 去除空格

表单事件

单选框、多选框、下拉菜单如果要绑定事件，都是change，不要使用click

事件处理

如何绑定事件？

<div id="app">
  <!-- 1.通过v-on:事件名="方法" -->
  <button v-on:click="fn()">点击弹个1</button>

  <!-- 2.v-on 可以简写为@ -->
  <button @click="fn()">点击弹个1</button>

  <!-- 3.如果没有参数，() 可以省略 -->
  <button @click="fn">弹个1</button>

  <!-- 4.如果逻辑只有1句话，可以直接在html中书写 -->
  <h3>{{name}}</h3>
  <button @click="name='王昭君'">王昭君</button>

  <h3>{{arr}}</h3>
  <button @click="arr=[]">全部删除</button>
</div>

事件对象event

显示传参：$event 获取event对象

隐式传参，注意：不写()

<div id="app">
        <!-- 显示传参：$event 获取event对象 -->
        <button @click="getEvent($event)">点击获取event-1</button>

        <!-- 隐式传参，注意：不写() -->
        <button @click="getEvent">点击获取event-2</button>
        <button @click="getEvent($event,3)">e,3</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{},
            methods:{
                getEvent(e){
                    console.log(e);
                },
                getEvent2(e,n){
                    console.log(e,n);
                }
            }
        })
      
    </script>

阻止默认事件 阻止事件传播

// 阻止默认
e.preventDefault() 

// 阻止传播
e.stopPropagation()

事件修饰符

-prevent 阻止默认事件
.stop 阻止事件传播
.self 触发的目标元素是自己才执行
.once 一次性事件绑定
.capture 实现事件捕获
.left 左键
.right 右键
.up 上键
.down 下键
.enter 回车
.13 键码

$set

json，如果定义data的数据时没有某个字段，后面添加的字段，改变，页面不会渲染。

// 1.this.$set(json,key,value)
 this.$set(this.json,"sex","男")

// 2.Vue.set(json,key,value)
Vue.set(this.json,"sex","男")

数组，后端返回了数据，但是前端自己添加了某个字段，该字段改变，页面不会渲染。

// 1.取出要修改的数据
let obj=this.arr[index];
// 2.做修改
obj.sex="男"
// 3.放回去
// this.$set(this.arr,index,obj)
// Vue.set(this.arr,index,obj)
this.arr.splice(index,1,obj)

数组刷新视图七个方法，数据变化视图会变

shift()，头部删除

unshift()，头部添加

push()，尾部添加

pop()，尾部删除

splice () ，向/从数组中添加/删除项目，然后返回被删除的项目

sort()

reverse()