<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="vue2.2.js"></script>

    </head>

    <body>

        <div id="app">

            <input type="text" v-model="userName" />

            <input type="text" V-model.lazy="msg" />

            <input type="text" V-model.number="num" />

            <p>{{userName}}</p>

            <p>{{msg}}</p>

            <p>{{num}}</p>

            <!--.lazy：取代 imput 监听 change 事件。

            .number：输入字符串转为数字。

            .trim：输入去掉首尾空格。-->

            <!--通过v-once指令能执行一次性的插值，当数据变化时，插值处的内容不会更新。-->

            <p v-once>一次改变{{userName}}</p>

        </div>

        <script>

            var vm = new Vue({

                el: "#app",

                data: {

                    userName: "张三",

                    msg: "懒加载",

                    num: "222222"

                }

            })

            vm.userName = '李四'

        </script>

    </body>

</html>

双向绑定原理：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue双向绑定的核心原理getter和setter</title>

    </head>

    <body>

        <input type="text" id="inp" value="admin" />

        <script>

            var inp = document.getElementById("inp");

            Object.defineProperty(inp, "v-model", { //对象自定义按键修饰符别名

                set: function(val) {

                    this.value = val //this指的是input

                },

                get: function() {

                    return this.value;

                }

            })

            console.log(inp['v-model'])

            inp["v-model"] = "hello"

            //vue就是利用这个set/get进行双向绑定,为什么我们一直要说是setter/getter

            //因为setter与getter是面向对象语言中的一个特性,利用getter可以获取对象的属性,利用setter可以设置对象的属性.

        </script>

    </body>

</html>

vue2.0 v-model指令的更多相关文章

  1. vue2.0  之 directive指令 (自定义)

    指令 一.定义: 指令只一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致 ...

  2. vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案

    在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue" ...

  3. Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  5. vue2.0自定义指令

    前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...

  6. Vue2.0 【第二季】第1节 Vue.directive自定义指令

    目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...

  7. Vue2.0 【第一季】第7节 v-bind指令

    目录 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v-bind缩写 绑定CSS样式 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v- ...

  8. Vue2.0 【第一季】第6节 v-model指令

    目录 Vue2.0 [第一季] 第6节 v-model指令 第6节 v-model指令 一.一个最简单的双向数据绑定代码: 二.修饰符 三.文本区域加入数据绑定 四.多选按钮绑定一个值 五.多选绑定一 ...

  9. Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题

    目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...

  10. Vue2.0 【第一季】第2节 v-if v-else v-show 指令

    目录 Vue2.0 [第一季]第2节 v-if v-else v-show 指令 第二节 v-if v-else v-show 指令 2.1 v-if指令.v-else指令: 2.2 v-show的使 ...

随机推荐

  1. css class嵌套

    css 代码: <style> .chose_bonus { font-size:9px;width:400px;border: 2px solid #dddddd;margin-top: ...

  2. 在调试状态查看DateTable里的数据信息

  3. HDU4009 Transfer water —— 最小树形图 + 不定根 + 超级点

    题目链接:https://vjudge.net/problem/HDU-4009 Transfer water Time Limit: 5000/3000 MS (Java/Others)    Me ...

  4. 2. Ext中关于Ext.QuickTips.init()的使用

    转自:http://www.cnblogs.com/jianglan/archive/2011/08/26/2154120.html 在extJS的例子中,大部分都在程序第一行使用了如下语句:Ext. ...

  5. vs 中switch语句快捷键列出枚举

    先switch然后两下tab会补完到default,光标显示在switch后的变量这时输入枚举,输完后回车,自动补完所有枚举的case

  6. java笔记之IO4文本复制

    * 复制文本文件. *  * 数据源:从哪里来 * a.txt -- 读取数据 -- FileInputStream  *  * 目的地:到哪里去 * b.txt -- 写数据  -- FileOut ...

  7. HDU 2914 Triangle (Fibnacci 数)

    题意:给你一个长度为 n 的木棒,求至少拿掉几根使得剩余的木棒构成不了三角形. 析:为了保证不形成三角形,所以保证两边之和等于最大边是最优,这不就是Fibnacci 数么,由于 n 很小,if-els ...

  8. [App Store Connect帮助]八、维护您的 App（4.2）查看评分与评论

    您可以查看 App 的总评分或单个顾客评论.如有必要,您可以针对某条评论报告问题. [注]顾客可以为您的 iOS 和 macOS App 评分并撰写评论,但只能为 Apple TVOS App 评分. ...

  9. [POI2007]洪水pow

    Description AKD市处在一个四面环山的谷地里.最近一场大暴雨引发了洪水,AKD市全被水淹没了.Blue Mary,AKD市的市长,召集了他的所有顾问(包括你)参加一个紧急会议.经过细致的商 ...

  10. _bzoj1051 [HAOI2006]受欢迎的牛【强联通】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1051 保存tarjan模版. 求强联通分量,缩点. #include <cstdio& ...