What is a directive?

In VUE, the directive begins with a V – and is a special custom interline property. The expected value of a directive attribute is an expression, and the directive’s job is to apply some behavior to the DOM when the value of the expression changes. Only v-for is outside of a class, not followed by an expression.

An instruction can receive a single parameter, represented by a colon after the instruction name. Such as:

<a v-bind:href="url">Copy the code

After the instruction is added, the URL is parsed as a variable.

Two, common instructions

2.1 v-Model two-way binding data

The V-model directive can be used to create two-way data binding on input, TextaREA, and SELECT elements. It automatically selects the correct method to update the element based on the control type.

<! --> <input v-model="content"/><p>{{content}}</p> data () {return {content: 'I'm bidirectional data binding, can have defaults ',}}Copy the code

2.2 v-for list rendering

Use V-for to render a list of data.

  • Where list is the source data array and item is the alias of the array element being iterated over.

    <! - use the instance - - > < ul > < li v - for = "item in the list:" key = "item. Id" > {{item. The girl}} < / li > < / ul > data () {return {list: [{id: '1', {id:'2', girl:' 2'}]}})Copy the code

    2.3. V-bind Dynamically binds attributes

    Purpose: Used to dynamically bind properties, property values change when the page data or style to keep the latest state.

    <! -- Change url image address, <img v-bind: SRC ="url" Alt =""> data () {return { url:'http://picture.ik123.com/uploads/allimg/161223/4-161223163338.jpg' } }Copy the code

    2.4. V-on Binding event

    Function: bind events to elements, and execute functions in Methods after events are triggered. You can abbreviate it to @.

    Use the syntax: < div v – on: click = “fun” > < / div > or < div @ click = “fun” > < / div >

    <! </button> methods:{print(){console.log('vue')}}Copy the code

    Note: The above v-on is used with no arguments, so the parentheses after the method can be omitted.

    When v-ON parameters are passed, parentheses must be added as follows.

    <! -- Click the button, Vue --> <button v-for="item in list" @click="print(item)"> click {{item}}</button> data () {return {list:['one', 'two', 'three']}}, the methods: {print (item) {the console. The log (' click 'item)}}Copy the code

    This is a traversal of buttons that, when clicked, print the current element’s content.

    2.5, v-if/V-else -if/v-else

    Function: Controls the display and hiding of elements according to logic.

    Use the syntax: < div v – if = “Boolean expression |” > < / div >

    Note: The syntax for using v-if/V-else/V-else is the same, but v-else and V-else must be used with V-if, not alone.

    <! -- Change the value of show <div > <span v-if="show"> true </span> <span v-else> false </span> </div> data () {return {show:true,}}Copy the code

    2.6, v-show/V-hide

    Function: Controls the display and hiding of elements.

    Use grammar:

    < div v - show = "Boolean expression |" > < / div > / / expression for real time display < div v - hide = "Boolean expression |" > < / div > / / expression is really hideCopy the code
    <div > <span v-show="show"> True </span> <span v-hide="show"> false </span> </div> data () {return {show:true,}}Copy the code

    2.7 v-HTML Parses HTML tags

    2.8 v-once only renders once when entering the page and no longer renders

    2.9 v-cloak prevents flicker

    2.10. V-pre outputs the elements inside the label in situ

    2.11. V-text Parses text

    V – IF vs V -show

    Similarities: Both control the hidden display of elements.

    The difference between:

    • V-if is conditional rendering. When the conditions are met, all node elements will be rendered, including event bindings, etc. If the conditions are not met, the node will not be rendered, including events, etc. But v-show hides the display of the node with display: None, whose contents and events are always present.
    • When v-IF switches back and forth, the browser needs to constantly render, which eats up performance, so the cost is high. But V-show just hides the display, so the cost is lower.
    • V-show requires full rendering during page initialization, which is more expensive than V-if.
    • Due to the nature of V-IF, it is suitable to speed up initial rendering. V-show is suitable for scenarios with frequent switching.