The essence of the directive is HTML custom attribute, vue.js directive is a custom attribute starting with v-

Content processing

The V-once interpolation is valid only once

Effect: Makes the interpolation inside an element valid only once.

<body>
  <div id="app">
    <p>This content automatically changes as data changes: {{content}}</p>
    <p v-once>This content does not automatically change as data changes: {{content}}</p>
  </div>

  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        content: 'Content text'}})</script>
</body>
Copy the code

V-text sets the plain text content of the current element

The entire element content is replaced with the specified plain text data.

<body>
  <div id="app">
    <p v-text="100">This is the original content of the P tag</p>
    <p v-text="content">This is the original content of the P tag</p>
    <p v-text="content2"></p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        content: 'Content text'.content2: 'span content '}});</script>
</body>
Copy the code

V-html Sets the HTML text content of the current element

Element content as a whole is replaced with the specified HTML text

<body>
  <div id="app">
    <p v-html="content">This is the default text content</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        // content: 'This is the new content of the directive setting'
        content: 'span content '}});</script>
</body>
Copy the code

Attributes bind

V – the bind command

The V-bind directive is used to dynamically bind HTML attributes.

Abbreviated to:

Like interpolation, expressions (but not statements) are allowed in V-Bind.

<body>
  <div id="app">
    <p v-bind:title="myTitle">P Label content</p>
    <p :title="myTitle">P Label content</p>

    <! -- num is quoted to indicate a string -->
    <p :class="'num' + 1 + 2 + 3">P Label content</p>
    <p :class="prefix + num"></p>

    <! -- <p :class="var a = 1"></p> -->
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        myTitle: 'Here's what the title is.'.prefix: 'demo'.num: 10}});</script>
</body>
Copy the code

You can also bind objects if you need to bind more than one property at a time. Dynamic binding.

<body>
  <div id="app">
    <p v-bind="attrObj">This is the content of the P tag</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        attrObj: {
          id: 'box'.title: 'Sample content'.class: 'clearFix'.'data-title': 'This is the content of data-title'}}});</script>
</body>
Copy the code

The Class binding

Class is an HTML attribute that can be bound by V-bind and can coexist with the class attribute.

You can use expressions.

<body>
  <div id="app">
    <p v-bind:class="cls1">Label content</p>
    <p class="a" :class="cls1">Label content</p>

    <! --> < span style = "max-width: 100%; clear: both;
    <! -- <p class="a b c" :class="cls1 cls2"></p> -->

    <p :class="cls"></p>

    <p :class="bool ? cls1 : cls2"></p>

  </div>

  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        bool:true.cls:"cls1 cls2".// Do not use, not flexible
        cls1:"cls1".cls2:"cls2"}});</script>
</body>
Copy the code

For class bindings, vue.js provides special handling.

  1. Allows you to set the structure of an object in class binding. The object has a key and a value. The key indicates the name of the class to be set, and the value indicates whether it is valid or not

<body>
  <div id="app">
    <p :class="{x:isX, y:isY, z:isZ}"></p>  
  </div>

  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        isX: true.isY:true.isZ:false}});</script>
</body>
Copy the code

  1. Allows arrays to be set during class binding. In the figure below, a and C are the fixed parts of the class name. The curly braces in the middle are the dynamically bound areas.

<body>
  <div id="app">
    <p :class="['a',classB,{c: isC}]"></p>
  </div>

  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        classB:"b".isC:true}});</script>
</body>
Copy the code

Style binding

Style is an HTML attribute that can be bound using V-bind and can coexist with the style attribute.

<body>
  <div id="app">
    <! -- <p v-bind:style="{width: '100px', height: '100px'}"></p> -->
    <p :style="styleObj">Label content</p>

    <p style="width: 100px" :style="styleObj">Label content</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        styleObj: {
          width: '200px'.height: '200px'.// The px unit cannot be removed
          backgroundColor: 'red'.'font-size': '30px'}}});</script>
</body>
Copy the code

When we want to bind more than one style object to an element, we can set it to an array.

<body>
  <div id="app">
    <p :style="[baseStyle, styleObj1]">The first P tag</p>
    <p :style="[baseStyle, styleObj2]">The second P tag</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        // Public style
        baseStyle: {
          width: '100px'.height: '100px'
        },
        styleObj1: {
          backgroundColor: 'red'
        },
        styleObj2: {
          backgroundColor: 'blue'}}});</script>
</body>
Copy the code

Rendering instructions

V – for instructions

traverse

Used to traverse data rendering structures, commonly used arrays and objects can traverse.

v-for="item in arr"  // Take only the contents of an array or object
v-for="(item, index) in arr" // Get the array contents and index
v-for="(value, key, index) in obj" // Get the object content, key, index
Copy the code
<body>
  <div id="app">
    <ul>
      <! Get the contents of the array -->
      <li v-for="item in arr">Array elements are: {{item}}</li><br>

      <! Get array contents and index -->
      <li v-for="(item, index) in arr">Array element contents: {{item}}, index: {{index}}</li><br>

      <! Get object content -->
      <li v-for="value in obj">Object element contents: {{value}}</li><br>
      
      <! Get object content and key, index -->
      <li v-for="(value, key, index) in obj">Object element contents: {{value}}, key: {{key}}, index: {{index}}</li>
    </ul>

  </div>
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app'.data: {
        arr: [Content of the '1'.Content of the '2'.Content of the '3'].obj: {
          content1: Content of the '1'.content2: Content of the '2'.content3: Content of the '3'}}});</script>
</body>
Copy the code

Create multiple tags

It can also be used to create

  • tags
    •     <ul>
      <li v-for="(item, index) in 5">This is the {{item}} element and the index is {{index}}.</li>
    </ul>
Copy the code

    The key attribute

    When using V-for, you should always specify a unique key attribute to improve rendering performance and avoid problems. For example, if there are multiple input boxes, when the content in front of the input box is flipped, the prompt content does not correspond to the input text of the input box.

    Key functions:

    • To avoid the problem
    • Can improve rendering efficiency
    1. If there are no duplicate values in the array, thekeyThe content specified as an element.
    <body>
  <div id="app">
    <ul>
      <li v-for="item in itemList" :key="item">Input box {{item}}:<input type="text">
      </li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        arr: [1.2.3]}})</script>
</body>
Copy the code
    1. If the array appearsDuplicate valuesIt is better to useidDelimit, and useidAs akeyThe value of the
    <body>
  <div id="app">
    <ul>
      <li v-for="(item, index) in itemList" :key="item.id">Input box {{item.value}}:<input type="text">
      </li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        itemList: [{id: 1.value: 2
          },
          {
            id: 2.value:3
          },
          {
            id:3.value:3}]}})</script>
</body>
Copy the code

    Template placeholder

    Template placeholders are set with the

    <body>
  <div id="app">
    <template v-for="item in obj">
      <span>{{ item }}</span>
      <br>
    </template>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        obj: {
          content1: Content of the '1'.content2: Content of the '2'.content3: Content of the '3'}}})</script>
</body>
Copy the code

    V – show commands

    It is used to control the display and hide of elements. It is suitable for frequent switching between show and hide. In essence, the display attribute controls the display and hiding of elements.

    There are other ways to set true or false directly:

    • Sets an expression determined by whether the result of the expression is true or false

    • Bind the data in data to V-show

    <body>
  <div id="app">
    <p v-show="false">Label content</p>
    
    <p v-show="22 > 11">Label content</p>

    <p v-show="bool">Label content</p>

    <template v-show='false'>This is the content</template>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: "#app".data: {
        bool: true}});</script>
</body>
Copy the code

    Pay attention to

    • <template> Can’t usev-showInstruction, becausev-showNature is to usedisplayAnd the<template>It’s not a real label.

    V – if instructions

    Use to control the creation and removal of elements based on conditions.

    <body>
  <div id="app">
    <p v-if="bool">This is the tag content</p>
    <p v-else-if="false">This is the second P tag</p>
    <p v-else-if="false">This is the third P tag</p>
    <p v-else>The last p tag</p>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        bool: false}});</script>
</body>
Copy the code

    Set the key

    Bind different keys to elements of the same type using V-if

    <body>
  <div id="app">
    <div v-if="type==='username'" :key="'username'">User name input box:<input type="text">
    </div>
    <div v-else :key="'email'">Mailbox input box:<input type="text">
    </div>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
        bool: true.type: 'username'}});</script>
</body>
Copy the code

    Don’t use v-for and V-if together

    Pay attention to

    For performance reasons, you should avoid applying v-if and V-for to the same tag

    Because v-for has a higher priority, v-for is executed first, and if v-if is false, meaningless operations are performed.

    <body>
  <div id="app">
    <ul v-if="false">
      <li v-for="item in items">{{item}}</li>
    </ul>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'.data: {
       items: {
         content1: Content of the '1'.content2: Content of the '2'.content3: Content of the '3'}}});</script>
</body>
Copy the code