2018-05-13 二

一、微博交互案例

因为没学过ajax，所以不会交互。等会了之后重新看

二、vue生命周期

1. 创建一个钩子函数
   created：实例已经创建
   beforeCompile编译之前
   compiled 编译之后
   ready 插入到文档中
   beforeDestroy 销毁之前
   destroyed 销毁之后
   lifecycle.png
2. 用户会看到花括号标记:
   v-cloak 防止闪烁, 比较大段落

[v-cloak]:{display:none}

v-text也能防止闪烁

vue2.0已经删掉
<span>{{msg}}</span>     ->   v-text
{{{msg}}}     ->   v-html

3. 计算属性的使用:

    computed:{
        b:function(){   //默认调用get
            return 值
        }
    }
    computed:{
        b:{
            get:
            set:
        }
    }

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

4. vue实例简单方法:
   vm.$el -> 就是元素
   vm.$data -> 就是data
   vm.$mount -> 手动挂在vue程序
   vm.$options -> 获取自定义属性
   vm.$destroy -> 销毁对象
   vm.$log(); -> 查看现在数据的状态
5. 循环
   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>

6. 过滤器
   配合事件用的：
   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

7. 自定义指令
   v-text、v-for、v-html 都叫指令
   指令: 扩展html语法

    Vue.directive(指令名称,function(参数){
        this.el -> 原生DOM元素
    });
    <div v-red="参数"></div>
//可以传参！

指令名称: v-red -> red 注意: 必须以 v-开头

8. 拖拽

<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;
            }
        }
    });

9. 自定义元素指令:（用处不大）

<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是必须的

10. 自定义键盘事件
    @keydown.up
    @keydown.enter
    @keydown.a/b/c....
    都可以设置对应的弹出信息，但是一些默认事件无法触发，例如ctrl/enter
    自定义 ：

Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;

11. 监听数据变化:
    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';
    }