数据绑定原理：
数据绑定是将数据和视图相互关联，当数据发生变化时，可以自动更新视图
1.1插值
文本插值是最基础的形式，使用双大括号{{ }}（类似于Mustache,所以本文中称这为Mustache标签）
代码：
<div id="app">
{{ text }}
</div>
<script>
new Vue({
el: '#app',
data(){
return {
text: 'RUNOOB',
}
}
})
</script>
以上的代码标签中的{{ text }}将会被相应的数据对象属性text属性的值替换；当text的值改变，文本中的也会发生联动变化
有时候我们只需要渲染一次数据，后续数据变化不再关心，可以通过*实现
<div id="app">
{{ *text }}
</div>
<script>
new Vue({
el: '#app',
data(){
return {
text: 'RUNOOB',
}
},
created () {
this.fileType()
},
methods: {
fileType () {//类型选择
this.text = '111111111'
},
}
})
</script>
双大括号里会把里面传进来的参数值全部当成字符串来处理，如果是HTML片段的话，可以用三个大括号来绑定{{{ }}}
<div id="app">
{{{ text }}}
</div>
<script>
new Vue({
el: '#app',
data(){
return {
text: '<span>你好中国</span>',
}
}
})
</script>
1.2表达式
Mustache标签也接受表达式形式的值，表达式可由JavaScript表达式和过滤器构成。过滤器可以没有，也可以有多个
表达式是各种数值、变量、运算符的综合体；简单的表达式可是常量或变量的名称；表达式的值是其运算结果
<!---JS表达式---->
{{center/100}} //在原值的基础上除以100
{{true?1:0}} //值为真，则渲染出1，否则为0
{{ example.split(",")}}
类似于Linux中的管道，Vue.js允许在表达式后面添加过滤符代码如下：
{{example | toUpperCase}}
//这里toUpperCase就是过滤器，其本质就是一个JS函数，返回字符串的全部大写形式
Vue.js允许过滤器串联。代码如下：
{{example | fulterA | fulterB}}
过滤器还支持传入参数:参数需要用空格隔开
{{example | fulterA a b | fulterB c d}}
1.3指令
指令是带有v-前缀的特殊特性， 其值限定为绑定表达式，也就是javaScript表达式和过滤器。指令的作用就是当表达式的值发生改变时，将这个变化也反映到DOM上；如
v-if
v-show
还有些指令语法不同在指令于表达式之间插入一个参数，用冒号分隔，如
v-bind:href v-bind:src //(缩写 :href :rec)
v-on:click v-on:hover //(缩写 @click @hover)
2.分隔符
Vue.config是一个对象，包含了Vue.js的所有全局配置，可以在Vue实例化前修改其中的属性
//源码目录src/config.js
let delimiters = ['{{','}}']
let unsafeDelimiters = ['{{{','}}}']
delimiters
Vue.config.delimiters = [``"<%"``,``"%>"``];
如果修改了默认的分隔符，则文本插值中的语法{{example}}变成<%example%>
unsafeDelimiters
Vue.config.unsafeDelimiters = [``"<$"``,``"$>"``];
如果修改了默认的HTML插值分隔符，则HTML插值的语法由{{{ example }}}变成<$ example $>
网友评论