vue 笔记二

vue制作weibo
交互

vue-> 1.0
vue-resource ajax php
服务器环境(node)

this.$http.get()/post()/jsonp()

this.$http({
  url:地址
  data:给后台提交数据,
  method:'get'/post/jsonp
  jsonp:'cb' //cbName
});

----------------------------------
vue事件:

@click=""

数据:

添加一条留言：

获取某一页数据:

getPageData(1);

----------------------------------
vue生命周期:
钩子函数:

created	-> 实例已经创建	√
beforeCompile	-> 编译之前
compiled	-> 编译之后
ready	-> 插入到文档中	√

beforeDestroy	-> 销毁之前
destroyed	-> 销毁之后

----------------------------------
用户会看到花括号标记:

v-cloak	防止闪烁, 比较大段落

----------------------------------

<span>{{msg}}</span>	-> v-text
{{{msg}}}	-> v-html

----------------------------------
ng: $scope.$watch

计算属性的使用:

computed:{
  b:function(){ //默认调用get
    return 值
  }
}

--------------------------

computed:{
  b:{
    get:
    set:
  }
}

* computed里面可以放置一些业务逻辑代码，一定记得return
---------------------------------
vue实例简单方法:

vm.$el	-> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序

vm.$options	-> 获取自定义属性
vm.$destroy	-> 销毁对象

vm.$log();	-> 查看现在数据的状态

---------------------------------
循环：

v-for="value in data"

会有重复数据？
track-by='索引' 提高循环性能

track-by='$index/uid'

---------------------------------
过滤器:
vue提供过滤器:
capitalize uppercase currency....

debounce	配合事件，延迟执行
数据配合使用过滤器:
limitBy	限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始

filterBy	过滤数据
filterBy ‘谁’

orderBy	排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序

自定义过滤器: model ->过滤 -> view

Vue.filter(name,function(input){

});

时间转化器
过滤html标记

双向过滤器:*

Vue.filter('filterHtml',{
  read:function(input){ //model-view
    return input.replace(/<[^<+]>/g,'');
  },
  write:function(val){ //view -> model
    return val;
  }
});

数据 -> 视图
model -> view

view -> model
---------------------------------
v-text
v-for
v-html
指令: 扩展html语法

自定义指令:
属性:

Vue.directive(指令名称,function(参数){
    this.el	-> 原生DOM元素
});

<div v-red="参数"></div>

指令名称: v-red -> red

* 注意: 必须以 v-开头

拖拽:
-------------------------------
自定义元素指令:（用处不大）

Vue.elementDirective('zns-red',{
  bind:function(){
    this.el.style.background='red';
  }
});

------------------------------------------------
@keydown.up
@keydown.enter

@keydown.a/b/c....

自定义键盘信息:

Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;

------------------------------------------------
监听数据变化:

vm.$el/$mount/$options/....

vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视

------------------------------------------------
vue组件:
组件间各种通信
slot
vue-loader webpack .vue
vue-router