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的官网文档

https://cn.vuejs.org/v2/guide/forms.html

ps:官网上的vue的文档非常好,喜欢vue的没事可以多来看看!

前端框架VUE----表单输入绑定的更多相关文章

  1. Vue表单输入绑定(文本框和复选框)

    文本框 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">  ...

  2. Vue表单输入绑定

    <h3>基础用法</h3> <p>你可以用<strong>v-model</strong>指令在表单input,textarea以及sele ...

  3. vue 表单输入绑定 checkbox

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 前端MVC Vue2学习总结(五)——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  5. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  6. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

  7. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  8. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...

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

    事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  10. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

随机推荐

  1. Python3学习之路~6.6 类的继承

    Inheritance 继承 面向对象编程 (OOP) 语言的一个主要功能就是“继承”.继承是指这样一种能力:它可以使用现有类的所有功能,并在无需重新编写原来的类的情况下对这些功能进行扩展.通过继承创 ...

  2. 009-docker-安装-redis:5.0.3

    1.搜索镜像 docker search redis 2.拉取合适镜像 docker pull redis:5.0.3 docker images 3.使用镜像 docker run -p 6379: ...

  3. Spark DataFrame列的合并与拆分

    版本说明:Spark-2.3.0 使用Spark SQL在对数据进行处理的过程中,可能会遇到对一列数据拆分为多列,或者把多列数据合并为一列.这里记录一下目前想到的对DataFrame列数据进行合并和拆 ...

  4. 【LeetCode每天一题】Longest Substring Without Repeating Characters(最长无重复的字串)

    Given a string, find the length of the longest substring without repeating characters. Example 1:    ...

  5. [Java in NetBeans] Lesson 03. More Variables / Type Casting

    这个课程的参考视频在youtube. 主要学到的知识点有: It is different from python, that "1" only present string &q ...

  6. [LeetCode] 849. Maximize Distance to Closest Person_Easy tag: BFS

    In a row of seats, 1 represents a person sitting in that seat, and 0 represents that the seat is emp ...

  7. numpy.loadtxt用法

    numpy.loadtxt(fname, dtype=, comments='#', delimiter=None, converters=None, skiprows=0, usecols=None ...

  8. 前端基础进阶(五):全方位解读this

    https://segmentfault.com/a/1190000012646488  https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...

  9. xcode如何支持8.0以下

    1. shell打开 open  /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSuppor ...

  10. 虚拟机 liunx系统以 root 身份登录权限

    开启虚拟机 打开终端开启root账户 :sudo passwd -u root 输入当前用户的密码   为root账户设置密码:sudo passwd root 设置root密码,输入两次   测试r ...