v-model的原理+使用方法

news/2024/7/10 3:06:36 标签: vue

一：什么是v-model？

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

二：原理

v-model其实是一个语法糖
背后包含两个操作

v-bind动态绑定一个value属性
v-on给当前元素绑定input事件
也就是说以下两段代码等价

<input type="text" v-model="message">
<!--等同于下面-->
<input type="text"
	   v-bind:value="message"
	   v-on:input="message=$event.target.value">

具体·例子如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <!-- v-model="变量" 实现双向数据绑定
                给表单元素，增加v-model 表单的值变化，变量也会有变化 。变量有变化，表单的值也会有变化
            -->
            <input type="text" v-model="msg">
            {{msg}}
            <button v-on:click="change()">按钮</button>
        </div>

        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'hello'
                },
                methods:{
                    change(){
                        // 修改msg的值
                        this.msg=this.msg+'阿'
                    }
                }
		
            })
        </script>
    </body>
</html>

三：使用方法+注意事项

v-model 本质上不过是语法糖，
可以用 v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。