Vue.js 数据绑定

Posted 2022-01-28 shi_zi_183

数据绑定

语法

插值

文本插值是最基本的形式，使用双大括号(类似于Mustache，所以文本中称作Mustache标签)

<span>Test: text</span>

例子中的标签text将会被相应的数据对象text属性的值替换掉，当text的值改变时，文本中的值也会联动地发生变化。有时候只需渲染一次数据，后续数据变换不再关心，可以通过"*"实现

<span>Text: *text </span>

双大括号标签会把里面地值全部当作字符串来处理，如果值是html片段，则可以使用三个大括号来绑定

<div>Logo: logo</div>
logo : '<span>DDFE</span>'

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

<li data-id='id'></li>

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

表达式

Mustache标签也接受表达式形式的值，表达式可由javascript表达式和过滤器构成。过滤器可以没有，也可以有多个。
表达式是各种数值、变量、运算符的综合体。简单的表达式可以是常量或者变量名称。表达式的值是其运算结果。

<!--JS表达式-->
cents/100
true?1:0
example.split(",")

<!--无效示例-->
var logo = 'DDFE'
if(true) return 'DDFE'

类似于Linux中的管道，Vue.js允许在表达式后面添加过滤符

example | toUpperCase

toUpperCase就是过滤器，其本质是一个JS函数，返回字符串的全大写形式。Vue.js允许过滤器串联。

example | filterA | filterB

过滤器还支持传入参数。

example | filterA | filterB

过滤器还支持传入参数。

example | filter a b

这是a和b均为参数，用空格隔开。

指令

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

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

当show为true时，展示DDFE字样，否则不展示。还有一些指令的语法稍有不同，在指令和表达式之间插入一个参数，用冒号分隔，如v-bind指令

<a v-bind:href="url"></a>
<div v-on:click="action"></div>

分隔符

Vue.js中数据绑定的语法被设计为可配置的。如果不习惯Mustache风格的语法，可以自己设置。
我们可以在Vue.config中配置绑定的语法。Vue.config是一个对象，包含了Vue.js的所有全局配置，可以在Vue实例化前修改其中的属性。分隔符在Vue.config中源码定义如下：

<!--源码目录src/config.js-->
let delimiters = ['','']
let unsageDelimiters = ['','']

1）delimiters

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

如果修改了默认的文本插值的分隔符，则文本插值的语法由example变为<%example%>
2）unsafeDelimiters

Vue.config.unsafeDelimiters = ["<$","$>"]

如果修改了默认的HTML插值的分隔符，则HTML插值的语法由example变为<%example%>