The troubleshooting of VUE 2.0 Development Practice Summary

Source: Internet
Author: User

Continuation of an article:, if you have not seen can look at.

The contents of this article are as follows:

1. description and use of VUE components

2. The use of Vuex in actual development

3. Summary of development practices

1. Description and use of VUE componentsA component is essentially apre-defined optionsof aVue Instance

Allow external use inside header components, export attributes , there are 2 ways to export

1. Export by default (not named)

1 export default  data () {3     return {4             }7}   

The above code will actually automatically generate a new Vue

Import in parent component

1 import Header from './components/header '

2. Add a keyword directly before any variable or function

1 Export const SQRT = math.sqrt;

Import in parent component

1 import sqrt from './components/header ';

Referencing a component

Import Header from './components/header '

Defined in this component

1  default {2     function () {},   //data must return a function 3components    : {4      Comheader: Header    //Declaration component 5    }6 }

Use in Template

1 <template>2   <div class= "Com-app" >3     <com-header></ Com-header>   // Note that HTML is case-insensitive, so you need to  comheadercom-header4   </div>5 </template>

A Vue object typically includes the following properties

1 data:      //Vue object 2 methods:  //method of the Vue object 3 Watch:    // Object Listener method 4 computed:  // compute logic put into computed 5 created:   //property bound, Dom not generated, typically AJAX processing and page initialization

2. Vuex

In particular, we see clearly that all traffic is unidirectional , and that actions can only modify the state of the store instance by distributing mutations

Like some global information, such as the rendering of header content, whether it is displayed, when loading is displayed, when it is hidden, and the fixed value of the interface API, are written in the store record component state.
1Const STORE ({2 State : {3 Comm: {4Loadingfalse,//whether to show loading5Apiurl: '',//interface base URL6Imgurl: ' Http:// ',//Picture base URL7 indexconf: {8Isfooter:true,//whether to show bottom9Issearch:true,//whether to show searchTenIsback:false,//whether to show return OneIsshare:false,//whether to show sharing ATitle: "//title -       } -     } the   } -})

Change state status in mutations

1Const STORE ({2 mutations: {3     //Display of loading4IsLoading: (state, status) = {5State.comm.loading =Status6     },7     //Modify the header information8Changeindexconf: (state, data) = = {9 object.assign (state.comm.indexConf, data)Ten     } One})

E.g control is displayed in Header.vue

1Exportdefault {2Datafunction () {3       return {}4     },5 computed: {6Isshowsearch:function () {7         return  This. $store. State.comm.indexConf.isSearch//Get Vuex inside State value8       },9Titlefunction () {Ten         return  This. $store. State.comm.indexConf.title One       }, AIsback:function () { -         return  This. $store. State.comm.indexConf.isBack -       } the     } -}

Template code

1 <template> 2   <div class= "header" > 3     <div v-show= "Isshowsearch" ></div> 4     <div class= "title" v-show= "!isshowsearch" > 5       <a v-show= " Isback "class=" back T-icon "@click =" GoBack "><span  6         class=" Iconfont icon Icon-xiangzuojiantou "></span></a> 7       <p>{{title}}</p> 8     </div> 9   </div> </template>

Control whether the header is displayed elsewhere, e.g: Detail page

1Exportdefault {   2Createdfunction () {3VMs. $store. Commit (' changeindexconf ', {4Isfooter:false,5Issearch:false,6Isback:true,7Isshare:true,8Title: ' Detail Page '9       })    Ten     } One}

3. Summary of development practices

1. Vue-router

Because the entire project list component is common in many places, and ' My collection ', ' Search results page ', ' My circle ', just from /search/own to/search/star
At this point, the original component instance is reused, meaning that the component's lifecycle hooks are no longer called the workaround: When reusing a component, you can simply watch (monitor the Change) object if you want to respond to changes in the routing parameters.
1 default {2  Watch: {3     ' $route ' (to, from) {4       ///  respond to changes in the routing ... 5     }6  }7 }

2. Determine whether to log in

Enter the personal information page, due to the need to determine whether the landing, at this time by the router to intercept , the specific code is as follows

1Router.Beforeeach(function(to,from,next) {2   varusermsg = Localstorage.getitem (' usermsg '))3   if(To.path = = = ' Home '){4     if(!usermsg) {5Next ({path: '/login ') })6     }7   }8 Next ()9})

3. Common APIs

1. Click the event to get the current object, this is the Vue object 2. Like jquery gets the current DOM object
1 ref= "Issubmit" @click = "Register" value= "Register Now" class= "button"/>
1 this. $refs. Issubmit.removeattribute (' disabled ')   //Use this. $refs get the current DOM

Other common APIs to vue2.0 official documents

If you find any errors in reading or have better suggestions, please contact me, thank you!

original articles, forwarded please specify the source!

The troubleshooting of VUE 2.0 Development Practice Summary

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.