vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性
为了避免过多的逻辑造成模板的臃肿不堪，可使用计算属性来简化逻辑。
1.什么是计算属性
<!DOCTYPE html> <html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="example">
<input type="text" v-model="didi"/>
<input type="text" v-model="family"/>
<br/>
didi={{didi}},family={{family}},didiFamily={{didiFamily}} </div> <script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#example",
data:{
didi:"didi",
family:"family"
},
computed:{
//一个计算属性的getter
didiFamily:{
get:function(){
//this 指向vm实例
return this.didi+this.family;
}
} }
})
</script> </body>
</html>
当vm.didi和vm.family的值发生变化时，vm.didiFamily的值会自动更新，当然也会同步到DOM元素上。
2.计算属性的性能分析
第五章:表单控件绑定
1.v-model更新表单控件的基本例子
这些基本例子，直接使用value属性，绑定的都是字符串或者checkbox的布尔值。接下来分别介绍。
(1)文本框的使用
当用户操作文本框时，vm.name会自动更新为用户输入的值，同时span也会改变。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="demo"> <span>Welcom,{{name}}!join DDFE</span> <br/> <input type="text" v-model="name" placeholder="join DDFE"/> </div> <script src="js/vue.js"></script> <script> var vm=new Vue({ el:"#demo" }) </script></body></html>
textInput使用v-model
(2)复选框checkbox的使用
单个复选框的使用和文本框类似，多个复选框，也就是复选框组，被选入的值会放入一个数组。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>复选框组</title></head><body><div id="demo"> <input type="checkbox" id="flash" value="flash" v-model="bizLines"/> <label for="flash"> 快车 </label> <br/> <input type="checkbox" id="premium" value="premium" v-model="bizLines"/> <label for="premium"> 专车 </label> <br/><input type="checkbox" id="bus" value="bus" v-model="bizLines"/> <label for="flash"> 巴士 </label> <br/></div><script src="js/vue.js"></script><script> var vm=new Vue({ el:"#demo", data:{ bizLines:[] } })</script></body></html>
复选框组通过v-model被选中的值会放入数组中
(3)单选按钮radio的使用
当单选按钮被选中时，v-model的变量值会被赋值为对应的value值。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单选按钮radio</title></head><body><div id="demo"> <input type="radio" id="flash" value="flash" v-model="bizLines"/> <label for="flash"> 快车 </label> <br/> <input type="radio" id="premium" value="premium" v-model="bizLines"/> <label for="premium"> 专车 </label> <br/> <input type="radio" id="bus" value="bus" v-model="bizLines"/> <label for="flash"> 巴士 </label> <br/> <span>Picked:{{bizLines}}</span></div><script src="js/vue.js"></script><script> var vm=new Vue({ el:"#demo" })</script></body></html>
单选按钮使用v-model
(4)select控件使用v-model分为两种情况。
一种是单选select控件，第二种是多选select控件。v-model指令都用于select标签。动态的生成option可以借助v-for指令等。
单选时vm.selected为对应的option的value值。多选会被放入一个数组中，多选是selectr有multiple属性，浏览器窗口想要多选可以借助ctrl和shift快捷键。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>下拉菜单的选择</title></head><body><div id="demo"> <select v-model="bizLine"> <option selected value="flash">快车</option> <option value="premium">专车</option> <option value="bus">巴士</option> </select> <span>selected:{{bizLine}}</span> <br/> <select v-model="bizLine2" multiple> <option selected value="flash">快车</option> <option value="premium">专车</option> <option value="bus">巴士</option> </select> <span>selected:{{bizLine2|json}}</span></div><script src="js/vue.js"></script><script> var vm=new Vue({ el:"#demo" })</script></body></html>
2.动态的值绑定
通过v-bind代替直接使用value属性，那么除了字符串，还可以是数值、对象、数组等非字符串的值。
(1)checkbox
3.v-model指令的修饰词及其源码分析
(1)lazy
默认情况下，v-model在input事件中同步输入框的值与数据，而添加了lazy特性后，在change事件中去掉同步性。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="demo"> <span>Welcom,{{name}}!join DDFE</span> <br/> <input type="text" v-model="name" placeholder="join DDFE" /></div><script src="js/vue.js"></script><script> var vm=new Vue({ el:"#demo" })</script></body></html></body></html>
lazy修饰词
同样是之前的代码，只是添加了lazy属性，那么name变量就不会同步了。
<!--源码目录:src/directives/public/model/text.js-->
var lazy = this.params.lazy //获取到参数的lazy的布尔值//...if (!isRange && !lazy) { //如果element的type值不是range，而且lazy为false this.on('focus', function () { self.focused = true }) this.on('blur', function () { self.focused = false // do not sync value after fragment removal (#2017) if (!self._frag || self._frag.inserted) { self.rawListener() } }) }//...if (this.hasjQuery) { const method = jQuery.fn.on ? 'on' : 'bind' jQuery(el)[method]('change', this.rawListener) if (!lazy) { jQuery(el)[method]('input', this.listener) } } else { this.on('change', this.rawListener) if (!lazy) { this.on('input', this.listener) } }
(2)debounce
<!--源码目录:src/directives/public/model/text.js-->
if (debounce) { this.listener = _debounce(this.listener, debounce) }
// Support jQuery events, since jQuery.trigger() doesn't // trigger native events in some cases and some plugins // rely on $.trigger() // // We want to make sure if a listener is attached using // jQuery, it is also removed with jQuery, that's why // we do the check for each directive instance and // store that check result on itself. This also allows // easier test coverage control by unsetting the global // jQuery variable in tests. this.hasjQuery = typeof jQuery === 'function' if (this.hasjQuery) { const method = jQuery.fn.on ? 'on' : 'bind' jQuery(el)[method]('change', this.rawListener) if (!lazy) { jQuery(el)[method]('input', this.listener) } } else { this.on('change', this.rawListener) if (!lazy) { this.on('input', this.listener) } }
(3)number
<!--源码目录:src/directives/public/model/text.js-->
var number = this.params.number//****this.listener = this.rawListener = function () { if (composing || !self._bound) { return } var val = number || isRange ? toNumber(el.value) : el.value self.set(val) // force update on next tick to avoid lock & same value // also only update when user is not typing nextTick(function () { if (self._bound && !self.focused) { self.update(self._watcher.value) } }) }//****
<!--源码目录:src/util/lang.js-->
export function toNumber (value) { if (typeof value !== 'string') { return value } else { var parsed = Number(value) return isNaN(parsed) ? value : parsed }}
vue.js基础知识篇(3):计算属性、表单控件绑定的更多相关文章
- vue.js基础知识篇(4):过滤器、class与style的绑定2
代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...
- Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）
话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- vue.js基础知识篇(1):简介、数据绑定
目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- js进阶 9-6 js如何通过name访问指定指定表单控件
js进阶 9-6 js如何通过name访问指定指定表单控件 一.总结 一句话总结:form中控件的三种访问方式:2formElement 1document 1.form中控件的三种访问方式? 1.f ...
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- vue.js基础知识篇(2):指令详解
第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
随机推荐
- koa2 use里面的next到底是什么
koa2短小精悍,女人不爱男人爱. 之前一只有用koa写一点小程序,自认为还吼吼哈,知道有一天某人问我,你说一下 koa或者express中间件的实现原理.然后我就支支吾吾,好久吃饭都不香. 那么了解 ...
- Everything 使用记录
背景:在windows环境下,使用系统自带的搜索框经常出现搜索不到指定文件的问题,在网上无意发现了这款软件,真的很好用! 1 文件列表 建立文件列表主要是为了以后可以在指定的目录内查找自己想要的文件, ...
- pb日志查看记录
因为日志的种类比较多,这里记录下来,方便查看! 1 pb下发日志查看 目前已经确定220-224 603都是这么查看的.手工下发的业务应该都是这么查看的,其实只要去确定步骤2中的序号,就可以直接进入步 ...
- 最近任务 && react文章列表
最近任务 读书 数据分析 react深入学习 可视化大图 移动端入门 [React学习] 入门学习-文本渲染 http://www.cnblogs.com/huxiaoyun90/p/4783663. ...
- dpkg和perl的依赖环境出现错误故障解决（磁盘原因）
内核: uname -a Linux localhost.localdomain 3.4.29-t4 #12 Wed Mar 13 16:50:15 EST 2013 armv7l armv7l ar ...
- Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态
前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5 ...
- Scrapy常用命令行工具
查看所有命令 scrapy -h 查看帮助信息 scapy --help 查看版本信息 (venv)ql@ql:~$ scrapy version Scrapy 1.1.2 (venv)ql@ql:~ ...
- SSRF漏洞学习
SSRF SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF攻击的目标是从外网无法访问的内 ...
- java ArrayList 踩坑记录
做编程的一个常识:不要在循环过程中删除元素本身(至少是我个人的原则).否则将发生不可预料的问题. 而最近,看到一个以前的同学写的一段代码就是在循环过程中删除元素,我很是纳闷啊.然后后来决定给他改掉.然 ...
- jQuery.ajax success 与 complete 区别
作者QQ:1095737364 QQ群:123300273 欢迎加入! 天天用,不知所以然: $.ajax({ type: "post", u ...