LaravelStore中使用Vue.js简化ajax应用 2016-11-03

jQuery的优势是快速对DOM元素进行定位查找,在大量的ajax操作 需要对比较多的dom元素进行状态刷新的时候,工作量是非常大的。

来看下ajax购物车的效果

我们来看一个效果,点击每个商品前面的 多选按钮。选中后 动态计算购物车中被选中的商品状态和总金额。

我们来看下 纯粹使用jquery来实现


【1】在控制器中为模板赋值


【2】在模板中 使用 @foreach @endforeach  显示出登录用户的购物车列表


【3】给每个商品前面的多选按钮表单绑定 点击事件 同时激活ajax操作

front.cart.checked("{{url('cart-checked')}}");

看看具体的js代码

这里看 还没什么,最麻烦的是 根据 ajax的回调函数 重新生成新的dom元素

看看下面 使用jquery的each循环来拼接字符串 生成新的dom元素

最后使用拼接的字符串刷新dom元素。


如果一个页面上面 需要动态刷新的内容过多 ,工作量是非常繁琐 同时效率也比较底下。

我们来总结下 传统的ajax操作是如何来实现的。


【1】控制器赋值给模板

【2】模板中使用@foreach  @endforeach循环显示数据

【3】在模板中引入js代码 绑定事件

【4】js代码激活ajax请求

【5】回调函数 用ajax取回的json格式数据  重新生成新的dom元素

【6】新生成的dom元素刷新页面


相对来说 还是比较复杂


下面我们来看看 使用vue.js如何来简化ajax的应用。

vue.js最大的好处在于 可以实现数据的动态绑定,也就是说:可以大大简化 回调函数 生成 新的dom元素 刷新页面的操作。

我们来看看。

【1】购物车模板页面


这里使用

@{{cart.goods_name}} 代表这里绑定的是从vue处获取的数据

v-for = "cart in carts.cart_list" 这里是循环绑定
v-if 和v-else 相当于 模板里面 if else


我们看看js代码的部分

【2】vue的js代码部分

var app = new Vue({
          el: '#app',
          data: {
                  carts:[]
          },
          
//这段代码 表示 新创建了一个vue对象,同时绑定了页面中的 id为 app的元素

数据来源于jquery发的一个get请求


点击每个商品前面的多选按钮的时候 激活ajax请求 并动态刷新dom元素


需要注意的是:在 vue的methods方法中 需要使用 event.currentTarget 来获取当前元素


使用vue最大的好处在于 不需要手工刷新页面。vue自动实现了 数据的绑定!

使用vue 从此可以告别繁琐的回调函数了。

我们将在后续的版本中 使用vue 进一步精简部分代码。

本文章为 LaravelStore官网原创 转载请注明出处。谢谢合作!