vue2.0 v-model指令
<!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指令的更多相关文章
- vue2.0 之 directive指令 (自定义)
指令 一.定义: 指令只一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致 ...
- vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue" ...
- Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- vue2.0自定义指令
前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- 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- ...
- Vue2.0 【第一季】第6节 v-model指令
目录 Vue2.0 [第一季] 第6节 v-model指令 第6节 v-model指令 一.一个最简单的双向数据绑定代码: 二.修饰符 三.文本区域加入数据绑定 四.多选按钮绑定一个值 五.多选绑定一 ...
- Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题
目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...
- 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的使 ...
随机推荐
- solr入门之多线程操作solr中索引字段的解决
涉及的问题: 建索引时有一个字段是该词语出现的次数,这个字段是放在solr里的 而我用的是多线程来进行全量导入的,这里就涉及到了多线程问题 多个线程操作同一个变量时怎样处理? 我是这样子做的 : 首 ...
- js连等运算
1.var a = b = 20; 连等的第二个变量属于全局变量2.a.x = a = {n:2}; 连等是从右往左执行的3.a.x = a = {n:2}; js语句执行前会保存之前的索引
- 设计模式-（11）组合模式 （swift版）
一,概念 组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结 ...
- apktool工具下载地址
apktool工具下载地址 http://ibotpeaches.github.io/Apktool/
- 【繁琐工作自动化】pandas 处理 excel 文件
0. 一般处理 读取 excel 格式文件:df = pd.read_excel('xx.xlsx'),下面是一些简单查看文件内容的函数: df.head():展示前五行: df.columns:展示 ...
- Windbg脚本和扩展工具开篇
好长一段时间没写文章了,最近一直忙于为项目的可调式性做一些脚本和扩展工具,鉴于对windbg强大威力的震撼,以及相对较少的资料,笔者决定写一系列关于如何开发Windbg脚本和扩展命令的文章,您的支持是 ...
- 网络抓包工具wireshark and tcpdump 及其实现基于的libpcap
最近无意中看到博客园中一篇介绍wireshark的文章,写得不错,它简单清楚介绍了wireshark的使用 简介 wireshark以前叫做Ethereal, 在大学时候的网络课程中就常看到它,它是世 ...
- mysql error:You can't specify target table for update in FROM clause
mysql中You can't specify target table for update in FROM clause错误的意思是说,不能先select出同一表中的某些值,再update这个表( ...
- Element-wise operations
Element-wise operations An element-wise operation operates on corresponding elements between tensors ...
- 关于Http的小常识（转载，仅供参考）
HTTP请求头提供了关于请求,响应或者其他的发送实体的信息.HTTP的头信息包括通用头.请求头.响应头和实体头四个部分.每个头域由一个域名,冒号(:)和域值三部分组成. 通用头标:即可用于请求,也可用 ...