vue2.0的基本使用

1.Vue基础知识

指令的使用:
v-model 双向模型改变
v-text 文本渲染,渲染页面比较多
v-show 控制DOM的显示隐藏
v-if 控制DOM 判断
v-bind 绑定属性
v-for 循环,只要用于列表等
v-on 事件绑定
v-model:主要是在表单里面使用。比如文本框、下拉框、单选、复选、textarea。v-model是一个双向的功能。文本框输入以后,模型也会发生改变。反之模型改变了文本框也会改变。
v-text:主要用于文本的渲染。和{{}}功能一样。但是{{}}在第一次页面Vue木有初始化完成会显示{{}}字符。故文本渲染多用v-text。
v-show:控制显示隐藏。dom是存在的。仅仅加display block: display none。
v-if:kong'z控制显示隐藏。如果dom不显示,整个dom没有不存在。
v-bind:绑定属性。给一个dom元素添加属性。【比如:在做图片的渲染过程中,如果图片的src地址是动态的,那么就需要v-bind去绑定src属性,去给这个src赋值。】。
v-for:循环。主要用于表格,<li> 标签 去循环一个数组。
v-on:事件绑定。【v-on:同等于@】
filter : 过滤器。格式化数据。如后台返回金额19数字。页面显示:¥19.00元。
component :组件。在做单页面过程中使用多些。把每一个网页做成多个组件然后拼接。起到组件复用。如页面头部底部和轮播等。

2.创建Vue实例


3.使用v-for指令渲染商品列表

-函数内部this指向改变了,使用vue resource方法之前要定义一个内部变量_this保存this

-this.$http.{请求方式}('请求地址'{请求的数据}).then(function (res){})
 返回的数据被包装在了res.body里面
-加载页面时通过mounted钩子函数中的this.callbackfn()发送请求
vue2.0的基本使用

4.过滤器

1.不用在外面声明,箭头域(ES6)表示已指向外层,内部this不用加下划线,把里面的this提升到和外面的this一样的作用域;
2.filter分为全局和局部,语法变为函数(两个参数)。全局过滤器可以在全部实例使用,局部过滤器只有在当前的实例使用
vue2.0的基本使用

总结:
列表通过v-for指令进行循环
v-text指令对文本,金额,商品名称进行赋值
商品数量是文本框,通过v-model实现双向数据绑定
总金额局部过滤器和全局过滤器的使用
通过v-on或@click实现事件绑定
商品的选中,全选,class,通过v-bind实现

data是Vue的模型,改变元素,操作dom
mounted一般会配合方法$nextTick使用,因为mounted并不能代表Vue实例已经插入到dom节点里去,所以使用$nextTick保证初始化完全加载
methods定义所有的事件和调用的方法

slice:对数组进行切割,返回全新数组
splice:对原生数组进行操作


1.看到列表:v-for
2.金额¥19.00元:filter
3.看到输入框:v-model
4.一些操作:v-on:click=""或 @click=""
5.样式变化:v-bind:class="{}"或 :class="{}"
6.v-for中可嵌套v-for
7.vue.set添加一个本身没有的变量
8.vue.resource插件 支持get,post,delete,put,jsonp 但现在官方推荐axios
9.computed的使用
10.ES6的语法学习 大势所趋