vue 之 表单输入绑定

vue的核心:声明式的指令和数据的双向绑定。

那么声明式的指令,已经给大家介绍完了。接下来我们来研究一下什么是数据的双向绑定?

另外,大家一定要知道vue的设计模式:MVVM

M是Model的简写,V是View的简写,VM就是ViewModel。

单向绑定和双向绑定的区别?

单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。

有单向绑定,就有双向绑定。

如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。

什么情况下用户可以更新View呢?填写表单就是一个最直接的例子。当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定。

其实单项数据也有双向绑定的意思,不过页面变动后数据的变化不会发生自动更新。

我们可以这样认为:双向数据绑定=单向数据绑定+UI事件监听。

我们先看个vue中双向数据绑定的例子:

<body>
  <div id="app">
    <input type="text" v-model="meg">
    <p>{{data}}</p>
  </div>

  <script>
    var app = new Vue({
      el:‘#app‘,
      data :{
        meg:‘‘
      }

    })
  </script>
</body>

再简单不过了,效果显示,当我们在input输入框中输入内容的时候,下面p标签同步显示内容。这就是最典型的双向数据绑定的例子。vue里使用v-model实现此想法。

那么我们看一下v-model的实现原理是怎样的呢?

通过官网的介绍,我们知道v-mode指令是v-bind:vlaue 和v-on:input的结合体。

看个例子吧,同时给大家介绍了计算属性getter的用法。

<!-- <input type="text" v-model = ‘usernameValue‘> -->

        <!-- 等价于: -->
        <input type="text" v-bind:value=‘usernameValue‘ @input=‘inputHandler‘>
        <button @click=‘commitHandler‘>提交</button>
        <!-- ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例 -->
        <div class="list" ref = ‘item‘></div>
var set = new Vue({
            el:‘#set‘,
            data:{
                username:‘‘,
                txt:‘‘
            },
            methods:{
                commitHandler(){

                    this.$refs.item.innerHTML = this.usernameValue;
                },
                inputHandler(e){
                    this.usernameValue = e.target.value;
                }
            },
            computed:{

                usernameValue:{
                    get(){
                        return this.username;
                    },
                    set(newValue){
                        this.username = newValue;
                    }
                }
            }  

看完上个例子之后,相信大家对v-model实现双向数据绑定和计算属性的setter方法一定有个新的认识了。

接下来我们看看v-model的一些基础用法!

v-model

v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

注意:v-model只适用在表单控件中。

  

vue.js官方文档:https://cn.vuejs.org/v2/guide/forms.html  

原文地址:https://www.cnblogs.com/gaoya666/p/9079190.html

时间: 2024-10-08 11:35:31

vue 之 表单输入绑定的相关文章

一起学Vue之表单输入绑定

在Vue进行前端开发中,表单的输入是基础且常见的功能,本文以一个简单的小例子,简述v-model数据绑定的用法,仅供学习分享使用,如有不足,还请指正. 基础用法 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理.v-model 会忽

vue的表单输入绑定

1.单行绑定 <p>{{logintype}}</p> <input type="text" v-model="logintype"> <!-- 单行绑定 --> 2.多行绑定 <textarea rows="10" cols="20" v-model="logintype"></textarea> <!-- 多行绑定 -->

vue之表单输入绑定

原文地址:https://www.cnblogs.com/tianya-guoke/p/10779691.html

Vue基础篇--7表单输入绑定input

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

VUE:事件处理和表单输入绑定

事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>07_事件处理</title> </head> <body> <!-- 1.绑定监听: v-on:xxx="fun" @xxx="fun" @xxx="fun(参数)" 默认事件形参:event 隐

Vue.js 实战教程 V2.x(12)表单输入绑定

12表单输入绑定 12.1基础用法 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 文本 <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> 多行文本 <spa

Vue表单输入绑定

基础用法 你可以用v-model指令在表单input,textarea以及select元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但是v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据. v-model会忽略所有表单元素的value, checked, selected特性的初始值而总是将Vue实例的数据作为数据来源.你应该通过JavaScript在组件的data选项中声明初始值. (1) 文本 <input v-model="me

Vue知识整理13:表单输入绑定(v-model)

text:将输入框等表单,通过data变量实现数据绑定. textbox:数据绑定 3.checkbox和redio组件: 注意:data数据变量中,checkbox有可能会有多个结果,所以用数组: 4:可以通过设置提交按钮来实现数据的提交: 或是通过设置数组变量,一起收集所有控件上的内容. 原文地址:https://www.cnblogs.com/KKSoft/p/11715735.html

表单输入绑定

vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V是View的简写,VM就是ViewModel. 单向绑定和双向绑定的区别? 单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新. 有单向绑定,就有双向绑定. 如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向