Mustache syntax supports writing js

• 1. Usage:

  • Content: Must be added {{js syntax}}

  • Properties: The attribute value in the attribute can directly write JS syntax, and the data in the attribute value is equivalent to global variables

    • Add a custom attribute to a tag/existing attribute

      IMG SRC is already attributes 
       <img src = "" /> 
      
       // Data-index is a custom attribute. Web web page recommends that we use data-form to define custom attributes 
       <img data-index = "0" />

    • instructions

      • vue want
      • vue to this attribute with V logo, a name:instructions [Strike Angular]

      <div v-html = "msg">  </div>
  

• 2. Support for JS

  • Data type
    • first
      • Initial data type: Number String Null Undefine Boolean
      • Quote Data Type: Object [Function Array …]
    • • Basic Data Type: Number String Boolean
      • Special data type: null undefine
      • complex data type; object [function array …]
  • Output syntax
    • console
    • alert
  • expression / operator
    • Triple expression

• 3. Summary

  • null and undefined will not be displayed. Other data types are supported and can be displayed
  • The global attributes that are mounted on Window, we cannot use: for example: console alert
  • {
    {}} Don’t write process control
    • for
    • if
    • while
    • do…while
  • {
    {}} Support the three yuan expression, which also supports the operator
  • short circuit principle is also supported

    The purpose of the

​

instruction: operation DOM

Explanation: MVVM VM-> V data driver

1, V-HTML: Transfer output, that is, you can parse XML data

2, V-TEXT: Non-rotary output, that is, it cannot analyze XML type data

3、v-bind

• Data and attributes are bound to one -way data: assigning data in Vue to the attribute value

  <img v-bind:src = "src" />
  <div v-bind:class = "">    </div>
  <div v-bind:style = "">    </div>
  

• Brief form form

  <img v-bind:src="src" alt="">
  <img :src="src" alt="">
  

• class name binding

  • usage

    • Object form usage

          <p :class = "{ bg: true,size: true }"></p>
          <p :class = "{ bg: true,size: false }"></p>
          <p :class = "{ [classA]: true,[classB]: true }"></p>/* 
             Thinking: If I define two data classa classb in Data, how to use it for object usage? 
               <p: class = "{classa: true, classb: true}">></p>* Classa, classb, and the Classa Classb in the Data options defined by our definitions 
      
             How to solve: 
           <p: class = "{[classa]: true, [classb]: true}"></p>
       */
      

    • Array form usage

          <p :class = "[ 'size','bg' ]"></p>
          <p :class = "[ classA,classB ]"></p>
          <p :class = "[ classA,classB,5>3?'a':'b']">  </p>
      

• style binding

  • usage

    <script>
      new Vue({
            
        el: '#app',
        data: {
            
          styleObj: {
            
            width: '100px',
            height: '100px',
            background: 'purple'
          },
          size: {
            
            width: '200px',
            height: '200px'
          },
          bg: {
            
            background: 'blue'
          }
        }
      })
    </script>
    

    • Object form usage

      <p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p>
      <p :style = "styleObj"></p>
      

    • Array form usage

      <p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
      <p :style = "[size,bg]"></p>
      

1. v-if
2. v-else-if
3. v-else
4. V-SHOW condition display

<div id="app">
    <h3>Condition rendering -one -way branch</h3>
    <p v-if = "flag"> A </p>
    
    <h3>Condition rendering -Double Road Branch</h3>
    <p v-if = "flag"> A </p>
    <p v-else > B </p>
    
    <h3>condition rendering -multi -road branch</h3><p v-iF = "Type === 'Food'"> Food</p><p v -E-if = "Type === 'game'"> Game</p>
    <p v-else>Sleep</p>
    
    <h3>Condition display</h3><p v-show = "showflag"> Condition display</p>
  </div>

new Vue({
    
    el: '#app',
    data: {
    
      flag: true,
      type: 'Food',
      showFlag: true
    }
  })

• V-IF and V-SHOW
  • V-IF controls the existence of the element
  • V-SHOW controls the display of the element: None attribute
  • When False was initially false, V-SHOW performance loss was higher.
  • When you need to switch frequently, use V-Show
  • occasionally switch, use V-IF

• V-FOR instruction

  <h3>array</h3>
  <ul>
      <li v-for = "(item,index) in arr" :key = " index ">
          {
       { item }} -- index{
       { index }}
      </li>
  </ul>
  
  <h3>object</h3>
  <ul>
      <li v-for = "(item,key,index) of obj" :key = "index">
          {
       { item }} -- {
       { key }} -- {
       { index }}
      </li>
  </ul>
  
  <h3> json </h3>
  <ul>
      <li v-for = "item in json" :key = "item.id">
          <span>Product name: {{ item.shop_name }} </span>
          <span>Commodity price: {{{ item.price }} </span>
      </li>
  </ul>
  
  <h3>Cycling</h3>
  <ul>
      <li v-for = "item in lists" :key = "item.id">
          <h3>Commodity type: {{ item.shop_name }} </h3>
          <ul>
              <li v-for = "item in item.type" :key = "item.id">
                  <p>Manufacturer: {{ item.maker }} </p>
              </li>
              <!-<li v-For = "ELE in item.Type": key = "ele.id"> 
   <p> Manufacturer: {{ ele.maker }} </p>
  </li> -->
          </ul>
      </li>
  </ul>
  
  <h3>cycle Number / String</h3>
  <p v-for = "item in 10"> {
       { item }} </p>
  <p v-for = "item in 'abc'"> {
       { item }} </p>
  

• Summary:

  • 1. List rendering parameters can be written three, which are Item Key Index (can be other names)
  • 2. List rendering, add a key to the rendering element, as the only identification of this element,
  • 3. cyclic nested, the parameter name is consistent (V-FOR = “Item in item.type”)
  • 4. in / of can be used

• event contains part

• event source

• event type

• event processing function

• event execution form

  • js execution
  • HTML execution (Vue selection)

• In ordinary html<button Onclick = "Alerthandler ()"> Click </Button>

• v-on

    <div id="app"><Button v-On: click = 'fn'> Click</button><button @click = 'fn'> Click</button>   <!-Abbreviation form-><button @click = "eventhandler"> Event object</button><button @click = "argumentshandler (a, b, $ event)"> event parameters</button>
    </div> <!-$ EVENT represents event objects->                               
  

   new Vue({
        
      el: '#app',
      data: {
        
        a: 10,
        b: 20
      },
      methods: {
        
        // Methods is called a method, which is stored in the event processing procedure
        fn () {
        
          alert('Event')
        },
        eventHandler ( e ) {
         // Event object
          console.log( e )
        },
        argumentHandler ( a,b,e ) {
        
          console.log( e )
          console.log( a + b )
        }
      }
  

  • event object: the event object records the information of the entire event

  • event parameters

    • formal parameter: Define the parameters of the function/method

    • Actual parameter: The parameters passed in when calling the function/method

    • Note: When there are multiple parameters in one event processing program, one of the parameters is the event object. When we call this method, we need to add a actual parameter

• event modification

  <div id="app">
      <h3>event modification</h3>
      <div class="big" @click.stop = 'bigHandler'>
        <div class="middle" @click.stop = "middleHandler">
          <div class="small" @click.stop = "smallHandler"></div>
        </div>
      </div>
    </div>
  

  • .stop prevented incident bubbling

  • .prevent to prevent the event default event

  • .once event will only trigger once

  • .Self event was not triggered from internal elements, that is, event.target is its own element

  • .capture use event capture mode, that is, perform external elements first, and then execute internal elements

  • modifier can be connected in series, and only the modifier can be

    <!-modifier can be connected in series->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-Only the modifier->
    <form v-on:submit.prevent></form>
    

  • .passive

    <!-The default behavior of the rolling event (that is, rolling behavior) will immediately trigger->
    <!-instead of waiting for `OnScroll` to complete->
    <!-This contains the situation of `event.preventdefault () `->
    <div v-on:scroll.passive="onScroll">...</div>
    

    • .passivemodifiers can especially improve the performance of the mobile terminal.
    • Don’t put it.passiveand.preventUse together, because.preventwill be ignored, and the browser may show you a warning at the same time. please remember,.passivewill tell the browser youNoWant to stop the default behavior of the event

• Keyboard modifier

  <div id="#app">
  	<h3>Keyboard modifier</h3>
      <input type="text" @keyUp.13 = "getValue">
      <input type="text" @keyUp.enter = "getValue">
  </div>
  

  • can be directly formedKeyboardEvent.keyAny valid key name of exposure is converted to Kebab-Case as a modifier

    • en $ event.Key is called when ENTER (in examples)
    • .enter
    • .tab
    • .delete(Capture “Delete” and “Retreat” keys)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right

  • UsekeyCodefeatures are also allowed. (number)

  • can also pass the overall situationconfig.keyCodesobjectCustomized key fixing the name：

    // You can use `v-on: keyup.f1`
    Vue.config.keyCodes.f1 = 112
    

• v-model

   <div id="app">
      <input type="text" v-model = "msg">
      <p> {
       { msg }} </p>
    </div>
  

  • Two -way data binding
    • VM Change V to change with it
    • V changed, VM also changed
  • V-Model is only used for form
    • Reasons: VALUE attributes by default V-MODEL default
  • The bottom layer realizes two -way data binding

  <body>
      <div id="example"></div>
      <input type="text" id="text">
  </body>
  <script>
      var exa = document.querySelector('#example');
      var text = document.querySelector('#text');
      var data = {
         
          name: 'Liming'
      };
      var observer = {
         ...data
      };
      Object.defineProperty(data, 'name', {
         // Through this method, implement
          get() {
         
              return observer.name;
          },
          set(val) {
         // When the attribute value is changed, the method is triggered, and the parameter is the new value of the attribute
              exa.innerHTML = val;
          }
      });
      text.addEventListener('keyup', function() {
         
          data.name = this.value;
      });
      exa.innerHTML = data.name;
      text.value = data.name;
  </script>