学习Vue.js的五个小例子

前言

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

双向数据绑定

点击查看

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

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

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

导航切换

点击查看

这里主要应用了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

关键字：JavaScript, vue.js, vue, 绑定

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！