Vuejs FAQ Summary __js

1. Response Properties and Methods

Each Vue instance proxies all the properties in its data object.

    var data = {A:1}
    var vm = new Vue ({
          data:data
    })

    Vm.a = = = DATA.A//-> true

    //setting properties also affect raw data 
  VM.A = 2
    data.a//-> 2
    //... vice versa
    data.a = 3
    vm.a//-> 3

That is, you can enable vm.xxx to get and modify instance properties this way. Note:

Note that only the properties of these agents are responsive . If you add a new property to the instance after the instance is created, it does not trigger the view update. We will discuss the response system in detail later.

In this case, the Vuejs VM can be used to modify the instance properties $xxx way, which also triggers a view update and a responsive change. 2. Life cycle Hooks

Life cycle hooks include created,beforecompile,compiled,ready,Beforedestroy ,destroyed

The this point of the hook calls its Vue instance

We can use this in the Hook method to refer to the current instance. There is no concept of a controller in the Vuejs, and the custom logic of the component can be separated into these hooks. 3. Insert Value

word interpolation , only when the first rendering of the value, and will not change with the value of the instance property changes, such as:

    <span> Word interpolation: {* msg}}</span>

inserts raw HTML, which is inserted in an HTML string, and data binding is ignored, such as:

    <div>{{{raw_html}}}</div>

If you need to reuse a template fragment, you should use partials Note:

Dynamically rendering arbitrary HTML on a Web site is dangerous because it can easily lead to XSS attacks. Keep in mind that HTML interpolation is used only for trusted content and never for user-submitted content. 4, the choice of v-show and V-if

V-if is also inert: if the condition is false at initial rendering, nothing is done-Start local compilation (compilation will be cached) when the condition first becomes true.

By contrast, V-show is much simpler-elements are always compiled and preserved, simply based on CSS switching. 5, use track-by, optimize the list cycle

Because V-for determines the reusability of existing scopes and DOM elements by default through the characteristics of the data object, this may cause the entire list to be rendered again. However, if each object has a unique ID attribute, you can use the track-by attribute to give vue.js a hint, and vue.js thus be able to reuse an existing instance as much as possible.

For example, suppose the data is:

{
  items: [
    {_uid: ' 88f869d ', ...},
    {_uid: ' 7496c10 ', ...}}
}

You can then give a hint like this:

<div v-for= "Item in Items" track-by= "_uid" >
  <!--content-->
</div>

Then, when you replace the array items, if Vue.js encounters a new object containing _uid: ' 88f869d ', it knows that it can reuse the scope and DOM elements of the existing object. 6, prop data binding) =

Prop default is one-way binding : When a parent component's properties change, it is passed to the subassembly, but the reverse does not. This is to prevent the child component from unintentionally modifying the state of the parent component-which makes the application's data flow difficult to understand.

workaround : Use a . Sync or . Once binding modifier modifier explicitly to force bidirectional or single binding

<!--default is one-way binding-->
<child:msg= "parentmsg" ></child>

<!--bidirectional binding-->
<child: Msg.sync= "Parentmsg" ></child>

<!--single bind-->
<child:msg.once= "Parentmsg" ></ Child>

7, the component's parent chain

Subcomponents can use this. $parent to access its parent component. Descendants of the root instance can access it using this. $root . The parent component has an array this. $children that contains all of its child elements.