<!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. W5500EVB UDP模式的測试与理解

    之前的博文中已经介绍过W5500EVB 在TCP模式下的两种(Server及Client)传输数据的实现过程,那么传输控制协议中,UDP也是很经常使用的.这样的无连接的协议在很多其它场合为用户提供了便 ...

  2. Ubuntu 12.10安装vmware-tools

    1:[菜单]->[虚拟机]->[重新安装vmware tools]出现 图中下边说的很清楚,解压然后执行 2:把压缩包拷贝到 /home/下,然后执行 :tar -zxvf v[按住tab ...

  3. 说说Java观察者模式

    观察者模式是对象行为模式中的一种,在平时项目中经常被用来解耦对象之间的依赖. 观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖它的对象都得到通知并自动更新.别名:De ...

  4. hdu 5534

    题目描述:n个节点度数之和为n-2,每个节点预分配了1个度,任意分配度数是否有可能形成树? 从1到n节点,考虑树的形状,考虑分配给当前节点i的度数,并且注意到当前节点的度数不会影响其他节点(之前或者之 ...

  5. 警告框在asp.net mvc中应用

    Bootstrap与asp.net MVC框架结合,产生警告框.主要是利用控制器的TempData 字典对象 生成临时数据. ASP.NET MVC的TempData用于传输一些临时的数据,例如在各个 ...

  6. HDU3853:LOOPS（概率DP）

    传送门 题意 从(i,j)走到(i,j),(i,j+1),(i+1,j)的概率为p[i][j][1],p[i][j][2],p[i][j][3],花费2魔力,问从(1,1)走到(r,c)的期望 分析 ...

  7. 乐搏讲自动化测试-Python适用公司类型（6）

    相信小伙伴们都知道,随着软件测试行业的发展和进步自动化测试已经成为必然.在竞争日益激烈的市场环境中也是你升职加薪的利器. 所以,小编决定从今天起!将要系统.连续.高质量的持续更新「整套自动化测试」文章 ...

  8. saltstack实战笔记

    #运维管理工具 ansible #支持ssh,不需要客户端 saltstack #也是只是ssh,不需要客户端的 安装架构是,master /minion 安装salt的依赖模块 python zer ...

  9. python列表和元组的常用操作

    一.列表 需要安利一下:列表和字符串数是不一样的.进行操作时列表可以发生改变,而字符串不可以,所以直接在原来的对象上操作. 1.列表的增加 def append(self, p_object): # ...

  10. _bzoj1007 [HNOI2008]水平可见直线【单调栈】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1007 按斜率排序,去掉斜率相同时,截距较小的直线(即只保留该斜率下截距最大的直线).若当前直 ...