Vue自学笔记(3)——双向数据绑定v-model

前言

今天主要给大家介绍双向数据绑定相关内容。在介绍内容之前先介绍一下Vue的开发架构——MVVM。啥是MVVM的？它是Model-View-ViewModel的简写，简单来说呢，就是model层可以影响view层，反过来view层也可以影响model层，model层可以简单理解为script框起来的那些东西，也就是业务逻辑层，view层就是视图层，就是浏览器能看到的内容。知道这些就够了。

双向数据绑定

表单绑定v-model

• 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
• Vue中使用v-model指令来实现表单元素和数据的双向绑定。
• 案例的解析：
  • 当我们在输入框输入内容时
  • 因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
  • 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生相应的改变
  • 所以，通过v-model实现了双向的绑定。
• 当然，我们也可以将v-model用于textarea元素

<template>
  <div id="app">
    {{msg}}
    <br/>
    <input type="text" v-model="msg">
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return {
      msg:"12345"
    }
  }
}
</script>

input框中的内容和{{ }}中的内容是同步的，即达到了双向数据绑定的效果。

v-model原理

• v-model其实是一个语法糖，它的背后本质上是包含两个操作：
  • 1.v-bind绑定一个value属性
  • 2.v-on指令给当前元素绑定input事件
• 也就是说下面的代码，等同于下面的代码：

<input type="text" v-model="message">
等同于
<input type="text" :value="message" @input="message=$event.target.value">

v-model：radio

• 当存在多个单选框时

<template>
    <div id="app">
        <label for="male">
            <input type="radio" id="male" v-model="sex"/>男   
        </label>
        <label for="female">
            <input type="radio" id="female" v-model="sex"/>女   
        </label>
        <h2>您选择的性别是：{{ sex }}</h2>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sex: '男'
        }
    }
}
</script>

v-model:checkbox

1. 单选框

• v-model即为布尔值
• 此时input的value并不影响v-model的值

<template>
    <div id="app">
        <label for="license">
            <input type="checkbox" id="license" v-model="isAgree"/>同意协议   
        </label>
        <h2>您选择的是：{{ isAgree }}</h2>
        <button :disable="!isAgree">下一步</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isAgree: false
        }
    }
}
</script>

2. 多选框

• 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组
• 当选中某一个时，就会将input的value添加到数组中

<template>
    <div id="app">
        <input type="checkbox" value="篮球" v-model="hobbies"/>篮球   
        <input type="checkbox" value="足球" v-model="hobbies"/>足球   
        <input type="checkbox" value="乒乓球" v-model="hobbies"/>乒乓球   
        <input type="checkbox" value="羽毛球" v-model="hobbies"/>羽毛球   
        <h2>您的爱好是：{{ hobbies }}</h2>    
    </div>
</template>

<script>
export default {
    data() {
        return {
            hobbies: []
        }
    }
}
</script>

v-model: select

• 和checkbox一样，select也分单选和多选两种情况
• 单选：只能选中一个值
  • v-model绑定的是一个值
  • 当我们选中option中的一个时，会将它对应的value赋值到mySelect中

<template>
    <div id="app">
        <select name="abc" v-model="fruit">
            <option value="苹果">苹果</option>    
            <option value="香蕉">香蕉</option>    
            <option value="榴莲">榴莲</option>    
            <option value="葡萄">葡萄</option>    
        </select>  
        <h2>您选择的水果是：{{ fruit }}</h2>    
    </div>
</template>

<script>
export default {
    data() {
        return {
            fruit: '香蕉'
        }
    }
}
</script>

• 多选：可以选中多个值
  • v-model绑定的是一个数组
  • 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

<template>
    <div id="app">
        <select name="abc" v-model="fruit" multiple>
            <option value="苹果">苹果</option>    
            <option value="香蕉">香蕉</option>    
            <option value="榴莲">榴莲</option>    
            <option value="葡萄">葡萄</option>    
        </select>  
        <h2>您选择的水果是：{{ fruits }}</h2>    
    </div>
</template>

<script>
export default {
    data() {
        return {
            fruits: []
        }
    }
}
</script>

input中的值绑定

就是动态的给value赋值而已。

<template>
    <div id="app">
        <label v-for="item in originHobbies" :for="item">
            <input type="checkbox" :value="item" :id="item" v-model="hobbies"/>{{ item }}
        </label> 
    </div>
</template>

<script>
export default {
    data() {
        return {
            hobbies: [],
            originHobbies: ['篮球','足球','乒乓球','羽毛球','台球']
        }
    }
}
</script>

修饰符

• lazy修饰符：
  • 默认情況下，v-model默认是在input事件中同步输入框的数据的。
  • 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变
  • lazy修饰符可以让数据在失去焦点或者回车时才会更新

<input type="text" v-model.lazy="message">

• number修饰符：
  • 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理
  • 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理
  • number修饰符可以让在输入框中输入的内容自动转成数字类型

<input type="number" v-model.number="age">

• trim修饰符：
  • 如果输入的内容首尾有很多空格，通常我们希望将其去除
  • trim修饰符可以过滤内容左右两边的空格

<input type="text" v-model.trim="message">

手动实现v-model

<template>
  <div class="hello">
  	<!-- <input type="text" v-model="aaa"> -->
    <input type="text" :value="aaa" @input="aaa=$event.target.value">
    {{ aaa }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      aaa: ''
    }
  }
}
</script>

补充ref用法：
ref是vue中的特殊属性，有点类似于id的用法，如下：

<template>
  <div id="app">
    <div ref="box_1">我是一个box</div>
    <input type="button" value="点击改变box样式" @click="change_style()">
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return {
      msg:"12345"
    }
  },
  methods:{
    change_style(){
      window.console.log(this.$refs.box_1)//输出对应dom
      this.$refs.box_1.style.background = 'red'
    }
  }
}
</script>

点击按钮，box背景色就变成红色。注意，refs前面要有$符号。

未完待续。。。

本人原创，转载请标明出处，谢谢合作！