Common instruction

  • V-text: The innerText attribute of an element. This attribute is used only with a double tag and has the same effect as {{}}, but is rarely used.

  • V-html: the innerHTML of an element, which is essentially assigning a value to the innerHTML of the element.

  • V-show: Show and hide elements, CSS style based switching. If it is determined to hide, the element’s style is appended with display: None.

  • V-else -if: The previous adjacent element must have v-if or V-else -if.

  • V-else: The previous adjacent element must have v-if or V-else -if. If both v-if and V-else -if have corresponding expressions, then V-else can be written directly.

  • V-if: The insertion and removal of elements, equivalent to the destruction and creation of elements. If the expression is false, it leaves a
    as a tag, if v-if is true in the future, insert the element here (do not leave a separate crater if if has else).

  • V-for: Used to loop over a set of data (arrays or objects). Special syntax must be used: V-for =”item in arrs”. Note: When v-for and V-IF are on the same node, v-for has a higher priority than V-IF. That is, v-if will run in each V-for loop

  • V-on: mainly used to monitor DOM time and perform some operations. Short for [@]

  • V-model: Used to create two-way data binding on form controls such as input/textarea.

  • V-bind: To dynamically bind one or more attributes, often used to bind class, style, href, etc.

  • V-once: Components and elements are rendered only once and are not re-rendered when data changes.

The hook function of the directive

  • bindThe: directive is called the first time it is bound to an element and is executed only once. This is where you can perform one-time initialization Settings.
  • inserted: is called when the bound element is inserted into the DOM of the parent node (only if the parent node exists).
  • update: called when the component is updated.
  • componentUpdated: called when components and subcomponents are updated.
  • unbind: is called when an instruction is unbound from an element and is executed only once.

Custom instruction

Vue global custom long press instruction

    Vue.directive('longpress'.function(el, binding) {
    	var timer = null
    	var start = function(e) {
    		// If it is a click event, the timer is not started and returns directly
    		if (e.type === 'click') {
    			return
    		}
    		if (timer == null) {
    			// Create timer (after 2s, press function function)
    			timer = setTimeout(function() {
    				// Execute by function function
    				// console.log(first, 'asdasdasddddd');
    				binding.value()
    			}, 800)}}var cancel = function() {
    		if(timer ! = =null) {
    			clearTimeout(timer)
    			timer = null}}// Add event listeners
    	el.addEventListener('mousedown', start)
    	el.addEventListener('touchstart', start)
    
    	// Cancel the timer
    	el.addEventListener('click', cancel)
    	el.addEventListener('mouseout', cancel)
    	el.addEventListener('touchend', cancel)
    	el.addEventListener('touchcancel', cancel)
    })
    
Copy the code