一、插值
1、文本
数据绑定最常见的形式是使用双大括号（{{ }}——“Mustache”语法）的文本插值
<div class="mustache">
<span>小红:{{ juice }}</span>
<span v-once>不变的选择：{{ juice1 }}</span>
</div> juice: '奇异果',
juice1: '百香果'
2、原始HTML：双大括号会将数据解释为普通文本，而非HTML代码；为了输出真正的HTML，可以使用v-html指令；
<div>
<p>mustache普通文本: {{ rawHtml }}</p>
<p>使用v-html: <span v-html="rawHtml"></span></p>
</div> rawHtml: '<span style="color:lightblue">html输出，这里是蓝色的呦~</sapn>',
3、特性
“Mustache”语法不能用在HTML特性上，遇到这种情况应该使用 v-bind指令；
1）、v-bind使用方法：
（1）动态的绑定一个或多个特性，，或一个组件prop到表达式；
（2）在绑定class或style特性时，支持其他类型的值，如数组或对象；
（3）在绑定prop时，prop必须在子组件中声明。可以用修饰符制定不同的绑定类型；
（4）没有参数时，可以绑定到一个包含键值对的对象；注意：此时，class和style绑定不支持数组和对象；
2）、举例：
在布尔特性的情况下，他们的存在即暗示为true
<template>
<div class="hello" >
<div class="bind">
<button v-bind:disabled="isButtonDisabled">button</button>
</div>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
isButtonDisabled: true
}
}
}
</script>
4、使用JavaScript表达式
除了绑定简单的属性键值，对于所有的数据绑定，vue还可以使用JavaScript表达式；
注意：只是表达式，语句是不会被解析的；
<template>
<div class="hello" >
<div class="javascript_">
<p class="binary">数量: {{ numbers + 1 }}</p>
<p class="ternary">甜度: {{ sweet ? 'sugar' : 'no-sugar' }}</p>
<p class="def">编号: {{ price.split('').reverse().join('') }}</p>
</div>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
numbers: 5,
sweet: true,
price: '23452',
} }
}
</script> <style scoped>
.javascript_ p{
font-size: 16px;
color: cadetblue;
}
二、指令
指令是带有 v- 前缀的特殊属性。指令属性的预期值是单个Javascripit表达式。指令的职责是：当表达式的值改变时将其产生的连带影响，响应式的作用于DOM，
1、参数
一些指令能够接受一个参数，在指令名称之后以冒号表示，例如：
<template>
<div class="hello" >
<div class="direc">
<a class="koudai_link" v-bind:href="url_">口袋学生证</a>
<a class="koudai_link" v-on:click="change_style">点击打印123</a>
</div>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
url_: 'http://koudaixueshengzheng.cn'
}
},
methods: {
change_style: function () {
console.log(123)
}
}
}
</script> <style scoped>
.koudai_link{
font-size: 16px;color: white;text-decoration: none;display: block;background: palevioletred;border-radius: 10px;width: 150px;height: 40px;line-height: 40px;
letter-spacing: 2px;font-weight: bold;margin: 0 auto;margin-bottom: 10px;cursor: pointer;
}
</style>
2、修饰符
修饰符是以半角句号 ‘.’指明的特殊后缀，用于指出一个指令应该以特殊方式绑定；后面详细介绍；
三、缩写
1、v-bind
<!-- 完整语法 -->
<a v-bind:href="url">...</a> <!-- 缩写 -->
<a :href="url">...</a>
2、v-on
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a> <!-- 缩写 -->
<a @click="doSomething">...</a>