<!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. debian repository的成长过程

    1 基本概念 1.1 健康的安装 在端系统中的一次健康的安装指的是,在安装的包的集合中,所有的依赖都满足,并且没有冲突存在. 这的健康的安装是相对于端系统而言的,并不是相对于整个repo而言的.对整个 ...

  2. accept()函数用来告诉Qt，事件处理函数“接收”了这个事件，不要再传递；ignore()函数则告诉Qt，事件处理函数“忽略”了这个事件，需要继续传递（看一下QWidget::mousePressEvent的实现，最为典型。如果希望忽略事件，只要调用父类的响应函数即可）

    QEvent的accept()和ignore()一般不会用到,因为不如直接调用QWidget类的事件处理函数直接,而且作用是一样的,见下面的例子. 推荐直接调用QWidget的事件处理函数.而不是调用 ...

  3. POJ 3104 Drying (二分+精度)

    题目链接:click here~~ [题目大意]: 题意:有一些衣服,每件衣服有一定水量,有一个烘干机,每次能够烘一件衣服,每分钟能够烘掉k单位水. 每件衣服没分钟能够自己主动蒸发掉一单位水, 用烘干 ...

  4. HttpClient服务端发送http请求

    本来以为对跨域问题的处理已经比较熟练了.可以通过jsonp.document.domain+iframe.window.name.window.postMessage.服务器上设置代理页面来解决.但还 ...

  5. POJ2289 Jamie's Contact Groups —— 二分图多重匹配/最大流 + 二分

    题目链接:https://vjudge.net/problem/POJ-2289 Jamie's Contact Groups Time Limit: 7000MS   Memory Limit: 6 ...

  6. Python基础第九天

    一.内容

  7. hdu 3503(有点小技巧的dfs(对结点加东西表示边的某些状态))

    Friends Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  8. 腾讯API

    相关文档: API列表  腾讯开放平台联调工具集  公共返回码说明 SDK下载

  9. ChartCtrl源码剖析之——CChartTitle类

    CChartTitle类顾名思义,该类用来绘制波形控件的标题,它处于该控件的区域,如下图所示: CChartTitle类的头文件. #if !defined(AFX_CHARTTITLE_H__499 ...

  10. Python科学计算工具包

    import numpy as np # 创建一个Ndarray # 1. 从list对象中创建 # 2. 创建一个特定的数组,全1数组ones,随机数组random.randn,对角矩阵diag # ...