在上一节中，我们把基本的环境已经搭建完成，这一篇中我们会讲解怎么样进行双向数据绑定，包括了数据，事件，样式等等
如何进行数据属性的绑定
- 使用{{}}双大括号的形式进行绑定：
image.png
效果图如下：
image.png
- 使用v-html进行html标签的绑定
image.png
效果图如下：
image.png
注意：一直可以看到script里面有报错，这是ide的语法检查造成的，可以设置js为es6的标准，另外在script里面再写上type="es6"
image.png
- 使用v-bind可以绑定标签里面的常用元素，例如id,type,disabled,value,href等等元素（v-bind作为指令，实际上可以缩写成:bind="xxxxx"）
image.png
效果图如下：
image.png
双向绑定小案例
在很多地方都能用到输入框（input），有时候我们需要在登录输入时（输入过程中）进行手机号码，邮箱等类型的数据检查，我们这里举一个同步显示的例子，只要在input上输入了内容，即时在下面的p标签中输出，其中只用到了几句代码：
<p>展示数据的即时绑定和更新</p>
<input type="text" v-model="bindNumber">
<p>这里会同步显示上面input输入的值： {{bindNumber}}</p>
<script type="es6">
export default {
name: 'hello',
data () {
return {
bindNumber:""
}
}
}
</script>
image.png
如何对事件进行绑定
写法比较简单，我直接把官方文档的内容摘抄过来：
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
image.png
这里如果要响应script里面的方法，应该写一个methods的属性，然后就可以在里面写你希望拥有的方法啦
函数方法可以使用
methods:{
doSomething:function () {
alert("hi~")
}
或者
doSomething(){
alert("hi~")
}
}
来描述，两者并没有差异
如何对style属性进行绑定
<template>
<div class="hello">
<p>css样式展示</p>
<div class="myCss" v-bind:style="redCss"></div>
<div class="myCss" v-bind:style="{backgroundColor: greenCss}"></div>
<div class="myCss" v-bind:class="activeClass"></div>
</div>
</template>
<script type="es6">
export default {
name: 'hello',
data () {
return {
'greenCss':"green",
redCss:{
backgroundColor:'red',
},
activeClass: 'bingClass'
}
}
}
</script>
<style scoped>
.myCss{
width:100px;
height:100px;
display: inline-block;
/*float: left;*/
}
.bingClass{
background-color: yellow;
}
/style>
- 第一种是直接加载data中的属性（css规则）
- 第二种是某个属性，比如backgroundColor，绑定data中一个greenCss属性
- 第三种是直接将某个（或多个）class属性直接从data中取出注入到div中
以上三种，都是需要通过data这个属性作为桥梁来连接，可玩性非常大，大家可以控制和切换css的样式
image.png
小结
通过上面的方式，我们已经可以简单的有了数据和属性绑定的相关知识，我们在测试的时候自己可以尝试举例去体验一下双向绑定的灵活性。
到这里的是，我们已经学习了vue实例里面两个属性，一个是data，一个是methods,本文简述的内容不可能有vue官方描述得更加细致，但是我会列举一些非常实用的内容，让大家可以快速上手vue的项目。
