Summary of ultra-comprehensive use of vue. js

Vue. js is currently a very popular JavaScriptMVVM library, which is built based on the idea of data-driven and componentized. Compared with Angular. js, Vue. js provides simpler and easier-to-understand APIs, allowing us to quickly get started with Vue. js. The following article describes how to use vue. js. Vue. js is currently a popular JavaScript MVVM library, which is built based on data-driven and componentized ideas. Compared with Angular. js, Vue. js provides simpler and easier-to-understand APIs, allowing us to quickly get started with Vue. js. The following article describes how to use vue. js.

I. Vue. js Components

Use vue. js build Components

Vue.component('componentName',{ /*component*/ })；

Note that the component must be registered before use, that is:

Vue.component('mine',{  template:'#mineTpl',  props:['name','title','city','content'] }); var v=new Vue({ el:'#vueInstance', data:{  name:'zhang',  title:'this is title',  city:'Beijing',  content:'these are some desc about Blog' }});

If an error is reported in turn, it indicates that the component is used first, but the component is not registered.

After webpack reports an error, you can use webpack -- display-error-details to troubleshoot the error.

Ii. Command keep-alive

When reading the demo, we can see the meaning of keep-alive and keep-alive in vue-router:

If you keep the switched component in the memory, you can retain it or avoid re-rendering. To do this, you can add a keep-alive command

3. How to Make css only play a role in the current component

Each vue component can define its own css and js. If you want the css written in the component to only work for the current component, you only need to write scoped in the style, that is:

Iv. Insert images cyclically in vuejs

When writing a loop, write the following code:

A warning is displayed on the console.
[Vue Warn]: src = "{item. image }}": interpolation in "src" attribute will cause a 404 request. use v-bind: src instead. this indicates that interpolation in the "src" attribute will result in 404 requests. Use v-bind: src instead.

So replace it with the following:

It is important to note that v-bind cannot be used for writing {} again. According to the official statement:

Here, href is a parameter, which tells the v-bind command to bind the href feature of the element to the value of the expression url. You may have noticed that you can use feature interpolation href = "{url}" rel = "external nofollow" to get the same result: That's right, in fact, the internal feature interpolation will be converted into v-bind binding.

5. Bind value to a dynamic attribute of the Vue instance

For the single-choice button, check box and select box options, the value bound to the v-model is usually a static string (for the selected box, it is a logical value ):

However, if you want to bind a value to a dynamic attribute of the vue instance, you can use v-bind, and the value of this attribute can be a string. For example, bind the Checkbox value to a dynamic attribute of the vue instance:

{{toggle}}

After binding, it does not mean that you can switch from true to false to a and B after clicking. Because dynamic a and B are defined here, it cannot be displayed directly.

// Vm. toggle === vm. a // vm. toggle === vm. B when not selected

Therefore, define a and B in data, that is:

new Vue({ el:'...', data:{ a:'a', b:'b'  }});

Vi. Fragment instance

In the following situations, the instance is converted into a fragmented instance:

1. The template contains multiple top-level elements.

2. The template only contains plain text.

3. The template contains only other components (other components may be a fragment instance ).

4. The template contains only one element instruction, such Or vue-router's .

5. The template root node has a flow control command, such as v-if or v-.

In these cases, the instance has an unknown number of top-level elements, which treat its DOM content as fragments. The fragment instance still correctly renders the content. However, it does not have a root node. Its $ el points to an anchor node, that is, an empty text node (in development mode, it is a comment node ).

But more importantly, the non-Flow Control commands on component elements, non-prop features and transitions will be ignored because there is no root element for binding:

Fragment instances are also useful, but normally a component has a better root node, which ensures correct conversion of commands and features on component elements, and slightly better performance.

VII. Route nesting

Nested routing will render other components to this component, instead of redirecting the entire page to the router-view itself, rendering the component to this position, the page will be rendered to the root component and written at the beginning of Route Configuration:

var App = Vue.extend({ root });router.start(App,'#app');

First, register the root component to render the pages configured in the route, and then mount the root component to the elements matching the # app.

8. Multiple methods for displaying different texts based on different conditions

V-if and v-else can be used to select conditions. However, if multiple consecutive conditions are selected, computed must be used. For example, the 'empty' string is displayed when nothing is written in the input box. Otherwise, the content in the input box is displayed. The Code is as follows:

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

IX. Vuejs change detection problems

1. detection array

Due to javascript restrictions, vuejs cannot detect the following array changes:

Directly index setting elements, such as vm. item [0] = {};

Modify the Data length, such as vm. item. length.

To Solve Problem 1, Vuejs extended the Observation Array and added a $ set () method for it:

// Same as 'example1. items [0] =... ', but can trigger view update example1.items. $ set (0, {childMsg:' Changed! '})

Question 2: replace items with an empty array.

In addition to $ set (), vuejs also adds the $ remove () method to the Observation Array to find and delete elements from the target array, and CALLS splice () internally ().

Therefore, you do not need:

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

Only:

this.items.$remove(item);

2. Check objects

As shown by ES5, Vuejs cannot detect the addition or deletion of object attributes. Because Vuejs converts the attribute to getter/setter during initialization, the attribute must be converted to Vuejs in the data object to make it responsive. For example:

Var data = {a: 1} var vm = new Vue ({data: data}) // 'vm. a' and 'data. a' now the response vm. B = 2 // 'vm. B 'is not the response data. B = 2 // 'data. B 'not responding

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

Vm. $ set ('B', 2) // 'vm. B 'and 'data. B' are responding now

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

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

Sometimes you want to add some attributes to an existing Object, such as using Object. assign () or _. extend () to add attributes. However, new attributes added to an object do not trigger updates. In this case, you can create a new object, including the attributes and new attributes of the original object:

// Do not use 'object. assign (this. someObject, {a: 1, B: 2}) 'This. someObject = Object. assign ({}, this. someObject, {a: 1, B: 2 })

10. vuejs page flashes {message }}

The vuejs command contains v-cloak, which is kept on the element until the end of the associated instance compilation. When used with CSS rules such as [v-cloak] {display: none}, this command can hide uncompiled Mustache labels until the instance is ready.

The usage is as follows:

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

This way

Not displayed until compilation ends

11. Use of v-model in a v-for Loop

Sometimes it is necessary to generate input cyclically, bind it with v-model, and operate it with vuejs. In this case, we can write an array selected [$ index] in v-model. in this way, you can bind different v-models to different inputs to operate on them separately. This is used in dataBind. vue in the demo.

12. Transition animation in vuejs

In vuejs, css defines the animation:

 .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); }

When setting an animation, pay attention to the upper-right correspondence. There is something on it, and there is something to change. If there is no change, it should be pulled out as a public css style, in the above css, if I only write transform: translate (-50%,-50%), but not write the following transform: translate (); it will cause the above transform: translate (-50%,-50%); is added to the following, it is considered unchanged.

XIII. Use of command v-el

Sometimes we want to access an element just like using jquery. In this case, we can use the v-el command to register an index for this element, you can easily access this element through $ el of the instance.

Note:

HTML is case-insensitive, so v-el: someEl is converted to lowercase letters. You can use v-el: some-el and set this. $ el. someEl.

Example

helloworldthis.$els.msg.textContent // -> "hello"this.$els.otherMsg.textContent // -> "world"this.$els.msg //->hello

14. Use event names in vuejs

In vuejs, we often need to bind events, sometimes to DOM elements, and sometimes to components. Bind an event in HTML with v-on: click-"event". In this case, the evet name should not be capitalized, because in 1. x is case-insensitive. Therefore, if we write v-on: click = "myEvent" in HTML and write myEvent in js, an error occurs. Therefore, in vuejs 1. avoid uppercase letters when binding events. This restriction is not found in 2.0!

Differences between v-if and v-show

V-if directly does not render this DOM element, while v-show will render the DOM element. It only uses display: none to hide it. Open the developer tool and you can see the DOM.

16. How to Use the transition global hook in components

Vue. transition is used to define a global transition hook. to define a component, you need to write the following code:

export default{ transition:{  'fade':{   enter() {},   leave() {}  } }}

In this way, the excessive fade hook only acts on the component. If a global hook with the same name exists at the same time, the build-up defined

17. How to Use vue-router to execute an event before rendering the component

Export default {data () {return {selected: 0, currentView: 'view _ 0' }}, methods: {choose (index) {this. selected = index; this. currentView = 'view _ '+ index ;}, route: {data () {/* each time the route is switched, It will be executed before the page is rendered */}}}

For more information about the usage of ultra-Comprehensive vue. js, see the PHP Chinese website!

Related Articles:

Build a Bootstrap component using pure Vue. js

Powerful Vue. js Components

Tutorial on Vue. js environment setup