VueJS简明教程之基本使用方法

标签就完全可以这样写

这是和v-bind:hidden=”my_hidden”完全等价的一种写法

至此，Vue.js两种绑定数据的方法都写完并进行了测试

事件绑定v-bind:是用来绑定数据的，v-on:则是用来绑定事件的，比如我要绑定一个的click事件就这么写Click Me

当然这里的click可以换成任意一个html事件，比如load , doubleclick , mouseon , mousedown这些，不过click肯定是我们最常用的

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

var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } } })

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

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

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

现在整体代码和之前有些变化，看起来是这样的:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } } }) </script>

好了，运行一下，点击Click Me的时候”test”就会变成”Wow! I’m changed!”，这是因为变量my_data的改变。

另外，v-on:语法同样有一个缩写@，比如v-on:click=”clickButton”就等价于@click=”clickButton”

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

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

下面说的原理看不懂可以跳过，不会影响后续阅读

v-model通过两步实现了数据反向传递

第一步，绑定了DOM标签的input事件(比如叫tapInput())

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

通过以上两步，v-model语法糖实现了vue数据的反向传输

好，直接写一个例子吧

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } } }) </script>

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

这个时候，当我们在输入框输入值的时候，v-model会实时将最新值(value)赋值给vue实例的my_data变量，而my_data变量又将实时展现在

标签中

这样我们看起来实现了这么一个数据流:

DOM1(input标签)–>VUE–>DOM2(p标签)

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

运行这个页面，发现

标签中的内容会随着标签实时的变化，说明我们利用v-model语法变相实现了数据的双向传递

总结看看我们学到了什么

用new Vue({})新建vue实例 使用v-bind:和{{}}双大括号语法在html中绑定变量 使用v-on:和@语法绑定函数到标签的事件 使用v-model:语法使用户的页面输入反向传递回vue实例变量现在简单完善一下上面的代码，做成一个计数器程序，用户可以在输入框输入任意数字，点击按钮进行总数累加

下面是对刚才代码进行了一些小的改动，相信你一定可以看明白的

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ my_step: 1, my_total: 0 }, methods:{ clickButton:function(){ this.my_total = this.my_total + this.my_step } } }) </script>

上面v-model.number后面的这个.number的意思是说在返回my_step值的时候自动转换成integer类型，因为默认是string类型，所以要多这么一句。

本文算是vue的基础内容，下一篇将会是vue的核心内容，组件。

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

我会写出一个用Vue.js构建SPA(Single Page Application)的系列文章, 希望可以让初学、转学VUE的人少走弯路