vue.js数据绑定
语法
插值
双大括号:{{text}} {{*text}}之渲染第一次 {{{html}}}
表达式(各种数值,变量,运算符的综合体)
{{value/除数}}
{{三目表达式}}
{{value.split(",")}}
指令
V-前缀的特殊特征,绑定表达式,也就是js表达式和过滤器,当表达式发生的值发生变化时将这个变化反映到DOM上
写第一个内置指令
<div id="vuev">
<div v-if="show">fdfdfd</div>
</div>
new Vue({
el: "vuev",
data: {
show: true
}
})
另一种指令:在指令和表达式之间插入一个参数,用冒号分割
例子:
<div id="vuev">
<a v-bind:href="url"></a>
</div>
new Vue({
el: "vuev",
data: {
url: 'baidu.com'
}
})
分隔符
vue的数据绑定的语法可配的,可以改变风格
可以在Vue.config中配置语法,它包含了vue的所有全局配置,可实例化之前配置属性
源码目录是
let delimiters = ['{{', '}}'];
let unsafeDelimiters = ['{{{', '}}}'];
delimiters 修改文本插入分隔符
unsafeDelimiters 修改html插入分隔符