vue购物车(1)

初中级的前端开发,比较适合3年经验的人学
vue是mvvm框架,是基于js的框架,vue-resource是类似jquery的ajax的功能
vue的基础知识介绍, 易用,灵活,高效
易用:

image.png

灵活:渐进式

image.png

不管是单页面还是多页面,什么功能,都需要声明式渲染,
组件系统,
客户端路由;
大规模状态管理:
构建工具:

高效:
16KB min+gzip的运行大小
超快虚拟dom,从虚拟dom写入实际dom.
最省心的优化,从1.0到2.0很大的优化,废弃了过滤器的功能,
vue基础指令:
v-model 表单里面使用
v-text 文本渲染
v-show 控制dom的显示与隐藏
v-if dom不存在
v-bind 绑定属性
v-for 循环,表格,li标签
v-on 事件绑定
过滤器: filter
后台交互的时候,返回很多字段,type值对接口返回的字段进行一个转换,比如说金额加一个货币符号
组件: component
是组件系统,把一个网页拆成一个一个的组件,
实现某些组件的复用.

购物车案例课程安排
1 创建一个vue实例
2 通过v-for 指令渲染产品数据
3 使用filter对金额和图片进行格式化
4 使用v-on 实现产品金额的动态计算
购物车案例,是完成的创建一个vue实例

第一步: 引入vue.min.js 和 vue-resource,js
创建一个 package.json 指令: npm init

image.png

methods 里面要写添加的方法
ready : function(){ },1.0的方法

这就是一个完整的vue实例,,改变了data数据

使用v-for指令渲染信息

image.png

生命周期:
我们在获取后台数据的时候,vue里面有好几种方法:

$http.get("json文件").then(function(res){
  this.[数组]= res.body.XXXX
// 是因为vue把res封装了一层.要找到数组,要好好看看他们之间的区别
})
//记得查看res的数据类型
$http.post("json文件")
$http.jsonp("json文件")
还可以用fetch

使用v-on 绑定事件,实现金额动态计算
绑定事件的方式: v-on:click 或者@click
一个click函数,同时绑定+-,通过传参数去判断加减

<button v-on:click="changeNum(num,1)">+</button>
    {{num}}
 <button @click="changeNum(num,-1)">-</button>

changeNum:function(num,way){
      if(way>0){
        this.num++;
      }else{
        this.num--;
        if(this.num<1){
          this.num=0;
        }
      }
    },

data里面的通常叫做模型;
vue去监听一个不存在的变量:
用this.$set()

v-bind:class class的语法比较特殊,object形式的:
{"键":""}
ES6语法: 箭头函数:

过滤器函数:
这是一个很简单的过滤器函数
书写方式是

<b>{{ todo.price | formatMoney("元")}}</b>

 filters:{
    formatMoney:function (val,type){
      return "￥" + val.toFixed(2)+type
    }
  },

效果是:

image.png

如果想注册全局过滤器在组件里面使用,按照下面这个地址的方法使用就OK了.
http://blog.csdn.net/qq_39507727/article/details/77524704
整体思想就是,在assets下面建立一个js文件夹,新建一个filter.js的脚本,粘贴

let formatMoney(过滤器的名称,自己明明) = (val,type)(参数自己配置,我需要两个,也可以是一个) => {  
    if(val){  
        return  "￥" + val.toFixed(2)+type;(自己要的效果)
    }  
}  
export { formatMoney }  (导出过滤器的名称)

然后在main.js里面引入这些:

import * as filters from './assets/js/filter.js'  
(文件名写对,其他的不用改)
  
Object.keys(filters).forEach(key => {  
    Vue.filter(key, filters[key])  
})

最后,在组件中使用:

 <b>{{ todo.price | formatMoney("元")}}</b>

这就是全局组件的使用方法,区别于局部组件,如果好几个组件都要用到这个过滤器,全局组件比较方便.
使用rescource插件 ,

vue购物车(1)

推荐阅读更多精彩内容