You don’t know vue

Use computed properties to return object points when using class object syntax

<div v-bind:class="classObject"></div>
data: {
  isActive: true.error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'}}}Object syntax can also be used in arrays
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

Copy the code

V-for allows traversal of objects

// object: {
// title: 'How to do lists in Vue',
// author: 'Jane Doe',
// publishedAt: '2016-04-10'
// }
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}  
</div>
/** * The result of object.keys () is traversed when traversing an Object, but its result is not guaranteed to be consistent across different JavaScript engines. * /
Copy the code

Array update detection

• Vue internally reconstructs the array methods and updates the view push(), pop(), shift(), unshift(), splice(), sort(), reverse() every time these methods are used
• Replace arrays for example: filter(), concat(), and slice(). They do not alter the original array, but always return a new one. When using a non-change method, you can replace an old array with a new one. (You might think this would cause Vue to discard the existing DOM and re-render the entire list. Fortunately, this is not the case. Vue implements some clever heuristics to maximize the reuse of DOM elements, so it is very efficient to replace an array with the same elements.

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)})Copy the code

You can use computed properties and methods as a list of loops

// Calculate attributes
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1.2.3.4.5]},computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2= = =0}}})// In cases where computed attributes do not apply (for example, in nested V-for loops) you can use a method:

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>

data: {
  sets: [[ 1.2.3.4.5 ], [6.7.8.9.10]]},methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2= = =0}}})Copy the code

Event modifiers you don’t know ()

• (.stop,.prevent,.capture,.self,.once,.passive)

  <! -- common modifiers -->
<! -- Prevent the click event from propagating -->
<a v-on:click.stop="doThis"></a>

<! Submit events no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<! -- modifiers can be concatenated -->
<a v-on:click.stop.prevent="doThat"></a>

<! -- only modifiers -->
<form v-on:submit.prevent></form>


<! -- Modifiers you don't know -->
<! Add event listener with event capture mode
<! Events triggered by an inner element are processed here before they are processed by the inner element.
<div v-on:click.capture="doThis">.</div>

<! Trigger handler only if event.target is the current element itself -->
<! -- that is, events are not triggered from internal elements -->
<div v-on:click.self="doThat">.</div>When using modifiers, order is important; The corresponding code is generated in the same order. Therefore, using V-on :click.prevent. Self blocks all clicks, whereas V-on: click.self. Prevent only blocks clicks on the element itself.<! Click event will only trigger once -->The once modifier can also be used for custom component events<a v-on:click.once="doThis"></a>Vue also provides the.passive modifier corresponding to the passive option in the addEventListener.<! -- The default behavior of the scroll event (i.e. the scroll behavior) will be triggered immediately -->
<! Instead of waiting for 'onScroll' to finish -->
<! -- This includes' event.preventdefault () '-->
<div v-on:scroll.passive="onScroll">.</div>The.passive modifier is especially useful on mobile. Do not use.passive with.prevent, as.prevent will be ignored and the browser may show you a warning. Remember that.passive tells the browser that you do not want to block the event's default behavior.Copy the code

Vue component communication (total 8 types)

• Pass through props
• Emit a custom event through $emit
• Use the ref
• EventBus
• root
• Vuex
• Attrs and listeners
• Dojo.provide and Inject

The above 6 are commonly used without going into detail

 <! -- Attrs and listeners -->$Listeners contain feature bindings (except class and style) that are not recognized (and retrieved) as prop in the parent scope. Internal components can be passed in with v-bind="$attrs"<! -- child: did not declare foo in props -->
<p>{{$attrs.foo}}</p>

 <! -- parent -->
<HelloWorld foo="foo"/>


 <! What's the value of the Grandson's job?
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>

 <! -- Child2 -->
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>

 <!-- Grandson使⽤ -->
<div @click="$emit('some-event', 'msg from grandson')">
{{msg}}
</div>

Copy the code

/ / dojo.provide and injects
// 1 provide and injects must be paired
// 2 provide is defined in the root component or parent component. Child components can receive this value in child or grandchild components through injects
// 3 is mainly used in grandson components to enable cross-level access without writing too many props
// Parent or root
provide(){
    return {
        foo:'foo'}}// Sun or son
inject: ['foo'] // Get the value passed by the ancestor component

Copy the code