Vue-高级讲师之笔记02

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


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


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

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

2、vue事件:

@click=""
数据:


添加一条留言：


获取某一页数据:
getPageData(1);
----------------------------------
3、vue生命周期:
钩子函数:

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

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

4、用户会看到花括号标记:

v-cloak 防止闪烁, 比较大段落
----------------------------------
<span>{{msg}}</span> ->   v-text
{{{msg}}} ->   v-html
----------------------------------
ng:  $scope.$watch


5、计算属性的使用:
computed:{
b:function(){ //默认调用get
return 值
}
}
--------------------------
computed:{
b:{
get:
set:
}
}


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

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

5、vue实例简单方法:

vm.$el->  就是元素
vm.$data  ->  就是data
vm.$mount ->  手动挂在vue程序
vm.$options ->   获取自定义属性
vm.$destroy ->   销毁对象
vm.$log(); ->  查看现在数据的状态
---------------------------------
6、循环：
v-for="value in data"


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


track-by='$index/uid'

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

7、过滤器:

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
---------------------------------
8、  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;
------------------------------------------------
9、监听数据变化:
vm.$el/$mount/$options/....


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

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

10、vue组件:

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