vue视频学习笔记02
video 2
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
最新文章
- Python标准模块--functools
- Windows on Device 项目实践 5 - 姿态控制灯制作
- input为disabled提交后得不到该值的解决方法
- CMPP错误码说明
- 转:画图解释 SQL join 语句
- mybatis异常
- Webbrowser控件判断网页加载完毕的简单方法 (转)
- 一张图看Google MVP设计架构
- JAVA 内存的认识【转】
- Microsoft Visual Studio 2012正式版官方下载
- wireshark数据包分析实战 第二章
- [翻译]编写高性能 .NET 代码 第二章:垃圾回收
- 在做关于NIO TCP编程小案例时遇到无法监听write的问题,没想到只是我的if语句的位置放错了位置,哎,看了半天没看出来
- Nginx动态路由的新姿势:使用Go取代lua
- [转帖]2016年时的新闻:ASP.NET Core 1.0、ASP.NET MVC Core 1.0和Entity Framework Core 1.0
- FCN 32分析:
- Linux安装rpc监控系统资源
- 一致性哈希算法和Go语言实现
- python 多线程中的同步锁 Lock Rlock Semaphore Event Conditio
- 开源内容管理系统Joomla3.5发布 基于PHP 7