Vue系列二之：如何进行“双向数据”绑定

在上一节中，我们把基本的环境已经搭建完成，这一篇中我们会讲解怎么样进行双向数据绑定，包括了数据，事件，样式等等

如何进行数据属性的绑定

• 使用{{}}双大括号的形式进行绑定：

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标签中输出，其中只用到了几句代码：

展示数据的即时绑定和更新
    
这里会同步显示上面input输入的值： {{bindNumber}}

image.png

如何对事件进行绑定

写法比较简单，我直接把官方文档的内容摘抄过来：

image.png

这里如果要响应script里面的方法，应该写一个methods的属性，然后就可以在里面写你希望拥有的方法啦

函数方法可以使用
methods:{
 doSomething:function () {
        alert("hi~")
  }
或者
  doSomething(){
        alert("hi~")
  }
}
来描述，两者并没有差异

如何对style属性进行绑定