preface
The company’s technology stack mainly focuses on React, but there are few studies due to the limited time. This paper takes the custom instruction in VUE as the starting point to introduce the role of directive and how to implement custom instruction in detail. Vue custom instructions, as the name implies, is vUE provides us with a portal to write various instructions. For example, V-for, V-IF, V-show, etc., will use custom instructions according to the actual business requirements, which can solve the filter to a certain extent and assume the role of some component functions. But in general, since directives need to manipulate the DOM, they are not needed when components are available. Getting back to the point: For example, if you write a V-focus, any input or textarea binding to this property gets focus directly
Custom command V-focus
<body>
<div id="app">
<input type="text" v-focus >
</div>
<script>
Vue.directive('focus',{
inserted:function(el){
el.focus()
}
})
var app = new Vue({
el:'#app'
})
</script>
</body>
Copy the codeThe above directive is relatively simple. Let’s look at the use of advanced custom directives. For example, when you encounter the following scenario: there are many items in a seckill activity, and each item has a countdown. In order to realize the real-time update of the countdown on the page, the traditional way is to use filter, which is bound with a timer. Custom directives are quite different: encapsulate a time.js as needed
Function () {return new Date().getTime()}, getTodayUnix: function() {return new Date(). function() { var date = new Date() date.setHours(0); date.setMinutes(0); date.setMilliseconds(0); date.setMilliseconds(0); return date.getTime(); }, getYeaderUnix: function() {var date = new date () date.setMonth(0) date.setDate(1) date.sethours (0); date.setMinutes(0); date.setMilliseconds(0); date.setMilliseconds(0); return date.getTime(); Function (time) {var date = new date (time); var month = date.getMonth()+1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1; var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); return date.getFullYear() + '-' + month + '-' + day; GetFormatTime: function(timestamp) {var now = this.getunix (); var today = this.getTodayUnix(); var year = this.getYeaderUnix(); var timer = (now - timestamp) / 1000; Var tip = "if (timer <= 0) {tip = 'just'} else if (math.floor (timer / 60) <= 0) {tip = 'just'} else if (timer < 3600) {tip = math. floor(timer / 60) + 'min ago '; } else if (timer >= 3600 && (timestamp - today >= 0)) {tip = math.floor (timer / 3600) + 'hour ago '; } else if (timer / 86400 <= 31) {tip = math.ceil (timer / 86400) + ' '; } else { tip = this.getLastDate(timestamp); } return tip; }}Copy the codeAdvanced user-defined command v-time
<div id="app">
<div class="list" v-time="item" v-for="(item,index) in list" :key="index">
{{item }}
</div>
</div>
</body>
Vue.directive('time',{
bind:function(el,binding){
el.innerHTML = Time.getFormatTime(binding.value*1000)
el._timeout_ = setInterval(()=>{
el.innerHTML = Time.getFormatTime(binding.value*1000)
},60000)
},
unbind:function(el){
clearInterval(el._timeout_);
delete el._timeout_
}
})
Copy the codeJust bind a V-time to each list to change the countdown in real time