vue2.0 template Handsome

2023-01-30   ES  

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


  • 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

        new Vue({
          el: '#app',
          data: {
            styleObj: {
              width: '100px',
              height: '100px',
              background: 'purple'
            size: {
              width: '200px',
              height: '200px'
            bg: {
              background: 'blue'
      • 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>
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

        <li v-for = "(item,index) in arr" :key = " index ">
         { item }} -- index{
         { index }}
        <li v-for = "(item,key,index) of obj" :key = "index">
         { item }} -- {
         { key }} -- {
         { index }}
    <h3> json </h3>
        <li v-for = "item in json" :key = "">
            <span>Product name: {{ item.shop_name }} </span>
            <span>Commodity price: {{{ item.price }} </span>
        <li v-for = "item in lists" :key = "">
            <h3>Commodity type: {{ item.shop_name }} </h3>
                <li v-for = "item in item.type" :key = "">
                    <p>Manufacturer: {{ item.maker }} </p>
                <!-<li v-For = "ELE in item.Type": key = ""> 
     <p> Manufacturer: {{ ele.maker }} </p>
    </li> -->
    <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)
      1. List rendering, add a key to the rendering element, as the only identification of this element,
      1. cyclic nested, the parameter name is consistent (V-FOR = “Item in item.type”)
      1. 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 () {
          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>
    • .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, 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">
    • 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>
    • 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
        <div id="example"></div>
        <input type="text" id="text">
        var exa = document.querySelector('#example');
        var text = document.querySelector('#text');
        var data = {
            name: 'Liming'
        var observer = {
        Object.defineProperty(data, 'name', {
           // Through this method, implement
            get() {
            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() {
   = this.value;
        exa.innerHTML =;
        text.value =;


Related Posts

Simply achieve the effect of horse rampant lights with code

Sorting method (C ++)


Convert the SQL2005 character field into a relatively small code after the date of time

vue2.0 template Handsome

Random Posts

Face the operation of a brand new cloud server

Android 4.0.x Browser does not trigger the solution of the onTouchend event Zoewang

Android database ContentProvider packaging principle L

jxufe Zishu Chapter 4 Exercise D 4-4jxufe

Solving the application of WeChat uncompromising (unable to support WeChat sharing) problem