学习Vue.js的五个小例子

前言

最近在学习vue.js，学着写了几个小例子，自己记录一下，例子都比较简单，希望给初学vue.js的小伙伴一些参考。

双向数据绑定

点击查看

数据绑定是vue.js的基础。本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定。

<!--这是我们的View-->
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>

<script>
    // 这是我们的Model
    new Vue({
        el: '#app',
        data: {
            message:'Hello World!'
        }
    })
</script>

将message绑定到文本框，当更改文本框的值时，<p>{{ message }}</p> 中的内容也会被更新。

导航切换

点击查看

这里主要应用了vue.js的v-for指令来渲染一个列表、v-bind指令来绑定class以及v-on指令来处理事件

即时搜索

链接描述

这个例子主要应用了vue.js的自定义过滤器，可以通过Vue.filter()注册一个全局过滤器，具体用法可以参考这里，vue.js也提供了一些内置过滤器。

布局转换

链接描述

本例应用了vue.js的v-if指令进行了条件渲染，以及v-bind绑定class和v-on处理事件

合计总价

链接描述

这个例子类似购物车那种选中合计总价的功能，也是对各种指令以及数据绑定的综合应用吧。

后记

文章可能比较简单，只是分享了几个小例子，没有对vue.js的用法进行详细说明，大家可以看官方文档。有时间后面我也会分享更多vue.js的学习笔记。
参考资料
vue.js中文文档
五个小案例带你学习火热的Vue.js