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已经删掉
{{msg}}     ->   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'

    
    

        
{{value}}
    

6. 过滤器
   配合事件用的：
   debounce 延迟执行，加时间
   
   配合数据的：
   limitBy 限制几个
   limitBy 参数(取几个)
   limitBy 取几个 从哪开始
   filterBy 过滤数据
   filterBy ‘谁’
   orderBy 排序
   orderBy 谁 1/-1
   1 -> 正序
   2 -> 倒序

        
{{val}}
        
{{val}}
        
{{val}}

        
        
{{val}}


        
{{val}}
        
        
{{valu}}

• 自定义
  自定义过滤器: model ->过滤 -> view

   {{a | my 1 2}}

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

    {{json | json}}
    {{json}}

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