The troubleshooting of VUE 2.0 Development Practice Summary

Continuation of an article: http://www.cnblogs.com/beidan/p/6129891.html, 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 =NewVuex.store ({2 State : {3 Comm: {4Loadingfalse,//whether to show loading5Apiurl: ' http://www.sherlochao.com:9091/photosharing/',//interface base URL6Imgurl: ' Http://www.sherlochao.com:9091/filebase ',//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 =NewVuex.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

Event.target, 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