Vue.js起手式+Vue小作品实战

JavaScript010

Vue.js起手式+Vue小作品实战,第1张

Vue.js(读音 /vjuː/, 类似于 view ) 是一套构建用户界面的 渐进式框架 。与其他重量级框架不同的是Vue 的核心库只关注视图层。

Vue.js 的目标是通过尽可能简单的 API 实现 响应的数据绑定 组合的视图组件

Vue.js是一种MVVM框架,其中html是view层,js是model层,通过vue.js(使用v-model这个指令)完成中间的底层逻辑,实现绑定的效果。改变其中的任何一层,另外一层都会改变;

解读:

【demo】

【TIP】

Vue实例所代理data对象上的属性只有在实例创建的同时进行初始化才具有响应式更新,若在实例创建之后添加是不会触发视图更新的;

解读:

解读:

【demo】

【demo】

解读:

解读:

【demo】

解读:

【demo】

本章涉及Vue的基础的数据绑定操作,内容包括:

解读:

解读:

Vue实例的 computed 对象默认只有getter,如果你要设置数据,可以提供一个setter,即设置器;

解读:

【TIP】无论是哪种方式,前提都是css中的class要先设定

【demo】

解读:

【demo】

前面简单介绍了一下 v-if 、 v-for 和 v-on 指令,下面的部分将详细介绍以上3个指令;

解读:

【TIP】 v-if和v-show的区别

【demo】

解读:

【demo】

【demo】

解读:

解读:

【demo】

解读:

解读:

像这些包含固定样式的元素 <ul>, <ol>, <table>, <select>,

自定义组件中使用这些受限制的元素时会导致渲染失败;

通的方案是使用特殊的 is属性:

解读:

解读:

【demo】

解读:

内容分发 指的是混合父组件的内容与子组件自己的模板;

解读:

解读:

【TIP】关于组件的命名规范

【demo】

【TIP】

这个$http请求和jquery的ajax还是有点区别,这里的post的data默认不是以form data的形式,而是request payload。解决起来也很简单:在vue实例中添加headers字段:

【Hello Vue.js】

上面的Vue小作品是小羊仿照 SegmentFault 的一篇技博的练手之作,建议各位对照源码亲手练习一次,以便初步熟悉Vue的使用;

参考资料:

【SpringBoot2.0文章汇总目录,java多线程教程文章汇总 长期更新系列

请多多支持

本项目是一个基于 Spring Boot、Spring Cloud、Spring Oauth2 和 Spring Cloud Netflix 等框架构建的微服务项目 前端框架为Vue.js、 ElementUI。

@作者 github 地址 欢迎star

panda微服务工程地址

panda-admin前台工程地址

后续会陆续支持 zipkin服务链路监控 springboot-admin 服务健康监控等

github 地址 跪求大家star

panda微服务工程地址

panda-admin前台工程地址

希望大家有兴趣一起完善的可以联系我

如果有任何问题欢迎加群交流沟通 QQ交流群: 558509374

链接:https://github.com/ljianshu/mt-app

适合没有经验的朋友。

集点菜、用户评价和商家信息为一体的移动端点餐APP

1. 点餐页面

点选商品后自动添加到购物车,并计算好总价,在商品列表、购物车列表和商品详情页都可以随意增减数目,此外左侧商品分类和右侧的商品相互关联,通过better-scroll插件滑动商品列表时,相应的商品分类也会跟着跳转。

2. 用户评价页面

主要包括一个TAB栏,包括三部分:全部、有图和评价三个模块

3. 商家信息页面

主要介绍一些商家基本信息,可以通过better-scroll插件,进行左右滑动图片。

效果预览

再说一篇,是饿了么的翻版。