VUE.js some common instructions

1. el: Mount element

2. The data stored in data can be array [], object {}, string '', numerical value, etc. (when a Vue instance is created, it adds all the properties in the data object to the Vue's responsive system. When the values of these properties change, the view will generate a "response", that is, the matching will be updated to the new value)

3. methods are usually functions that implement a particular function

4. Computer calculation properties (calculation properties are cached based on their responsive dependencies) can be simply understood as cache getter s and setter s are built-in functions of computer, which are provided by default

   Example of computer calculation attribute:

   <div id="example">
     <p>Original message: "{{ message }}"</p>
     <p>Computed reversed message: "{{ reversedMessage }}"</p>
   </div>
   

   var vm = new Vue({
     el: '#example',
     data: {
       message: 'Hello'
     },
     computed: {
       // getter of calculated property
       reversedMessage: function () {
         // `this ` points to the vm instance
         return this.message.split('').reverse().join('')
       }
     }
   })
   

5. Watch listening properties (Vue provides a more general way to observe and respond to data changes on Vue instances: listening properties. When you have some data that needs to change with other data changes, you can easily abuse watch -- especially if you have used AngularJS before. However, it is usually better to use calculated properties rather than command-based watch callbacks. Think about it This example:

   <div id="demo">{{ fullName }}</div>
   var vm = new Vue({
     el: '#demo',
     data: {
       firstName: 'Foo',
       lastName: 'Bar',
       fullName: 'Foo Bar'
     },
     watch: {
       firstName: function (val) {
         this.fullName = val + ' ' + this.lastName
       },
       lastName: function (val) {
         this.fullName = this.firstName + ' ' + val
       }
     }
   })
   The above code is imperative and repetitive. Compare it with the version of the calculated property:
   
   var vm = new Vue({
     el: '#demo',
     data: {
       firstName: 'Foo',
       lastName: 'Bar'
     },
     computed: {
       fullName: function () {
         return this.firstName + ' ' + this.lastName
       }
     }
   })
   

6. v-if VS v-show

   The same point: both v-if and v-show can dynamically control the display and hiding of dom elements

   The difference: v-if display hiding is to add or delete the whole dom element, while v-show hiding is to add css – display:none for the element, and the dom element is still there.

   [the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-0cxdmbnl-163442378984) (C: \ users \ Dell \ appdata \ roaming \ typora \ user images \ image-20211015213451968. PNG)]

   [the external chain image transfer fails, and the source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-ve4rgmdr-163442378987) (C: \ users \ Dell \ appdata \ roaming \ typora \ user images \ image-20211015213619224. PNG)]

   Generally speaking, v-if has higher switching overhead, while v-show has higher initial rendering overhead. Therefore, if you need to switch very frequently, v-show is better; if the conditions change little at runtime, v-if is better.

7. V-for (traversal) can traverse an array to render a list, or traverse objects

   (the v-for instruction requires a special syntax in the form of item in items, where items is the source data array and item is the alias of the array element being iterated.)

   <ul id="example-1">
     <li v-for="item in items" :key="item.message">
       {{ item.message }}
     </li>
   </ul>
   var example1 = new Vue({
     el: '#example-1',
     data: {
       items: [
         { message: 'Foo' },
         { message: 'Bar' }
       ]
     }
   })
   

8. v-bind: (attribute binding) short form:: bind

   <!-- Complete grammar -->
   <a v-bind:href="url">...</a>
   
   <!-- abbreviation -->
   <a :href="url">...</a>
   
   <!-- Abbreviations for dynamic parameters (2.6.0+) -->
   <a :[key]="url"> ... </a>
   

9. v-on: (event binding) instruction, which is used to listen for DOM events. Abbreviation:@

   <!-- Complete grammar -->
   <a v-on:click="doSomething">...</a>
   
   <!-- abbreviation -->
   <a @click="doSomething">...</a>
   
   <!-- Abbreviations for dynamic parameters (2.6.0+) -->
   <a @[event]="doSomething"> ... </a>
   

10. v-model (event bidirectional binding)

    The v-model instruction creates a two-way data binding on the form < input >, < textarea > and < Select > elements. It automatically selects the correct method to update the elements according to the control type.

    v-model will ignore the initial values of value, checked and selected attribute s of all form elements and always use the data of Vue instances as the data source. You should declare the initial values in the data option of the component through JavaScript.

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

1. Original template

Double curly braces will interpret the data as plain text rather than HTML code. In order to output real HTML, you need to use v-html

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-kcnbgrz8-1634642378989) (C: \ users \ Dell \ appdata \ roaming \ typora \ typora user images \ image-20211019184046990. PNG)]

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-pwhncoqu-1634642378991) (C: \ users \ Dell \ appdata \ roaming \ typora \ user images \ image-20211019184020640. PNG)]
In order to output real HTML, you need to use v-html

[external chain picture transferring... (img-KCnBGRz8-1634642378989)]

[external chain picture transferring... (IMG pwhncoqu-1634642378991)]