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	防止闪烁, 比较大段落

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

{
    {msg}}	-> v-text{
    {
    {msg}}}	-> v-html

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

ng: $scope.$watch

计算属性的使用:

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

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

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

* computed里面可以放置一些业务逻辑代码，一定记得return

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

vue实例简单方法:

vm.$el	-> 就是元素vm.$data -> 就是datavm.$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/-11 -> 正序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元素});
     

指令名称: 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