我们知道vue中 为简化表单输入 提供了v-model 的语法绑定 将 vue的属性和表单元素进行了双向绑定 大大简化了表单数据操作的数据绑定

那么v-model 是如何实现双向绑定的呢？

今天我们来做个最简单的模拟 照例 先上代码

<body>
<div id="app">
    【v-model】
    <input type="text" v-model="message">
    {{message}}

    【模拟】
    <input type="text" @input="changeInput" :value="message">
</div>
</body>

<script language="JavaScript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        },
        methods: {
            changeInput: function (e) {
                this.message = e.target.value;
            }
        }
    })

    //组件化应用构建

</script>

我们知道v-model 与数据绑定后 输入框中的数据改变时，vue的属性也会改变，反之 当vue的属性改变之后，输入框中的值也发生改变

我们进行模拟时就注意这两个方面即可
1.输入vue属性改变 这个通过@input 属性可以实现 当输入框内容改变时 这个方法将会被调用
那么我们可以在这个方法中对vue 属性进行赋值
2.当属性发生改变后 input 内容发生改变 也就是input的 value 属性发生了改变
那么我可以通过 vue属性与input 输入框的value 属性进行绑定就可以实现

Vue基础篇 之 v-model 模拟的更多相关文章

  1. Vue 基础篇

    Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...

  2. Vue 基础篇---computed 和 watch

    最近在看前端 Vue方面的基础知识,虽然前段时间也做了一些vue方面的小项目,但总觉得对vue掌握的不够 所以对vue基础知识需要注意的地方重新撸一遍,可能比较零碎,看到那块就写哪块吧 1.vue中的 ...

  3. vue基础篇---vue组件

    vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...

  4. vue基础篇(一)

    1.简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手 ...

  5. vue基础篇---路由的实现《2》

    现在我们来实现这样一个功能: 一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换: 编写父组件 index.html <div id="app"> <s ...

  6. vue基础篇---vue组件《2》

    定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...

  7. vue基础篇---watch监听

    watch可以让我们监控一个值的变化.从而做出相应的反应. 示例: <div id="app"> <input type="text" v-m ...

  8. vue基础篇---生命周期

    每个钩子函数都在啥时间触发 beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. created 实例已经创建完成之 ...

  9. vue基础篇---路由的实现

    路由可以有两种实现方式,一种是标签形式的,一种是js实现. 标签: <router-link to='/city'> 北京 </router-link> 标签还有另外一种实现方 ...

随机推荐

  1. CSS3新特性的概述

    CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 6.CSS3动画 下面分别说一说以上六类都有哪些内容 CSS3 ...

  2. 给一个非矩形数组（Nonrectangular Arrays）

    Nonrectangular Arrays(非矩形数组)  public class Test {     public static void main(String[] args) {       ...

  3. 文件上传——IIS6.0解析漏洞

    介绍 IIS6.0漏洞可分为目录漏洞和文件漏洞 目录漏洞 访问*.asp格式命令的文件夹下的文件,都会被当成asp文件执行 文件漏洞 畸形文件命名 123.asp -> 123.asp;.txt ...

  4. Windows安装使用wget

    Windows安装使用wget 0x01 什么是wget 你肯定知道,否则就不会安装了 0x02 下载wget 下载地址:https://eternallybored.org/misc/wget/ 在 ...

  5. Java线程内存模型-JVM-底层原理

    public class Demo1 { private static boolean initFlag=false; public static void main(String[] args) t ...

  6. Java三大结构

    Java三大结构 顺序结构(基本结构) 选择结构 循环结构 1. 顺序结构 平时一般语句都默认遵循顺序结构 2. 选择结构 2.1 if单选择结构 语法 if(布尔表达式){ //布尔表达式为true ...

  7. For-Each循环（增强型For循环）

    public class Demo077 { public static void main(String[] args) { int[] array ={11,2}; System.out.prin ...

  8. 全国省市区县和乡镇街道行政区划矢量边界坐标经纬度地图最新数据免费下载 支持shp geojson json sql格式

    关键词: 省市区三级, 乡镇四级, 全国, 行政区划, 坐标边界, 矢量数据, 地理围栏, 免费下载, 2018 2019 2020 2021 2022年份, 最新数据, 长期更新, 开源维护, 支持 ...

  9. SSM整合_年轻人的第一个增删改查_新增

    写在前面 SSM整合_年轻人的第一个增删改查_基础环境搭建 SSM整合_年轻人的第一个增删改查_查找 SSM整合_年轻人的第一个增删改查_新增 SSM整合_年轻人的第一个增删改查_修改 SSM整合_年 ...

  10. C# 11 对 ref 和 struct 的改进

    前言 C# 11 中即将到来一个可以让重视性能的开发者狂喜的重量级特性,这个特性主要是围绕着一个重要底层性能设施 ref 和 struct 的一系列改进. 但是这部分的改进涉及的内容较多,不一定能在 ...