vue提供了v-model双向绑定指令，用来辅助在不操作DOM的前提下，快速读取表单的数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <p>用户名是：{{username}}</p>

    <input type="text" v-model="username">

    <hr>

    <p>选中的省份是：{{provonce}}</p>

    <select v-model="provonce">

        <option value="">请选择</option>

        <option value="1">北京</option>

        <option value="2">河北</option>

        <option value="3">黑龙江</option>

    </select>

</div>

<script>

    var vm = new Vue({

        el:"#app",

        data:{

            username: 'zs',

            provonce: ''

        }

    })

</script>

</body>

</html>

v-model指令修饰符

number 自动将用户的输入值转为数值类型 <input v-model.lazy="age">

trim 自动过滤用户输入的空白字符 <input v-model.lazy="msg">

lazy 在"change"时而非"input时更新" <input v-model.lazy="msg">

vue的双向绑定规则的更多相关文章

  1. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  2. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  3. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  4. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  5. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  6. vue数据双向绑定

    Vue的双向绑定是通过数据劫持结合发布-订阅者模式实现的,即通过Object.defineProperty监听各个属性的setter,然后通知订阅者属性发生变化,触发相应的回调. 整个过程分为以下几步 ...

  7. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  8. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  9. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  10. vue的双向绑定原理解析（vue项目重构二）

    现在的前端框架 如果没有个数据的双向/单向绑定,都不好意思说是一个新的框架,至于为什么需要这个功能,从jq或者原生js开始做项目的前端工作者,应该是深有体会. 以下也是个人对vue的双向绑定原理的一些 ...

随机推荐

  1. ubantu下的java的发布

    1.先检查是否安装过 java version 2.卸载的命令 sudo apt-get remove openjdk* 3.创建存放jdk的目录 sudo mkdir /usr/lib/jvm 4. ...

  2. 最大流模板（EK，Dinic

    一.EK EK算法:用bfs找增广路直到找不到为止.找到则更新最大流和残余网络,找不到则结束. 残余网络:对于一条走过的边,其正向边权值减少相应值,反向边权值增加相应值(用于反悔). 增广路:从所求起 ...

  3. 网站提示：You Don’t Have Permission To Access

    测试 apache集成环境访问网站,突然出现错误提示"You don't have permission to access /index.php on this server." ...

  4. 解决 VSCode git commit 时 No such file or directory 报错问题

    在git 进行 commit 时出现了 Git: .git/hooks/pre-commit: line 2: ./node_modules/pre-commit/hook: No such file ...

  5. AndroidQ 打通应用层到HAL层（转）

    1. 参考https://blog.csdn.net/qq_34211365/category_9903135.html 直通式,绑定式,从应用端调到hal接口,亲自实现能够更加理解

  6. 直播平台搭建源码，canvas 画一条波浪线 进度条

    直播平台搭建源码,canvas 画一条波浪线 进度条 <template>  <view>    <canvas :style="{'width': width ...

  7. Vue 数组响应

    响应渲染 在Vue中,被渲染的数据都是响应式的,即Vue实例中进行改变页面中也会跟着改变: <body> <div id="app"> <p>{ ...

  8. 幻方（4n+2暂时看不懂）

    奇数阶幻方 Siamese方法(Kraitchik 1942年,pp. 148-149)是构造奇数阶幻方的一种方法,说明如下: 把放置在第一行的中间. 顺序将等数放在右上方格中. 当右上方格出界的时候 ...

  9. 基于Antlr的Modelica3.5语言解析

    背景 Modelica语言是一种统一面向对象的系统建模语言 官方文档中明确写明了语法规范 在附录的第一章词法,第二章语法都完整的罗列的语言规范,对于Antlr适配特别好 只需要把[]修改为Antlr的 ...

  10. JavaScript的知识点整理

    最近写了一个员工管理作业,暴露了一些问题就是. JS的查找标签的时候,要确定返回的是DOM对象还是数组,document对象可以是任意dom对象,将查询范围限制在当前dom对象, 1.直接查找标签 d ...