初中级的前端开发,比较适合3年经验的人学
vue是mvvm框架,是基于js的框架,vue-resource是类似jquery的ajax的功能
vue的基础知识介绍, 易用,灵活,高效
易用:
灵活:渐进式
不管是单页面还是多页面,什么功能,都需要声明式渲染,
组件系统,
客户端路由;
大规模状态管理:
构建工具:
高效:
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
methods 里面要写添加的方法
ready : function(){ },1.0的方法
这就是一个完整的vue实例,,改变了data数据
使用v-for指令渲染信息
生命周期:
我们在获取后台数据的时候,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函数,同时绑定+-,通过传参数去判断加减
{{num}}
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语法: 箭头函数:
过滤器函数:
这是一个很简单的过滤器函数
书写方式是
{{ todo.price | formatMoney("元")}}
filters:{
formatMoney:function (val,type){
return "￥" + val.toFixed(2)+type
}
},
效果是:
如果想注册全局过滤器在组件里面使用,按照下面这个地址的方法使用就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])
})
最后,在组件中使用:
{{ todo.price | formatMoney("元")}}
这就是全局组件的使用方法,区别于局部组件,如果好几个组件都要用到这个过滤器,全局组件比较方便.
使用rescource插件 ,