Vue – CLI3. x installation

Command: NPM install -g@vue /cliCopy the code

Two, after the installation of the test

vue --version
Copy the code

Create a VUE project

Warning: If you use Git Bash with minTTY on Windows, the interactive prompt does not work. You must start this command with winpty vue. CMD create hello-world.

. Git (hidden files) = = = "git init node_modules = = = > project all depend on the package file public folder | = = =" local services index. The HTML SRC = = = = = > home page "working directory | assets = = = > add resources (images, CSS) | components. = = = "into component | App vue = = = > the root component | main. Js. = = =" project of global configuration gitignore = = = > do not need to upload files in the warehouse of the configuration Babel.config. js == "Configuration of bable package.json ==" project basic configuration description readme. md === "Description file index. HTML ===>main.js ===>app.vueCopy the code

Four components:

Vue file is the component <template>. It must have a parent element </template>.Copy the code

Five, the data

		}
	}
}
</script>
Copy the code

6. Template syntax

Data {{}}Copy the code

7. Calculate attributes

computed:{
	
}
    
Copy the code

Vue instruction

V-bind v-bind:value, V-bind :img value, V-on :click, V-on :mouseover value, v-on:mouseover @click 一, v-text 一, v-html 一, virtual dom 三, data binding :v-model 一, v-model 一, data binding 一, v-model 一, data binding 一, v-model 一, data binding 一, v-model 一, v-model 一, data binding 一, v-model 一, v-model 一, data binding 一, v-model 一, v-model 一, data binding 一, v-model 一, v-model 一, data binding 一, v-model 一, v-model 一, data binding 一, v-model 一, v-model 一, v-once: V-for ='item in arr' V-for ='(item,index) in arr' v-for='(item,index) in arrCopy the code

component

What is a component

Any file that ends in.vue can be called a componentCopy the code

2. Use of components

Scenario: a complete project, split into different functional modules using: SRC | components = = > into the components of the * * * note: Component uppercase 1 import XXX from 'XXX' 2 Components :{Swiper} 3 Use Swiper in templateCopy the code

*** Component communication (value transfer)

1 Parent component to child component Parent component: < child component: variables = data ></ Child component > Child component: props:[' variables '] 2 Child component to parent component 3 Value transfer between siblingsCopy the code

*** Component communication (value transfer)

$emit(" event name ",' value ') parent component: < child component: variables = data ></ Child component > Child component: props:[' variables '] 2 child component: this.$emit(" event name ",' value ') Parent component: < footer@changestr ='changeBtn'></Footer> methods:{changeBtn(s){console.log(s)}} 3 </Footer> methods:{changeBtn(s){console.log(s)}} Brother A: Import bus from './bus' bus.$emit("changeaStr", this.astr) Import bus from './bus' bus.$on("changeaStr",function(data){console.log(data)}Copy the code

What is routing

Single page Application (SPA)Copy the code

Two, route installation

(*) router
Copy the code

A, the template

<router-link to='/home'></router-link>Copy the code

Create jump to component operations

Third, the router. Js

{path:" path "component: component} router-link configuration <router-link></router-link> 1 to: = '/ home' 1 "to 2" : to = ""/home" '3 ": to =' {path:"/home "} '4 ": to =' {path:"/home ", the query: {userId: 123}} '5 ": to =" {name: 'user', params: { userId: # router. Push # router. Replace # router. Go # router. Back # router. Tag ='li' tag='button'; router-link-active: class triggered by defaultCopy the code

Liverpoolfc.tv: router.vuejs.org/api/#to

A, the router – the view

What is Keep-alive: 1? Vue's built-in component can save the state in memory during component switching, preventing DOM repeated rendering 2 "uses scenes to save pages in memory, <keep-alive> <router-view></router-view> </keep-alive> Exclude: exclude which name is included? (name)Copy the code

A, description,

{path: '/', // path name: 'home', // name: basically identify or identify component: home // corresponding component}Copy the code

Two, lazy loading

{
  path: '/about',
  name: 'about',
  component: () => import('./views/About.vue')
}
Copy the code

Route redirection

{ 
  path: '*', 
  redirect: Home
}
Copy the code

4. Route nesting

{
  path: '/about',
  name: 'about',
  component: () => import('./views/About.vue'),
  children:[
      {
        path:"/xxx:id",
        component:Home
      },
      {
        path:"/xxx",
        component:Home
      }
  ]
}
Copy the code

1 this. $router

$route 1 “{path: ‘/about/:id’, name: ‘about’, Component: () => import(‘./views/ about.vue ‘)} 2” about

A, axios

1. Download: NPM install axios --save 2 import axios from 'axios' vue.prototype This. Axios. Get (" path "). Then ()Copy the code

1. Lifecycle (hook function)

1. Create 2. Render component 3. Modify data 4Copy the code

Where is the life cycle used?

For example, the interface should be requested as soon as the page is refreshedCopy the code

Use plug-ins in VUE

Install NPM install XXX --save 2. Introduce 3Copy the code

style

1 "style modularization <style scoped> 2" Style traversing parent element >>> child elementCopy the code

The file of stylus is. Styl

Second, style introduction in style

@import '~@/assets/var.styl'
Copy the code

Stylus grammar

$bg=orange
    
    
Copy the code

What is VUex? ==> Status management

The state: Mutations :{} is a storage method similar to methods in the component, for example, arithmetic in the component, receiving state as the first parameter. Actions :{} is used to store the mutation method, but the mutation method is used to commit the mutation. It cannot change the state of the state directly. Shopping cart modules:{} Modules :{} When there is a large amount of data in state and it is inconvenient to manage, use modules user, order address shopping has a set of state getters mutations Actions data mutions and action respectively: If the mutions are synchronous, there will be a problem. If the mutions are synchronous, there will be a problem. If the mutions are synchronous, there will be a problem. 2. You can change the state of the mutions directly, but cannot change the state of the actions. You need to commit the MUtions and change the state in the mutionsCopy the code

This.store.dispatch () and this.store.dispatch() and The difference between this.store.dispatch() and this.store.mit () methods generally speaking, they are only different in the way of access. Both methods pass values to the mutation change state of vuex

$store.dispatch() : this.$store.dispatch(' Action method name ', value). This. $store.dispatch() : $store.mit (). This. codestore.com MIT (' mutations method name ', value)Copy the code

Commit: Synchronization operation

Submit mutions: This. codestore.com MIT ('changeValue',name) Values this.$store.state.changevalueCopy the code

Dispatch: asynchronous operation

Store this.$store.dispatch(' getLists ',name) value this.$store.gettersCopy the code

Modules :{} Usage scenario: Use modules when there is too much data in state to manage easily

Users, order address shopping respectively have a set of state getters mutations Actions data,

The methods of use of state mutations are as follows (pay attention to the correct use of the path)

Two, vuEX use

State ===> Use data 1 {{this.$store.state.cityName}} 2 import {mapState} from 'vuex' computed:mapState(["cityName"]) 3 "computed: {... mapState(['cityName']) }Copy the code

Modifying state Data

Mutations: {changeStr(state){state. STR =456; }} 2 "components import {mapState,mapMutations} from 'vuex' <button @click=' BTN '></button> methods:{BTN (){this.changestr ()}, . mapMutations(['changeStr']) }Copy the code