VUE的学习_从入门到放弃（二）

紧接上一节 

-----------------------------------------------------------------------------------------------------------------------------

• 过滤器filter

"app>
    {{money|price}} // | 就表示格式化
　　

　　{{msg|upper("AAA"}}

 

•  原生日期过滤器(js),类的变量传到互传，prototype

 function timeHelper(date,format){
    var res = format.replace("yyyy",date.getFullYear())
                    .replace("MM",date.getMonth()+1 <10?"0"+(date.getMonth()+1):date.getMonth()+1)
                    .replace("dd",date.getDate() <10?"0"+(date.getDate()):date.getDate())
                    .replace("HH",date.getHours() <10?"0"+(date.getHours()):date.getHours)
                    .replace("mm",date.getMinutes() <10?"0"+(date.getMinutes()):date.getMinutes())
                    .replace("ss",date.getSeconds() <10?"0"+(date.getSeconds()):date.getSeconds()); 
    return res;
}   

•  vue强制刷新：

方法一：全局强制刷新，消耗性能大：this.$forceUpdate

if(finalData<0){
     for(let i in allTotalArr){
       if(allTotalArr[i]>0){
         allTotalArr[i]--
         break;
       }
     }
}else{
   for(let i in allTotalArr){
     if(allTotalArr[i]>=0){
       allTotalArr[i]++
       break;
     }
   }
 }
this.$forceUpdate

方法二：this.set 

if(finalData<0){
     for(let i in allTotalArr){
       if(allTotalArr[i]>0){
         allTotalArr[i]--
         this.$set(allTotalArr,i,allTotalArr[i])//强制更新
         break;
       }
     }
}else{
   for(let i in allTotalArr){
     if(allTotalArr[i]>=0){
       allTotalArr[i]++
       this.$set(allTotalArr,i,allTotalArr[i])//强制更新
       break;
     }
   }
 }

•  Vue操作Dom

vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到（注意this指向），此方法尤其适用于父元素需要操作子组件的dom元素，这也是子传父传递数据的一种方法.

• 全局指令： 自定义指令，有两种形式：

通过 Vue.directive() 函数注册一个全局的指令。

通过组件的directives属性，对该组件添加一个局部的指令

创建全局指令：

需要传入指令名称以及一个包含指令钩子函数的对象，该对象的键即钩子函数的函数名，值即函数体，钩子函数可以有多个。

Vue.directive('self_defined_name',{
  bind:function(el,binding){
  //do someting
  },
  inserted: function(el,binding){
  //do something
  },
}

创建局部指令：

直接向创建的 Vue 实例的 directives 字典属性添加键值对，键值对即需要添加的自定义指令及对应钩子函数字典对象。键值对可以有多个，对应多个自定义指令。

new Vue({
  el:'#app',
  directives:{
    self_defined_name1:{
        bind:function(el,binding){
          //do something
        }
        inserted:function(el,binding){
                  //do something
        },
     }

    self_defined_name2:{
        bind:function(el,binding){
          //do something
        }
        inserted:function(el,binding){
                  //do something
        },
     }
  }

})  

• 钩子

钩子函数：指令定义函数提供了几个钩子函数（可选）

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

钩子函数参数：

el: 指令所绑定的元素，可以用来直接操作 DOM 。

binding: 一个对象，包含以下属性：vnode: Vue 编译生成的虚拟节点。

name: 指令名，不包括 v- 前缀。

value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。

oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。

modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

"app"  v-runoob:hello.a.b="message">
 

#简写
Vue.directive('runoob', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

• 计算属性：作用主要是对data中的属性进行处理

在计算属性或方法中使用拉姆达（lambda）表达式代替：function（）{}，不能使用split方法，因为拉姆达（lambda）表达式中的this指向的是window，此时需要使用所谓的that代替this。

生命周期的问题：注意beforeMount与mounted的相关顺序，created和beforeMount相同。

至此，VUE的学习_从入门到放弃（二）就结束啦啦，如果你觉得有用，点个赞吧！

如果您看了本篇博客,觉得对您有所收获，请点击右下角的 [推荐]；

如果您想转载本博客，请注明出处；

如果您对本文有意见或者建议，欢迎留言；

感谢您的阅读，请关注我的后续博客。