Vue.js and Vue-router and Vuex Quick Start knowledge

Vue.js and Vue-router and Vuex Quick Start knowledge

Always, think of Vue compared to react, the study cost will be lower, will be more simple, but recently real contact, found all aspects of Vue has to do some customer optimization, there are some bright spots, but there are some very uncomfortable places, no react flexibility, but there is the convenience of NG. To say Vue and react which is more suitable for mobile, in fact there is no absolute answer, like good. I hope that this article will allow you to quickly get started with Vue's family bucket.

The example source for this article is hosted on GitHub and the address is Https://github.com/tianxiangbing/vue-demo

First of all, we use VUE-CLI to build a Vue development environment, the current vue-cli3.0 also come out, but the user is not many, the Chinese document is also less, more configuration is Vue.config.js, here is configured to return a module, but also to modify the configuration of Webpack, But in fact, it is still very troublesome, this is not in the subject of this article, save ...

1. Construction of the service

Installing the VUE-CLI, it is recommended to install the 2.x version, this article uses the vue-cli3.0

NPM install-g VUE-CLI

Create a Vue project with the project name called Vue-demo

Vue Create Vue-demo

Then go to the project directory to execute the installation dependency package

NPM I

Then start the service, execute the command NPM run serve , and you should see the following results:

See here, even if successful, open http://localhost:8080/in the browser, you can see the entire Vue page, and is already hot deployment, you can compile updates in real time.

2. Vue-router Routing

Vue's basic knowledge can be directly referred to https://cn.vuejs.org/v2/guide/, basically with react nothing common, also with NG different, if must be more like who, should be more like ng some. A lot of knowledge, sharpening does not mistakenly kill work, so it is recommended to read the official tutorial, if you do not want to see the tutorial, it does not matter, its practical time to see the same ^_^

Install Vue-router Dependencies First

NPM Install--save Vue-router

Then modify the Main.js file, introduce the Vue-router, here to mention, the official example is basically the introduction of external JS file way, so with the actual development or there is a little difference, the actual development, are in a multi-module way to reference components, so we try to use in a simple and practical way.

 from " Vue-router "  from './pages/home'from'./ Pages/hello'from'./pages/user';

Vue.use (vuerouter);///note here, in a modular reference, be sure to have this

I quoted Vue-router here and created three component pages in pages. The code for the page resembles the following:

<template>  <div>     I am the page of Hello  . </div></template><script>default  {  'Hello ' ' }</script>

The routing address is then configured in the Main.js and used in the instantiation of Vue.

Let router =NewVuerouter ({mode:" History",//default is hash mode routes: [{path:'/', Component:home}, {path:'/hello', Component:hello}, {path:'/user/:id', Component:user}, {path:'/vuex', component:vuex1}]});NewVue ({router,//es6, equivalent to Router:router render:h=h (APP)}). $mount ('#app')

Well, by the way, here's how to take the parameter: ID, which, like the other frames, gets the parameter in the following way: $route. params. ID , more configuration can refer to Vue-router official documentation, this article only the most basic knowledge of getting started. It works, it's probably the way it works.

All right, vue-router, we'll do it. Perfect ~

And then we're going to talk about the most complicated and important part of the Vue family bucket, Vuex.

3. Use of Vuex

Vuex this thing is what, actually used redux or flux of all know, is a unidirectional data flow, ah ..., is an observer pattern, well ..., is the event distribution, well .... In fact, it's so hanging up, is to improve its force lattice, in normal terms, he is a global data object, and then you need to modify it through action, and then its changes will be distributed to all the affected components. This allows the brother nephew component to communicate.

Installing Vuex Dependencies

Then we do the same as the official example of a click Addend demo.

 from ' Vuex ' ; Vue.use (VUEX);

Conststore =NewVuex.store ({state: {count:0}, Mutations: {increment (state) {State.count++}, minus (state) {State.count--; }}, actions:{increment (context) {Context.commit ('Increment'}, Minusasync ({commit}) {//es6 simple notation setTimeout ()={commit ('minus')      },4000)    }  }});

New Vue ({  router,  store,  = + h (App)}). $mount ('#app ')

Such a long code, how to understand, State is the storage status, mutations this is similar to the Redux reducer, is the actual operation state method, in addition we need to submit this mutations through action, The method is commit, we remember there is a actiontype in redux, here I directly write the string. Note that here I used a settimeout to test the deferred operation.

And then we call it where we need to use the Vuex.

Import {mapactions} from 'Vuex'Exportdefault{computed: {count () {return  This. $store. State.count}}, methods:{Add () {//This . $store. Dispatch (' increment ');         This. Increment (); }, minus () { This. $store. Dispatch ('Minusasync'); }, ... mapactions (['Increment'])  }}

The first line introduced by Mapactions is a shortcut to help move the action agent to the current this one, this . $store. Dispatch ('increment '); Jane has written this . Increment (); by defining this, we bind methods to the corresponding button event, and the entire counter function is developed.

  <Div>Counter: {{count}}<ButtonV-on:click= "Add">Dot +</Button>      <ButtonV-on:click= "Minus">Point</Button>  </Div>

In this way, it is really faster than React-redux, as long as we divide the module, we can immediately develop a VUE+VUE-ROUTER+VUEX application.

The example source of this article is hosted on GitHub, the address is https://github.com/tianxiangbing/vue-demo if there are any questions or questions can be raised, we are adults, what can not be said ~

Vue.js and Vue-router and Vuex Quick Start knowledge