VUE的学习_从入门到放弃（二）
紧接上一节
-----------------------------------------------------------------------------------------------------------------------------
-
过滤器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的学习_从入门到放弃（二）就结束啦啦，如果你觉得有用，点个赞吧！
如果您看了本篇博客,觉得对您有所收获，请点击右下角的 [推荐]；
如果您想转载本博客，请注明出处；
如果您对本文有意见或者建议，欢迎留言；
感谢您的阅读，请关注我的后续博客。
