限制 repl trac option write 调用 ... cli
video 2
vue制作weibo交互
vue-> 1.0vue-resource ajax php服务器环境(node)
this.$http.get()/post()/jsonp()
this.$http({url:地址data:给后台提交数据,method:‘get‘/post/jsonpjsonp:‘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(){ //默认调用getreturn 值}}--------------------------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 ->过滤 -> viewVue.filter(name,function(input){});
时间转化器过滤html标记
双向过滤器:*Vue.filter(‘filterHtml‘,{read:function(input){ //model-viewreturn input.replace(/<[^<+]>/g,‘‘);},write:function(val){ //view -> modelreturn val;}});
数据 -> 视图model -> view
view -> model---------------------------------v-textv-forv-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组件:组件间各种通信slotvue-loader webpack .vuevue-router
vue视频学习笔记02
来源: http://www.bubuko.com/infodetail-2024935.html