第四章:计算属性

为了避免过多的逻辑造成模板的臃肿不堪，可使用计算属性来简化逻辑。

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):计算属性、表单控件绑定的更多相关文章

  1. vue.js基础知识篇(4):过滤器、class与style的绑定2

    代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...

  2. Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）

    话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. vue.js基础知识篇(1):简介、数据绑定

    目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...

  4. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  5. js进阶 9-6 js如何通过name访问指定指定表单控件

    js进阶 9-6 js如何通过name访问指定指定表单控件 一.总结 一句话总结:form中控件的三种访问方式:2formElement 1document 1.form中控件的三种访问方式? 1.f ...

  6. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  7. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  8. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  9. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

随机推荐

  1. 树状数组(瞎bb) [树状数组]

    Copyright:http://www.cnblogs.com/ZYBGMZL/ 树状数组是一个利用一维数组和位运算组成的求解区间问题的高效数据结构,其构造如图所示 首先,我们要用它解决单点修改.区 ...

  2. 手机摄像头扫描识别车牌号，移动端车牌识别sdk

    一.移动端车牌识别应用背景 (技术交流:18701686857  QQ:283870550) 随着经济水平的不断提高,汽车数量的不断激增为汽车管理带来了不小的难度.路边违章停车的现象越来越频繁.现在, ...

  3. (转)Java线程：新特征-条件变量

    Java线程:新特征-条件变量   条件变量是Java5线程中很重要的一个概念,顾名思义,条件变量就是表示条件的一种变量.但是必须说明,这里的条件是没有实际含义的,仅仅是个标记而已,并且条件的含义往往 ...

  4. 介绍CSS的相关知识

    以下是我跟大家分享的有关CSS的相关知识点: ①什么是CSS? css(Cascading Style Sheets)是层叠样式表 ②css的三种样式使用方法: 1,内联样式表:直接在html标签属性 ...

  5. Orchard 学习

    https://github.com/OrchardCMS/Orchard  源码下载 http://www.orchardch.com/  中文介绍网站

  6. FaceRank，最有趣的 TensorFlow 入门实战项目

    FaceRank,最有趣的 TensorFlow 入门实战项目 TensorFlow 从观望到入门! https://github.com/fendouai/FaceRank 最有趣? 机器学习是不是 ...

  7. java_==和equal方法

    java测试两个变量是否相等有两种方式: 一种是利用"=="运算符 值和对象的判断 一种是利用equals()方法 只是值的判断 1.如果两个变量是基本类型变量,且都是数值类型(不 ...

  8. 拯救莫莉斯[GDOI2014]

    时间限制:1s     内存限制:256MB 问题描述 莫莉斯·乔是圣域里一个叱咤风云的人物,他凭借着自身超强的经济头脑,牢牢控制了圣域的石油市场. 圣域的地图可以看成是一个n*m的矩阵.每个整数坐标 ...

  9. 之前同事问到的一道python题目

    Python面试题 之前同事问了一道Python题目如下,暂时归类为面试题 题目:把类似'123.456'的字符串转换成浮点型数据 方法一: >>> print '{:.3f}'.f ...

  10. java中的各种数据类型在内存中存储的方式

    原文地址:http://blog.csdn.net/aaa1117a8w5s6d/article/details/8251456 1.Java是如何管理内存的 java的内存管理就是对象的分配和释放问 ...