一、微博交互案例
因为没学过ajax，所以不会交互。等会了之后重新看
二、vue生命周期
- 创建一个钩子函数
created：实例已经创建
beforeCompile编译之前
compiled 编译之后
ready 插入到文档中
beforeDestroy 销毁之前
destroyed 销毁之后
lifecycle.png - 用户会看到花括号标记:
v-cloak 防止闪烁, 比较大段落
[v-cloak]:{display:none}
v-text也能防止闪烁
vue2.0已经删掉
<span>{{msg}}</span> -> v-text
{{{msg}}} -> v-html
- 计算属性的使用:
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'
<div id="box">
<input type="button" value="添加" @click="add" >
<ul>
<li v-for="value in arr" track-by="$index">{{value}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#box',
data: {
arr:['a','b','c']
},
methods:{
add:function(){
this.arr.push('d');
}
}
});
</script>
- 过滤器
配合事件用的：
debounce 延迟执行，加时间
<input type="text" @keyup="add | debounce 2000">
配合数据的：
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始
filterBy 过滤数据
filterBy ‘谁’
orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序
<li v-for="val in arr |limitBy 2">{{val}}</li>
<li v-for="val in arr |limitBy 2 arr.length-2">{{val}}</li>
<li v-for="val in arr1 |filterBy 'b'">{{val}}</li>
<input type="text" v-model="a">
<li v-for="val in arr1 |filterBy a">{{val}}</li>
<li v-for="val in arr1 |orderBy -1 ">{{val}}</li>
<input type="text" v-model="c">
<li v-for="valu in arr2 |orderBy c">{{valu}}</li>
- 自定义
自定义过滤器: model ->过滤 -> view
<div id="box">
{{a | my 1 2}}
</div>
<script>
Vue.filter('my',function(input,a,b){
alert(a+','+b);
return (input<10?'0'+input:input);
})
var vm = new Vue({
el: '#box',
data: {
a:9
},
methods:{
add:function(){
alert(1);
}
}
});
- 时间转化器
过滤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-开头
- 拖拽
<div id="box">
<div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute',right:0,top:0}"></div>
<div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', left:0, top:0}"></div>
</div>
<script>
Vue.directive('drag',function(){
var oDiv = this.el;
oDiv.onmousedown = function(ev){
var disX = ev.clientX - oDiv.offsetLeft;
var disY = ev.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var l = ev.clientX - disX;
var t = ev.clientY - disY;
oDiv.style.left = l +'px';
oDiv.style.top = t +'px';
};
document.onmouseup = function(){
document.onmouseup = null;
document.onmousemove = null;
}
}
});
- 自定义元素指令:（用处不大）
<div id="box">
<zns-red></zns-red>
</div>
<script>
Vue.elementDirective('zns-red',{
bind:function() {
this.el.style.background= 'red';
}
});
var vm = new Vue({
el: '#box',
data: {
msg:'welcome'
},
methods:{
}
});
</script>
display:block是必须的
- 自定义键盘事件
@keydown.up
@keydown.enter
@keydown.a/b/c....
都可以设置对应的弹出信息，但是一些默认事件无法触发，例如ctrl/enter
自定义 ：
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;
- 监听数据变化:
vm.$el/$mount/$options/....
vm.$watch('a',function(){
console.log("发生变化")
})
document.onclick = function(){
vm.a = 1;
}
vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视 ，可以监听json
<div id="box">
{{json | json}}
{{json}}
</div>
var vm = new Vue({
el: '#box',
data: {
json:{name:'zjx',age:20}
},
methods:{
}
});
vm.$watch('json',function(){
console.log("发生变化")
},{deep:true});
document.onclick = function(){
vm.json.name = 'aaa';
}
