Notes on the basis of Vue and some learning experiences


What you don’t know in Vue, and precautions

  • v-html

  • When v-html is used, the value in the instruction will overwrite the original value in the binding tag, and when v-html is used, do not set it as the place to provide content to users, because v-html is easy to be attacked by XSS

  • v-bind

    • When using v-bind to bind a property with a Boolean property value, if the data istruthyThe Boolean property will not be rendered
    • If the data value is any other existing value, it means the value is true
  • v-if

    • Use the V-IF binding label when its instruction value istruthyWhen the tag was deleted

    • When its instruction value is any other existing value, it means that the value is true

    • If you now have a requirement that multiple tags use V-IF, you can use the template tag to wrap the tags that need to be hidden or displayed together. You can bind V-IF to the tags

    • Title
        Paragraph 1
        Paragraph 2
  • v-show

    • The difference between v-show and V-IF is that v-show sets the label to display: none
  • dynamic parameter

    • Definition: in v-bind, the bound attributes are called parameters, such as ID, class, href, SRC

    • Usage: use the JS expression surrounded by square brackets as the dynamic parameter of the instruction

    • Note: when using dynamic parameters, you need to avoid using uppercase characters for naming, because the browser will cast the naming to lowercase. Secondly, dynamic parameters have some syntax constraints, such as spaces and quotes, which are invalid in dynamic parameters

    • const vm = new Vue({
            el: '#app',
            data: {
              attribute: 'src',
              url: './images/logo-footer.png'
            Calculated: {// use of calculated properties to avoid using quotes and spaces in dynamic parameters
              compsrc() {
                return 's' + 'rc'
  • Reusability in Vue

    • Because Vue renders elements as efficiently as possible, it often reuses existing elements.

    • You may have had this problem before,

    • Account number:
          User name:
      Switch isShow
    • Solution: add an input tagkeyProperty, name the property (string or number) and distinguish it. However, this will not result in the label label not being reused, because the label label does not have the key attribute.

  • V-for considerations

    • In V-for syntax, in can be replaced by of as separator;

    • Array update detection:

      • The mutation method (the mutation method is the method that changes the original array, that is, push, pop, shift, unshift, splice, sort, reverse). Vue can monitor the changes of the array and traverse it dynamically
      • Replacement method (replacement method is to generate a new array, that is, filter, concat, slice, etc.). When using the replacement method, you can replace the original array with a new array
      • Note: Vue is not responsive when you add an array item directly using the index or when you modify the array length
      • resolvent:vm.lists.splice(index,num,newValue) or Vue.set(vm.lists,index,newValue)
      • The same is true for object change detection. You cannot manually add new attributes by object name or new attribute name, but you can also useVue.set(vm.lists,index,newValue)Method.
    • stayUse V-for on

      • {{ item.msg }}
    • The problem of using V-for with V-IF

      • When the two instructions are in the same node, the priority of V-for is higher than that of V-IF
      • We are not recommended to use these two instructions, unless you are rendering nodes for some items, this priority mechanism plays an important role
  • Considerations for using V-for in components

    • In some HTML elements, there are strict restrictions on which elements can appear inside them. For example, if there is a div element in the P element, then the div will be promoted to the outside of the P element. Therefore, there will be some problems when using these constraint elements in component-based development.

    • Solution: use the is property provided in Vue

  • event processing

    • Event modifier
        1. once: bound events are executed only once; can be used in component events
        2. prevent: prevent the occurrence of default events, such as hyperlink jump, click event Click
        3. stop: method to prevent bubbling (from inside to outside)
        4. capture: let events capture (from outside to inside)
        5. self: occurs only when the event itself is triggered
        6. passive: the default behavior (scrolling behavior) for scrolling events will be triggered immediately
      • Note: do not.passiveand.preventUsed together because.preventIt will be ignored and the browser may show you a warning. Remember,.passiveWill tell the browser youDo not want to stopDefault behavior of the event.
  • Form input value binding

    • Modifier
        1. .lazy: convert input event listening (synchronous update) to change event listening (update when focus is lost)
        2. .number: automatically convert user’s input value to numeric type
        3. .trim: automatically filter the first and last blank characters entered by users

Recommended Today

Talk about H5 application cache manifest

Original text: H5 application cache manifest Guide reading Manifestis an application caching mechanism provided by H5, based on which web applications can realize offline cache. For this reason, the browser also provides an API for application caching — applicationcache. Although the technology of manifesthas been abandoned by the web standard, it does not affect our […]