v-model

由于绑定了v-model,我们对message进行修改会反应到页面上。怎么对message进行修改？需要一个按钮button
这是第一步，改message，ui会自动变化，如果用户改input，message会自动变化

这就是双向绑定，改内存，页面自动变化，改页面，内存自动变化

<template>
  <div id="app">
    <input v-model="message" placeholder="edit me"/> 
  <p>message is: {{ message}}</p>
  <p><button @click = "message = 'frank'">set message to zhang</button></p>
  </div>
</template>

<script>


export default {
  name: 'App',

  data(){//需要在data里声明message，因为绑定了v-model
    return {
      message: 'hi'//每个input都有对应变量
    }
  },
  components: {
   
  }
}
</script>

2.多行文本

把input改成textarea

image.png

3.复选框

不需要添加id，id是给label加for。有经验前端用label标签包裹，保住之后点击label里的任何相当于点击input

<template>
  <div id="app">
    <label>
   <input type="checkbox"  v-model="x"  />
   <span>x:{{ x }}</span>
   </label>
  </div>
</template>
<script>
export default {
  name: 'App', 
  data(){//需要在data里声明message，因为绑定了v-model
    return {
      x: true//每个input都有对应变量 选中是true，没选是false注意单引号
    };
  },
  components: {}
};
</script>

4.多个复选框

image.png
image.png

三个v-model的value没有区别
数据库如果要存数字,用冒号绑定
<input type ="checkbox" v-model="x" :value="1">

5.单选按钮radio

<template>
  <div id="app">
    你想要：{{x}}
    <hr/>
    <select v-model="x">
      <option value>-</option>
      <option v-for="item in array"
       :value="item.value" :key="item.value">{{item.text}}</option>

    </select>
    
  </div>
</template>
<script>
export default {
  name: 'App', 
  data(){
    return {
      array:[
        { text: "抽盐",value:1},
        {text: "hejiu",value:2}
      ],
      x:""//多选的话就是数组：[]
    };
  },
  components: {}
};
</script>

6.from表单

提交元素 要写一个登陆框，第一行用户名

回车时刷新，用form标签，里面有登陆按钮button
不想页面刷新，想保存数据，监听@submit=onSubmit
阻止默认动作@submit.prevent="onSubmit"
如果不会用form的前端开发着，就是监听input

image.png

V-MODEL 12min

原理

一个组件上的v-model默认会利用名为value的props和名为input的事件，但是像单选框复选框等类型的输入控件可能会将valueattribute用于不同目的，model选项可以用来避免这样冲突

v-model相当于写两件事情
1.:value="user.username"
2.监听组件的事件,获取他的值@input="user.username = $event.target.value"这是#model等价写法#
model默认input是一个元素，event是一个原生event。绑定value等于一个东西，然后@input让东西等于$event.target.value

myinput封装

1.input怎么触发事件，用户在修改的时候，必须在input上绑定得到value，当input变化的时候，不能直接改value的值因为还要触发个input事件

2.所以@input="onInput"，当input触发了oninput后，就再次触发input，包装一个有target.value的event，如图

methods: {
    onInput(e){
        const event = {
            target:{value:e.target.value}
};
        this.$emit("input", event);
}
}

必须触发input事件，event中必须含有target，里面必须有value，value的值必须是最新的值
自定义的组件不需要构建target

methods: {
        onInput(e){
            const value = e.target.value;
            this.$emit("input",value);a
        }
    }

image.png

注意：

在myinput.vue里，input标签不要写成<input v-model="value"/>

规范写法：这样少写个methods

<input :value="value" @input="$emit('input',$event.target.value)">

原因：相当于<input :value="value" @input="value = $event.target.value"/>会对value进行赋值，当然不能对props里的value修改赋值
解决方法computed里_value对上面value进行封装

computed:{
    _value:{
        get(){ return this.value},
        set(newValue){this.$emit("input",newValue);}
  }
}

input标签改写成

<input :value="_value" @input="_value = $event.target.value"/>

上文还可以简写成

<input v-model="_value" />

多声明一个"_value"比较麻烦，简单方法写成mixin把所有需要封装的放进mixin里

面试题 v-model的双向绑定

1.解释下v-model的作用，

原理
一个组件上的v-model默认会利用名为value的props和名为input的事件，但是像单选框复选框等类型的输入控件可能会将valueattribute用于不同目的，model选项可以用来避免这样冲突

v-model相当于写两件事情
1.:value="user.username"
2.监听组件的事件,获取他的值@input="user.username $event.target.value"这是model等价写法
model默认input是一个元素，event是一个原生event。绑定value等于一个东西，然后@input让东西等于$event.target.value可以实现绑定一个变量，在变量变化的时候，ui变化。用户改变ui的时候，数据也会变化

2.v-model是v-bind:value和v-on:input的语法糖

v-on:input="???"分两种情况
原生input就是"xxx=$event.target.value"
自定义组件："xxx=$event"