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:
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:
- The template contains multiple top-level elements.
- Templates contain only plain text.
- The template contains only other components (other components may be a fragment instance).
- A template contains only one element directive, such
<partial>
as vue-router
or <router-view>
.
- 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:
- A direct index setting element, such as
vm.item[0]={}
;
- 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-for
Cycle time
v-model
The 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