Some summary of Vuejs

Some summary of Vuejs

Recently busy work some things, at the same time I also try to put some mobile pages in the project try to rewrite with Vuejs, so there is no time to write articles, today finally have a free to write, because the page has not been written, so will own these days when the page encountered some problems summed up a bit. In fact, a lot of the official website can be found, but we only crossing Web tutorial not to write, it is difficult to understand what the meaning, here I put my use of the column out.

Many of the things mentioned in the article are used in my demo, demo address

1.Vuejs components

Vuejs Building Components using

1	Vue.component (' componentname ', { /*component*/});

Note here that the components need to be registered and reused, which means:

1234567891011121314

Vue.component (' mine ', { Template:' #mineTpl ', props:[' name ', 'title ','  City ',' content ' }); var v=new Vue ({ el:' #vueInstance ', data:{ name:' Zhang ', title:' This is the title ', city :' Beijing ', content :' These is some desc about Blog ' }});

If the error is reversed, it means that the component is used first, but the component is not registered.

Webpack error, use webpack --display-error-details can be wrong

2. Instruction Keep-alive

Look at the demo at the time to see the meaning of Vue-router written keep-alive keep-alive :
If you leave the switched component in memory, you can preserve its state or avoid re-rendering. You can add a keep-alive directive for this purpose

1	<component:is=' Curremtview ' keep-alive></component>

3. How to make CSS work only in the current component

Each Vue component can define its own css,js, and if you want the CSS in the component to work only on the current component, you only need to style write in scoped , that is:

1	<style scoped></style>

4.vuejs Loop Insert Picture

In the write loop, write the following code:

123	<div class="bio-slide" v-for="item in Items" > <img src="{{item.image}}" > </div>

A warning will appear in the console at this time
[Vue Warn]: src="": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead.This means that the "src" attribute interpolation will result in 404 requests. Use V-BIND:SRC instead.
So replace it with the following:

123	<div class="bio-slide" v-for="item in Items" > <img v-bind:src="Item.image" > </div>

The main point here is that v-bind can no longer use double curly braces when writing, according to the official statement:

1	<a v-bind:href="url" ></a>

Here href is the parameter, which tells the v-bind instruction to bind the attribute of the element to the href value of the expression URL. You may have noticed that you can href="" get the same result with an attribute interpolation: that's right, and in fact the interpolation of the intrinsic attribute will be converted to v-bind binding.

5. Bind value to a dynamic property on the Vue instance

For radio buttons, tick box and selection box options, v-model the bound value is usually a static string (for a check box is a logical value):

12	<!--' Toggle ' to TRUE or false-- <input type="checkbox" v-model="Toggle" >

However, there are times when you want to bind value to a dynamic property of the Vue instance, which can be v-bind implemented, and the value of this property may not be a string. For example, bind the value of a checkbox to a dynamic property of the Vue instance:

123456

<input type="checkbox" v-model="Toggle" v-bind:true-value="a" v-bind:false-value="B" > <P>{{toggle}}</p>

After binding here, it is not said that you can click after the switch to change, true false a b because here the definition of the dynamic, A, a, a, B, and can not be directly displayed, at this time

1234	// Vm.toggle = = = = Vm.a//When not selected Vm.toggle = = = Vm.b

So I need to define a, b in data, that is:

1234567

New Vue ({ el: ' ...', data:{ A:' a ', B:' B ' }});

6. Fragment Instances

There are several situations where an instance becomes a fragment instance:

1. The template contains multiple top-level elements.
2. Templates contain only plain text.
3. The template contains only other components (other components may be a fragment instance).
4. A template contains only one element directive, such <partial> as vue-router or <router-view> .
5. The template root node has a Process Control directive, such as v-if or v-for .

These conditions let the instance have an unknown number of top-level elements, which will take its DOM content as a fragment. The fragment instance will still render the content correctly. However, it does not have a root node, its $el   points to an anchor node, an empty text node (a comment node in development mode).
But more importantly, non-process Control directives on component elements, non-prop attributes, and transitions are ignored because there is no root element for binding:

12345678

<!--No, because there is no root element-- <example v-show="OK" transition="Fade" ></example> <!--props-<example :p rop="Somedata" > </example> <!--Process Control Yes, but no transitions-- <example v-if="OK" ></example>

Fragment instances can also be useful, but it is common for a component to have a root node, which ensures that the instructions and attributes on the component elements are correctly converted and that performance is slightly better.

7. Routing Nesting

Routing nesting renders other components inside the component, rather than making the entire page jump router-view itself to render the component to that location, and to make a page jump, render the page to the root component and write to it at the start of the configuration route:

12	var App = vue.extend ({root}); Router.start (App,' #app ');

First, the root component is registered to render each page configured in the route, and the root component is mounted on the element that matches the #app.

8. Implement multiple methods to display different text according to different conditions

v-if, v-else you can implement a conditional selection, but if you have multiple successive criteria selections, you need to use the computed attribute computed . For example, to display the string ' empty ' when nothing is written in the input box, otherwise display the contents of the input box, the code is as follows:

1234	<div id="Test" > <input type="text" v-model="Inputvalue" > <H1>{{changevaule}}</h1> </div>

123456789101112131415

New Vue ({ el:' #test ', data:{ changevaule:' 123 ' }, computed : { changevaule:function () { if (this.inputvalue!==') { return this.inputvalue; } else{ return ' empty '; } } }});

9.Vuejs in the change detection problem 1. Detecting arrays

Due to JavaScript limitations, VUEJS cannot detect changes to the following array:

1. A direct index setting element, such as vm.item[0]={} ;
2. Modify the length of the data, such as vm.item.length .

To solve the problem, 1,vuejs expands the observation array and adds a $set() method to it:

12	same as ' example1.items[0 ' = ... ', but can trigger view update Example1.items. $set (0, { childmsg: ' changed! '})

Problem 2, an empty array substitution is required items .

In addition to this $set() , Vuejs adds a method for observing the array, which is $remove() used to find and delete elements from the target array, which is called internally splice() . Therefore, it is not necessary to:

1234	var index = this.items.indexOf (item) if (index!== -1) { this.items.splice (index, 1)}

Just:

1	This.items. $remove (item);

2. Detecting objects

Vuejs cannot detect the addition or deletion of object properties by ES5 display. Because Vuejs converts an attribute to a property at initialization time, the getter/setter property must be in the data object to allow Vuejs to convert it so that it is responsive, for example:

1234567891011

var data = { A: 1} var vm = New Vue ({ data:data}) //' VM.A ' and ' data.a ' are now in response to vm.b = 2//' VM.B ' is not responding to data.b = 2//' data.b ' is not responding

However, there is a way to add a property after the instance is created and make it responsive. For Vue instances, you can use the $set(key,value) instance method:

12	VMs. $set (' B ', 2)//' vm.b ' and ' data.b ' are now responsive

For normal data objects, you can use the global method Vue.set(object, key, value) :

12	Vue.set (data, ' C ', 3)//' vm.c ' and ' data.c ' are now responsive

Sometimes you want to add properties to an existing object, such as using Object.assign() or _.extend() adding properties. However, new properties added to the object do not trigger the update. You can create a new object that contains the properties of the original object and the new properties:

12	//Do not use ' object.assign (This.someobject, {a:1, b:2}) ' this.someobject = object.assign ({}, This.someobject, { A: 1, B: 2})

10. About Vuejs Page Flicker

In the VUEJS directive v-cloak , this instruction remains on the element until the associated instance finishes compiling. When [v-cloak]{display:none} used in conjunction with CSS rules, this command hides the mustache tag until the instance is ready for completion. Use the following:

123	[v-cloak]{ display:none;}

1	<div v-cloak>{{message}}</div>

This <div> will not be displayed until the compilation is complete

11. With regard to v-forCycle time v-modelThe use

Sometimes it takes a loop to generate input , v-model after binding, to manipulate it with Vuejs, at which point we can v-model write an array in which we can bind different input to each selected[$index] other v-model and manipulate them separately. I used it in the Databind.vue in the demo.

Transition Animation in 12.vuejs

In Vuejs, the CSS defines the animation:

123456789101112131415161718

. zoom-transition{ width:60%; Height:auto; Position:absolute; Left :50%; top:50%; Transform: translate ( -50%,-50%); -webkit-transition:all. 3s ease; Transition:all. 3s ease; }. Zoom-enter, . zoom-leave{ width:150px; Height:auto; Position:absolute; Left :20px; top:20px; Transform: translate (0,0); }

Where the animation in the fixed time to pay attention to the corresponding, what is there, what is below, all to change, if there is no change, should be drawn out, as a public CSS style, in the above CSS, if I only write transform: translate(-50%,-50%); and not write the following transform: translate(0,0); will cause the transform: translate(-50%,-50%); above is added below, thinking this is the same.

Some summary of Vuejs