zoukankan      html  css  js  c++  java
  • 第2章 Vue数据绑定

    2.1语法

    2.1.1 插值

    数据绑定是将数据和视图相关联,当数据发生变化时,可以自动更新视图。

    Mustache(八字须),{{}} 插值,文本渲染方式。

    双大括号标签会把里面的值全部当做字符串处理,

    双大括号标签还可以放在HTML标签内,

  • 如果值是HTML片段,则可以使用三个大括号来绑定,

    Logo:{{{logo}}}
    logo:'DDFE'

    Vue指令和自身特性内是不可以插值的。

    2.1.2 表达式

    Mustache标签也接受表达式形式的值,表达式可由JavaScript表达式和过滤器构成。过滤器可以没有,也可以有多个。

    表达式是各种数值、变量、运算符的综合体。简单的表达式可以是常量或者变量名称。表达式的值是其运算结果。

    {{cents/100}} //在原值的基础上除以100
    {{true ? 1 : 0 }} //值为真,则渲染出 1,否则渲染出 0
    {{example.split(",")}}

    {{var logo = 'DDFE' }} //这是语句,不是表达式,条件控制语句也不支持,可以使用三元式(三目)。

    类似于Linux中的管道,Vue.js允许在表达式后面添加过滤符,这里的toUpperCase就是过滤器,其本质是一个JS函数,返回字符串的全大写形式。
    {{example | toUpperCase}}

    Vue.js允许过滤器串联,
    {{example | filterA | filterB }}

    过滤器还支持传入参数,这里a和b均为参数,用空格隔开。
    {{example | filter a b }}

    Vue.js还提供许多内置的过滤器。

    2.1.3 指令

    指令是带有v-前缀的特殊特性,其值限定为绑定表达式,也就是JavaScript表达式和过滤器。指令的作用是当表达式的值发生变化时,将这个变化也反应到DOM上。

    2.2 分隔符

    Vue.js中数据绑定的语法被设计为可配置的。如果不习惯Mustache风格的语法,则可以自己设置。可以再Vue.config中配置绑定语法。

    Vue.config是一个对象,包含了Vue.js的所有全局配置,可以再Vue实例化前修改其中的属性。

    ①delimiters 修改默认文本插值分隔符

    Vue.config.delimiters = ["",""]

    ②unsafeDelimiters 修改默认HTML插值分隔符

    Vue.config.unsafeDelimiters = ["",""]

查看全文
  • 相关阅读:
    Delphi 正则表达式之TPerlRegEx 类的属性与方法(3): Start、Stop
    Delphi 正则表达式之TPerlRegEx 类的属性与方法(2): 关于子表达式
    Delphi 正则表达式之TPerlRegEx 类的属性与方法(1): 查找
    Delphi 正则表达式语法(10): 选项
    Delphi 正则表达式语法(9): 临界匹配
    Delphi 正则表达式语法(8): 引用子表达式
    Delphi 正则表达式语法(7): 匹配转义字符
    看阿里P7讲MyBatis:从MyBatis的理解以及配置和实现全帮你搞懂
    公司新来的小姐姐不懂java中的static关键字,这样给她描述不香吗?
    2020阿里,字节跳动,JAVA岗(一线企业校招、社招)面试题合集
  • 原文地址:https://www.cnblogs.com/goforxiaobo/p/12459072.html
  • Copyright © 2011-2022 走看看