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