我们在methods关键字里面定义了clickButton方法，并在方法内改变了之前定义的my_data变量的值

这里涉及到如何在vue实例中引用data字段的变量，如上所示，需要加 this 后面直接写要引用的变量就可以了

如果不加 this ，系统会默认你想引用的是一个全局变量，可是这里我们需要引用的是这个vue实例里的局部变量

前端的东西多且杂东拼西凑总也不是进步的办法我认为最好就是将主干的一支学明白用在实际项目中其他的一些枝枝叉叉遇见了现看文档也是来得及的比如我每次flex布局都要现查语法甚至写前端页面的时候总是开着vue的官方文档随时查看囧

如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者 较优。 Vue.js的官方中文教程其实也是一个不错的教程，不过相比于一次性把所有概念掌握，我更倾向于先会用，之后再在实际应用中把未涉及到的知识 点逐步补全。 就像开车，不是非要知道发动机的工作原理才能上路的，甚至你可能一辈子也不用知道。 好了，开始吧

将click动作绑定到clickButton()函数之后就需要实现这个函数了,我们要在之前的vue实例中加入新字段 methods

运行这个页面，发现 p 标签中的内容会随着 input 标签实时的变化，说明我们利用v-model语法变相实现了数据的双向传递

v-bind: 后面写想要绑定的属性， my_hidden 也不需要用两个大括号括起来了，直接写就可以了，然后在VUE实例中声明这个绑定数据

可以发现，我们增加了一个 input 标签，并且用v-model语法绑定了之前定义的变量my_data

第二步，当用户进行输入时候，触发 tapInput() 函数， tapInput() 函数内部读取此DOM标签的Value值，赋值给vue实例

这个双大括号的语法叫做mustache 语法，大括号里面的是作为变量形式出现的。

接着，我会围绕以下几个Vue.js的基本（核心）使用方法逐个做测试和使用说明： 新建vue对象 数据绑定 事件绑定 表单控件绑定

data 参数用来绑定VUE实例的数据变量，每个不同变量之间用逗号分隔，上面我们绑定了自定义变量 my_data ，并赋初值test

完成数据绑定工作， div 标签里的 {{myData}} 数据会随着myVue实例里的 myData 数据的变动而变动，浏览器查看当前页面,会出现test字符 串，说明数据绑定成功

这是在HTML标签内部的数据绑定，那么如果想绑定某个HTML标签的属性值，就要用到 v-bind: 属性了，比如我想绑定一个标签是否可见的属性 (hidden)，那么就应该这么写:

先从用户输入的DOM1获取输入保存在VUE实例，用从VUE实例里拿到数据输出到DOM2

至此，Vue.js框架在html页面的引入工作完成，但是如果我们访问这个页面并不能看到任何效果,一篇空白

VUE这个框架的数据流向是单向的，不懂没关系，记住就好了 所以数据绑定后的数据流向是从

之前有说Vue这个框架是单向数据传输的，就是从vue实例传送数据到DOM ，那么我们如何从DOM中实时获取用户输入的数据赋值给vue实例呢

这用到了Vue.js提供给用户的一个语法糖 v-model ,这个语法糖通过两步实现了数据的反向传递，也就是从DOM传送给vue实例数据。

el是Vue的保留字，用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器，告诉Vue要实例化 ID=“firstVue” 的这个标签。

这时候再浏览这个网页,又变成了空白，但是F12查看源代码，发现其实是div标签的hidden属性被激活了

当然， v-bind: 不仅可以绑定hidden属性，disabled属性，style属性, color属性，凡是标签有的属性，都可以通过这个方法进行绑定

v-bind 由于经常会用到，所以也可以缩写成冒号 : ，比如上面的 div 标签就完全可以这样写