【第2章:数据绑定】

  1. 何为数据绑定?答曰:数据绑定就是将数据和视图相关联,当数据发生变化的时候,可以自动的来更新视图。
  2. 数据绑定的语法主要分为以下几个部分:
    1. 文本插值:文本插值可以说是最基本的形式了。在vue.js中,使用了Mustache的语法,类似于Angular中的{{}}双大括号的形式。代码如下

      <span>Text:{{text}}</span>

      当然,如果你只想渲染一次数据,而对以后的数据不再关心的话,你也可以使用下面的语法:

      <span>Text:{{*text}}</span>

      如果你的值是html片段的话,你也可以使用三个大括号的形式来进行绑定,如下所示:

      <span>Text:{{{logo}}}</span>
      logo:'<span>ABCD</span>'

      此外,双大括号标签还可以放在html标签的内部,也是会被解析出来。如下:

      <span data-id="{{id}}"></span>

      总之,vue.js提供了一系列的文本渲染的方式,足够我们应对日常的模版渲染情况。但是必须注意的是,vue的指令和自身特性内是不可以插值的,如果用错了地方,vue.js会发出警告。

    2. 表达式:Mustache标签可以接受表达式形式的值,表达式可以由JavaScript表达式和过滤器构成。当然,过滤器可以没有,也可以有多个。
      • 在这里,我们必须了解表达式的含义,一定要区分表达式和语句。所谓表达式,就是各种数值,变量,运算符的综合体。简单的表达式可以是常量或者变量名称,而表达式的值则是它的运算结果。代码如下:

        <!--js表达式-->
        {{center/100}}
        {{true:1:0}}
        {{example.split(",")}}
        
        <!--无效的示例。因为它们都是语句-->
        {{var logo = "ABCD"}}
        {{if(true) return "EFGH"}} //条件控制语句是不支持的,可以使用三元式
      • vue.js中的过滤器类似于pipe,即管道的意思。可以将过滤器添加到表达式后面,代码如下:
        {{example | toUpperCase}}
        
        {{example | filterA | filterB}}

        不仅如此,过滤器还支持传入参数,代码如下:

        {{example | filter a b}}
        //这里的a和b都是参数,使用空格来分隔开

        vue.js中内置的过滤器远不止这些,想要了解更多?我会加快看书,加快更新,大家喝杯茶,稍等片刻。^_^

    3. 指令:就像Angular中的ng-*指令,vue.js中也有自己的指令,只不过是v-*而已,怎么样?是不是很简单?有Angular基础的同学,掌握起来都是分分钟的事。指令的值限定为绑定表达式。而指令的作用正是当表达式的值发生变化的时候,将这个变化也反映到DOM上。
      • 那么问题来了,啥叫绑定表达式?书中所说,绑定表达式,就是JavaScript表达式和过滤器。说白了,就是加了过滤器的表达式,其实质和表达式是一个概念。代码如下:

        <div v-if="show"></div>

        这段代码的意思就是:当show为true的时候,展示这个div;当show为false的时候,不展示这个div。这也印证了上面所说的指令的作用,就是根据它的值,来改变DOM。

      • 此外,在指令和绑定表达式中间,我们还可以插入一个参数,这个参数和指令之间,使用:来进行分隔。如v-bind指令,代码如下:
        <a v-bind:href = "url"></a>
        
        <div v-bind:click="action"></div>
    4. 分隔符:vue.js中的数据绑定的语法被设计为可配置的。如果大家不习惯Mustache的双大括号语法{{}},完全可以自己设置。
      • 我们可以在vue.config中配置绑定的语法。vue.config是一个对象,包含了vue.js的所有全局的配置,可以在vue实例化之前来修改其中的属性。分隔符在vue.config中的源码定义如下:

        let delimiters = ['{{','}}']
        
        let unsafeDelimiters = ['{{{','}}}']

        我们可以通过配置vue.config.delimiters的值来改变默认的文本插值的分隔符,如下:

        Vue.config.delimiters = ['<%','%>']

        这样我们的文本插值语法就不再是双大括号语法,而是<%example%>这样的语法了。html插值的分隔符与此类似。

    5. 第二章:数据绑定就先总结到这里,有什么错误,还请大家在评论里指出,我会第一时间更正。3Q^_^  

【vue.js权威指南】读书笔记(第二章)的更多相关文章

  1. 《JS权威指南学习总结--第二章词法结构》

    第二章词法结构 内容要点: 一.注释 1. //表示单行注释 2. /*这里是一段注释*/ 3.一般编辑器里加注释是:选中要加注释的语句,按 ctrl+/ 二.直接量 所谓直接量,就是程序中直接使用的 ...

  2. 【vue.js权威指南】读书笔记(第一章)

    最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...

  3. Android权威编程指南读书笔记(1-2章)

    第一章 Android应用初体验 1.4用户界面设计 <?xml version="1.0" encoding="utf-8"?> ADT21开发版 ...

  4. STL源码分析读书笔记--第二章--空间配置器(allocator)

    声明:侯捷先生的STL源码剖析第二章个人感觉讲得蛮乱的,而且跟第三章有关,建议看完第三章再看第二章,网上有人上传了一篇读书笔记,觉得这个读书笔记的内容和编排还不错,我的这篇总结基本就延续了该读书笔记的 ...

  5. 重温《js权威指南》 第2-3章

    第二章 语法结构         2.1 js区分大小写,html不区分大小写         2.5 注意分号,如果没有分号,解释器会试图解析js,并在不能解析的地方加分号 第三章 值和变量     ...

  6. Getting Started With Hazelcast 读书笔记(第二章、第三章)

    第二章 起步 本章就相当简单粗暴了,用一个个例子说明hazelcast怎么用. 1.map,set,list这些集合类都是开箱即用的,只要从Hazelcast的实例中获取一份就行. 2.增加了Mult ...

  7. Java Concurrency in Practice 读书笔记 第二章

    第二章的思维导图(代码迟点补上):

  8. Spring 3.x 实践 第一个例子(Spring 3.x 企业应用开发实战读书笔记第二章)

    前言:工作之后一直在搞android,现在需要更多和后台的人员交涉,技术栈不一样,难免鸡同鸭讲,所以稍稍学习下. 这个例子取自于<Spring 3.x 企业应用开发实战>一书中的第二章,I ...

  9. javascript 数据结构和算法读书笔记 &gt; 第二章 数组

    这章主要讲解了数组的工作原理和其适用场景. 定义: 一个存储元素的线性集合,元素可以通过索引来任意存取,索引通常是数字,用来计算元素之间存储位置的偏移量. javascript数组的特殊之处: jav ...

随机推荐

  1. 使用WordPress搭建自己的博客

    突然间发现自己在阿里上有一个免费的虚拟云空间,好像是什么时候阿里云搞活动赠送的.看了看还有不少时间,就决定自己搭建一个博客系统.说到搭建自己的博客,第一时间就想到WordPress,这个用起来应该是最 ...

  2. T1加权像(T1 weighted image,T1WI)

    T1加权成像(T1-weighted imaging,T1WI)是指这种成像方法重点突出组织纵向弛豫差别,而尽量减少组织其他特性如横向弛豫等对图像的影响. 弛豫:物理用语,从某一个状态恢复到平衡态的过 ...

  3. win7升win10,初体验

    跟宿舍哥们聊着聊着,聊到最近发布正式版的win10,听网上各种评论,吐槽,撒花的,想想,倒不如自己升级一下看看,反正不喜欢还可以还原.于是就开始了win10的初体验了,像之前装黑苹果双系统一样的兴奋, ...

  4. DB2常用sql函数 (转载)

    http://www.techonthenet.com/sql/index.php 一.字符转换函数 1.ASCII() 返回字符表达式最左端字符的ASCII 码值.在ASCII()函数中,纯数字的字 ...

  5. Concurrency vs. Parallelism

    http://getakka.net/docs/concepts/terminology Terminology and Concepts In this chapter we attempt to ...

  6. jsp页面输入小写金额转大写

    <script> function chineseNumber(num){ if (isNaN(num) || num > Math.pow(10, 12)) return &quo ...

  7. device tree 生成device node 到 platform_device

    http://blog.csdn.net/lichengtongxiazai/article/details/38942033 http://blog.csdn.net/mcgrady_tracy/a ...

  8. 夺命雷公狗---微信开发59----在线点播电影网1之ckplayer播放器

    我们节课程就要开始写一个小项目了,这项目主要是写一个在线点播电影影网的,我们用到的播放器是ckplayer ckplayer基本介绍: ckplayer的全称是:超酷flv播放器,他是一款用于网页上播 ...

  9. Visual Assist X 10.6.1837完美破解版(带VS2010破解)

    Visual Assist X 10.6.1837完美破解版(带VS2010破解) 实用软件, 资源分享Add comments 八102011 转载自:http://www.blog.namind. ...

  10. SPRING IN ACTION 第4版笔记-第七章Advanced Spring MVC-005- 异常处理@ResponseStatus、@ExceptionHandler、@ControllerAdvice

    No matter what happens, good or bad, the outcome of a servlet request is a servlet response. If an e ...