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

发布： 2022年2月9日 • 经验百科

紧接上一节

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

过滤器filter

<!-- filter 使用场景：在data中的数据格式，例如（货币、时间、大小写）等需要格式化的时候使用 -->
<!-- 分为全局变量和局部，例如 全局在一个html页面之的body中写 如果需要用到的全局很多也可以将其全部写到一个js文件中，然后去引用-->
<div id="app>
    {{money|price}} // | 就表示格式化
　　<br>
　　{{msg|upper("AAA"}}
</div>
<script>
Vue.filter("price",function(value){
    return calue.toFixed(2); //调用，返回
    console.log(value);
})
<!-- 简写形式  只适合一个表达式的情形-->
Vue.filter("peice",value=>value.toFixed(2))
var vm= new Vue({
    el:"#app",
    data:{
        money:100
    },
    filters:{
    　　upper:function(value,text){
　　　　　　return value.toUpperCase()+text;
　　　　},
    }
}):
</script>

原生日期过滤器(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 钩子中可用。

<div id="app"  v-runoob:hello.a.b="message">
</div> 
<script>
Vue.directive('runoob', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})
new Vue({
  el: '#app',
  data: {
    message: 'lys!'
  }
})
</script>

#简写
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的学习_从入门到放弃（二）就结束啦啦，如果你觉得有用，点个赞吧！

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

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

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

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

搜索内容

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

过滤器filter

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

vue强制刷新：

Vue操作Dom

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

钩子

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

推荐这些文章：

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

过滤器filter

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

vue强制刷新：

Vue操作Dom

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

钩子

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

推荐这些文章：

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