Vueç»ä»¶éä¿¡ï¼ä¼ å¼ï¼
Vueç»ä»¶éä¿¡ï¼ä¼ å¼ï¼
å
ä»ç»ä¸ä¸ä»ä¹æ¯ç»ä»¶æï¼
å建ç»ä»¶ç两ç§æ¹å¼ï¼
- å ¨å±ç»ä»¶
// ç»ä»¶å°±æ¯vueçä¸ä¸ªæå±å®ä¾
let component=Vue.extend({
data(){
return{
//ä¸vueå®ä¾ä¸çdataä¸åï¼åç»ä»¶çdataå¿
é¡»æ¯ä¸ä¸ªæ¹æ³ï¼å¿
é¡»æè¿åå¼ï¼ä¸è¿åå¼æ¯å¯¹è±¡ã
//è¿æ ·åå¯ä»¥ä½¿ç»ä»¶ä¸çæ°æ®ç¬ç«ã
//éè¦å
±äº«æ°æ®æ¶å¯æreturnç对象声æå
¨å±åé
}
}
template:'<div></div>'// æ¨¡æ¿ è¿ä¸ªç»ä»¶çhtmlå
ç´
// })
//注åç»ä»¶
Vue.component('hehe',component)
ï¼ç®åï¼
Vue.component('ç»ä»¶å',{
template:''// 模æ¿
})
- å±é¨ç»ä»¶
new Vue({
el:'#app',
data:{
test:11
},
components:{
one:{
template:'<h1>è¿éæ¯å±é¨ç»ä»¶ </h1>'
}
}
})
éè¦æ³¨æçæ¯åç»ä»¶çå½åæ æ³è¯å«é©¼å³°å½åæ³ï¼å½ç»ä»¶å为æ ç¾ä½¿ç¨çæ¶åéè¦ç¨â-âåå°ååæ¯æ¿æ¢è¯¥å¤§ååæ¯ã
<div>
<one-data></one-data>
</div>
new Vue({
el:'#app',
data:{
test:11
},
components:{
oneData:{
template:'<h1>è¿éæ¯å±é¨ç»ä»¶ </h1>'
}
}
})
1ãç¶åå±æ§ä¼ å¼
åç»ä»¶ä¸è½ç´æ¥ä½¿ç¨ç¶çº§dataçå
容ï¼ä¹ä¸è½ç´æ¥ä¿®æ¹ç¶ç»ä»¶ä¼ éçå¼ï¼ä½å¯ä»¥éè¿è®¾ç½®propså±æ§æ¥è·å¾èªèº«å±æ§å¼ã
åçï¼
- éè¿åç»ä»¶çpropsæåºä¸ä¸ªç»ä»¶æ ç¾å±æ§
- ç¶ç»ä»¶éè¿è¯¥æ ç¾å±æ§å°åæ°ä¼ éç»åç»ä»¶
- åç»ä»¶å é¨éè¿è¯¥æ ç¾å±æ§è·åå¼
代ç å®ç°ï¼ï¼å®ç°è¿ç¨ä¸è¸©è¿çåï¼
1.templateæ ç¾å
å¿
é¡»æä¸åªæä¸ä¸ªæ ¹å
ç´
2.åç»ä»¶æ ç¾å
è¦éè¿v-bindçæ¹å¼ç»å®ç¶çº§çdataçå¼
3.åç»ä»¶éè¿propså®ä¹çèªèº«å±æ§å¼ï¼testï¼è·åç¶ç»ä»¶çdataä¸çå
容ï¼ç¶ç»ä»¶ï¼{{name}} ï¼åç»ä»¶ï¼{{test}}ï¼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="base/vue.js"></script>
</head>
<body>
<div>
{{name}}
<son :test='name'></son>
</div>
<!--å®ç°åè½è¾å¤ææ¶ï¼ä¼åç¬å个templateæ ç¾ï¼éè¿idä¸åç»ä»¶ä¸çtemplateç¸å
³èï¼å¦åå符串æ¼æ¥ä¼å¾éº»ç¦-->
<template>
<div>{{test}}</div>
</template>
</body>
<script>
new Vue({
el:'#myApp',
data:{
name:'å æ²¹é¸ï¼'
},
components:{
son:{
template:'#tp',//ç±»ä¼¼äº el
props:['test']
}
}
})
</script>
</html>
- åç¨å ¨å±ç»ä»¶åä¸ä¸ªç¶åå±æ§ä¼ å¼ï¼å®ç°ç¹å»ç¶ç»ä»¶æé®ï¼åç»ä»¶divæ¾ç¤ºåéè
ï¼å ¨å±ç»ä»¶æ åºå®ç¶åå ³ç³»ï¼è¯¥ç»ä»¶æ ç¾æ¾å¨åªä¸ªæ ç¾å å°±æ¯åªä¸ªæ ç¾çåç»ä»¶ï¼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ç¶ååä¼ å¼</title>
<script src="base/vue.js"></script>
</head>
<body>
<div>
<!--c1å°±æ¯myAppçåç»ä»¶-->
<c1></c1>
</div>
<template>
<div>
<h4>ææ¯c1ï¼æ¯ç¶çº§</h4>
<button @click="change">ç¹æc2å</button>
{{state}}
<hr>
<!--åå¨c1çtemplateå
ï¼å°±æ¯c1çåç»ä»¶-->
<c2 :changed='state'></c2>
</div>
</template>
<template>
<div>
ææ¯c2ï¼æ¯å级
<div v-show='changed'><h1>ææ¯div</h1></div>
</div>
</template>
</body>
<script>
Vue.component("c1",{
template:'#tp1',
data(){
return {
state:true
}
},
methods:{
change(){
this.state=!this.state
}
}
})
Vue.component("c2",{
template:'#tp2',
props:['changed']
})
let vm=new Vue({
el:'#myApp'
})
</script>
</html>
2ãåç¶äºä»¶ä¼ å¼
åç»ä»¶ä¸è½ç´æ¥ä¿®æ¹ç¶ç»ä»¶ä¼ éçå¼ï¼å¯é´æ¥éè¿äºä»¶ä¿®æ¹
åç
- åç»ä»¶å建èªå®ä¹äºä»¶
- èªå®ä¹äºä»¶çå¤çå½æ°æ¯ç¶ç»ä»¶çå½æ°
- åç»ä»¶éè¿$emit触åå±äºèªå·±çèªå®ä¹äºä»¶
代ç å®ç°ï¼ï¼ç¹å»åç»ä»¶æé®ï¼ç¶ç»ä»¶divæ¾ç¤ºåéèï¼
代ç ä¸æä¸äºæ路注éï¼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ååç¶ä¼ å¼</title>
<script src="base/vue.js"></script>
</head>
<body>
<div>
<c1></c1>
</div>
<template>
<div>
<h4>ææ¯c1ï¼æ¯ç¶çº§</h4>
<div v-show='state'><h1>ææ¯div</h1></div>
<hr>
<!--c2èªå®ä¹äºä¸ä¸ªchangedäºä»¶å¤çç¶ç»ä»¶çå½æ°change-->
<c2 @changed='change'></c2>
</div>
</template>
<template>
<div>
ææ¯c2ï¼æ¯å级
<!--åç»ä»¶ç¹å»æé®ï¼ç¶ç»ä»¶æ¾ç¤ºéèï¼å½ç¶æç¹å»äºä»¶å¦ï¼
æ以ç»buttonå ç¹å»äºä»¶è§¦åä¸ä¸ªå½æ°ï¼åç°c2没æ设置methodsï¼
æ以å»c2çå®ä¾ä¸å ä¸ä¸ªmethods并设置å½æ°sclickï¼
åéè¿sclickå½æ°æå
¶èªå®ä¹äºä»¶changedæåºï¼
changedéé¢å°±æ¯c1çå¤çå½æ°-->
<button @click="sclick">ç¹æc1å</button>
</div>
</template>
</body>
<script>
Vue.component("c1",{
template:'#tp1',
data(){
return {
state:true
}
},
methods:{
change(){
this.state=!this.state
}
}
})
Vue.component("c2",{
template:'#tp2',
methods:{
sclick(){
this.$emit('changed')
}
}
})
let vm=new Vue({
el:'#myApp'
})
</script>
</html>
3ãéç¶åä¼ å¼
åç
- åå»ºå ¬å ±æ±½è½¦å®ä¾
- å®ä¾ä¸æ³¨åäºä»¶ï¼äºä»¶çå¤çå½æ°å°±æ¯è¦æ¹åæ°æ®çå¤çå½æ°
- 触åäºä»¶
ï¼1ï¼å ¬æçç¶å ç´ ä½ä¸ºæ¡¥æ¥-----ç»åç¶åå±æ§ä¼ å¼ååç¶äºä»¶ä¼ å¼æ¥å®ç°ï¼éç¨äºäº²å å¼ï¼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>å
å¼ä¼ å¼</title>
<script src="base/vue.js"></script>
</head>
<body>
<div>
ææ¯ç¶çº§
{{state}}
<hr>
<!--c1åc2é½æ¯divçåç»ä»¶-->
<!--åç¶äºä»¶ä¼ å¼-->
<c1 @emit='change'></c1>
<hr>
<!--ç¶åå±æ§ä¼ å¼-->
<c2 :test='state'></c2>
</div>
<template>
<div>
ææ¯c1,æ¯c2çå
å¼
<!--é´æ¥éè¿ç¶çº§æ¹åäºå
å¼çº§çå¼-->
<button @click='emit'>ç¹ææçå
å¼åç¶çº§é½ä¼åçæ¹å</button>
</div>
</template>
<template>
<div>ææ¯c2ï¼æ¯c1çå
å¼
<p>{{test}}</p>
</div>
</template>
</body>
<script>
Vue.component('c1',{
template:'#tp1',
methods:{
emit(){
this.$emit('emit')
}
}
})
Vue.component('c2',{
template:'#tp2',
props:["test"]
})
new Vue({
el:'#myApp',
data:{
state:false
},
methods:{
change(){
this.state=!this.state
}
}
})
</script>
</html>
ï¼2ï¼å ¬å ±æ±½è½¦ä¼ å¼ï¼å£°æä¸ä¸ªå ¬å ±å®ä¾ä½ä¸ºè¿æ»¤ï¼
ä¿®æ¹è°çå¼å°±å»è§¦åè°çæ¹æ³
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>å
å¼ä¹é´éè¿å
Œ
±æ±½è½¦ä¼ å¼</title>
<script src="base/vue.js"></script>
</head>
<body>
<div>
<father></father>
</div>
<template>
<div>ææ¯ç¶ç»ä»¶
<hr>
<son1></son1>
<hr>
<son2></son2>
</div>
</template>
<template>
<div>{{name}}
<!--ç¹å»äºä»¶è§¦åä¸ä¸sclickå½æ°ï¼ç¸å½äºææåºçchangeå½æ°è§¦åäº-->
<button @click='sclick'>ç¹æ</button>
</div>
</template>
<template>
<div>{{name}}</div>
</template>
</body>
<script>
let Bus=new Vue();
new Vue({
el:'#myApp',
components:{
father:{
template:'#father',
components:{
son1:{
template:'#son1',
data(){
return{
name:'ææ¯åç»ä»¶1'
}
},
methods:{
sclick(){
//触åtestäºä»¶ï¼åä¼ ä¸ä¸ªåæ°çµ¦changeå½æ°ä¸çval
//nameå¼å°±ä»âææ¯åç»ä»¶2âéè¿ç¹å»äºä»¶åæäº"å æ²¹é¸ï¼ï¼ï¼ï¼"
Bus.$emit('test',"å æ²¹é¸ï¼ï¼ï¼ï¼")
}
}
},
son2:{
template:'#son2',
data(){
return{
name:'ææ¯åç»ä»¶2'
}
},
methods:{
change(val){
this.name=val
}
},
mounted(){
//åªè¦mountedæ§è¡äºï¼è¯´æç»ä»¶å·²ç»åå¤å°±ç»ª
//注åä¸ä¸ªå½æ°ï¼å½æ°åå«testï¼å¤çå½æ°å°±æ¯methodsä¸çchangeå½æ°
//ç®åæ¥è¯´ï¼åªè¦æ³åæ³è§¦åtestäºä»¶å°±ç¸å½äºæ§è¡äºchangeå½æ°
Bus.$on('test',this.change)
}
}
}
}
}
})
</script>
</html>
ï¼3ï¼vuexï¼éä¸å¼çæ°æ®ç¶æ管çå¨ï¼
ç®åæ¥è¯´ï¼å°±æ¯ç¨æ¥ç®¡çå
¨å±åéçï¼ä¸ç®¡åªéè¿è¡ä¿®æ¹ï¼é¡µé¢é½ä¼éä¹ååãæ¯å¦æ们ææºç«¯çéæ©æå¨åºåï¼åè®¾ä½ éäºå京ï¼è·³å°å
¶ä»é¡µé¢è¿æ¯æ¾ç¤ºçå京就å¯ä»¥ç¨vuexæ¥å®ç°ã
解å³çé®é¢ï¼
帮å©æ们管çå
±äº«ç¶æã
vuexçç¸å
³é
ç½®æ¥éª¤ï¼
npm install vuex --save-dev
- å¼å ¥ï¼`import Vuex from âvuexâ
- 使ç¨ï¼
Vue.use(Vuex)
- 设置vuex
var store=new Vuex.Store({
state:{
},
mutations:{
},
actions:{
},
getters:{
}
})
- å°æ°æ®æ¾å ¥å°å®ä¾ä¸
new Vue({
el: '#app',
router,
store,
components: { App},
template: '<App/>',
})
vuexä¸ç模åï¼
- stateï¼åå¨ç¶æï¼å¯éè¿this.$store.stateè·åæ们å¨vuexä¸å£°æçå ¨å±åéçå¼
import Vuex from 'vuex'
Vue.use(Vuex)
let store=new Vuex.Store({
state:{
name:1,
}
})
export default store;
//ä¸è¬æ们ä¼æ°å»ºä¸ä¸ªstoreæ件夹ï¼
//å¨è¯¥æ件夹çjsæ件ä¸éè¿æ´é²åºstore,
//åéè¿å¨main.jsä¸å¼å
¥è¯¥æ件çæ¹å¼æ¥ä½¿ç¨vuex
å¨ç»ä»¶ä¸æ们åªéè¦éè¿{{this.$store.state.name}}
å°±å¯ä»¥æ¸²ænameçå¼
åä¸ä¸ªç»ä»¶ï¼
<template>
<div>
{{msg}}
{{this.$store.state.name}}
<hr>
</div>
</template>
<script>
export default {
name:'List',
data(){
return {
msg:'list',
}
}
}
</script>
<style>
#list div{
width: 50px;
height: 50px;
background: red;
}
</style>
ææ¨æè§å¾{{this.$store.state.name}}太é¿äºï¼å¯ä¸å¯ä»¥ç´æ¥å{{name}}ï¼
<template>
<div>
{{msg}}
{{name}}
<hr>
</div>
</template>
<script>
export default {
name:'List',
data(){
return {
msg:'list',
}
},
computed:{
name(){
return this.$store.state.name
}
}
}
</script>
<style>
#list div{
width: 50px;
height: 50px;
background: red;
}
</style>
æå°ä¼ä¼´ä¼è¯´äºï¼è¿æ ·ä¹ä¸ç®ååï¼é£è¿æ ·å¢ï¼
<template>
<div>
{{msg}}
{{name}}
<hr>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name:'List',
data(){
return {
msg:'list',
}
},
//å¯ä¸å¯ä»¥ä¸ç¨æå±æä½ç¬¦ï¼å¯ä»¥å
//computed:mapState(['name'])
//å¯æ¯è¿æ ·ä½ å¦æè¿æå
¶ä»çæ¹æ³è¦å¨computedä¸æä½å°±æ²¡æ³æä½äº
computed:{
...mapState(['name'])
}
}
</script>
<style>
#list div{
width: 50px;
height: 50px;
background: red;
}
</style>
å¦æéå°éè¦æ¹åçæ åµï¼å¯éè¿å¯¹è±¡çå½¢å¼ï¼
{{_name}} //æ¹åçååè¿è¡é¡µé¢æ¸²æ
...mapState({_name:"name"})
åé¢çæ¹æ³åºæ¬æè·¯ä¸æ ·ï¼æ¥ä¸æ¥å°±é½ç¨ç®åå½¢å¼å¦ï¼
2. mutationsï¼ä¿®æ¹ç¶æ
import Vuex from 'vuex'
Vue.use(Vuex)
let store=new Vuex.Store({
state:{
name:1,
},
mutations:{
CHANGE_NUM(state,name){
state.name=name
}
},
})
export default store;
æ们æ¥åä¸ä¸ªå°ææï¼ç¹å»æé®æ¹åç¶æå¼ä»1å为888
<template>
<div>
<div @click='CHANGE_NUM(888)'>change</div>
{{msg}}
{{_name}}
<hr>
</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default {
name:'List',
data(){
return {
msg:'list',
}
},
methods:{
//éç®åå½¢å¼ï¼ç¹å»äºä»¶çè°ç¨æ¹æ³æ¢ä¸ºgetName
//getName(){
// this.$store.commit('CHANGE_NUM',888)
// }
...mapMutations(['CHANGE_NUM']),
},
computed:{
...mapState({_name:'name'})
}
}
</script>
<style>
#list div{
width: 50px;
height: 50px;
background: red;
}
</style>
3. actionsï¼ä¸é¨ç¨æ¥åå¼æ¥æä½
éè¿è®¡æ¶å¨æ¨¡æä¸ä¸ªå¼æ¥æä½ï¼å¹¶éè¿commit触åmutations
import Vuex from 'vuex'
Vue.use(Vuex)
let store=new Vuex.Store({
state:{
name:1,
},
mutations:{
CHANGE_NUM(state,name){
state.name=name
}
},
actions:{
//é»è¾å¤çåå¼æ¥è¯·æ±
getNumApi({commit},params){
setTimeout(()=>{
commit('CHANGE_NUM',params)
},2000)
}
}
})
export default store;
åæ¥å®ç°ä¸ä¸ªç¹å»æé®æ¹åå¼çææï¼
<template>
<div>
<div @click='getNumApi("xixi")'>change</div>
{{msg}}
{{_name}}
<hr>
</div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
name:'List',
data(){
return {
msg:'list',
}
},
methods:{
//éç®åçåæ³ï¼ï¼éè¿dispatch触åç¸åºçactionï¼
//emitActions(params){
// this.$store.dispatch('getNumApi',params)
// }
...mapActions(['getNumApi'])
},
computed:{
...mapState({_name:'name'})
}
}
</script>
<style>
#list div{
width: 50px;
height: 50px;
background: red;
}
</style>
2ç§ånameå¼æ¹åäº
4. gettersï¼ç±»ä¼¼äºè®¡ç®å±æ§computedï¼éé¢è¿è¡ä¸äºè®¡ç®æä½
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store=new Vuex.Store({
state:{
name:1
},
mutations:{
CHANGE_NUM(state,name){
state.name=name
}
},
getters:{
double(state){
return state.name*2
}
},
actions:{
//é»è¾å¤çåå¼æ¥è¯·æ±
getNumApi({commit},params){
setTimeout(()=>{
commit('CHANGE_NUM',params)
},2000)
}
}
})
export default store;
åæ¥åç¹å»äºä»¶ï¼
<template>
<div>
<div @click='getNumApi("xixi")'>change</div>
{{msg}}
{{_name}}
{{double}}
<hr>
</div>
</template>
<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
name:'List',
data(){
return {
msg:'list',
}
},
methods:{
...mapActions(['getNumApi'])
},
computed:{
...mapState({_name:'name'}),
...mapGetters(['double'])
}
}
</script>
<style>
#list div{
width: 50px;
height: 50px;
background: red;
}
</style>
ç±äºå符串ä¸è½è¿è¡ä¹æ³æä½ï¼æ以æå°ç»ææ¯NaN
5. modulesï¼æ¨¡å
å¨å®é
å¼åä¸ï¼æ们ä¼æ以ä¸å个模åï¼åå«åå¨å个jsæ件ä¸ï¼å¨éè¿å¼å
¥ãæ´é²çå½¢å¼åå¨ä¸ä¸ªindex.jsæ件ä¸ã
import actions from './actions'
import state from './state'
import mutations from './mutations'
import getters from './getters'
export default {
state,
mutations,
getters,
actions
}
åæè¿5个æ件æ¾å¨storeæ件夹ä¸çshopcaræ件夹ä¸ï¼ååéæï¼,å¨åstoreæ件夹ä¸ï¼æ°å»ºä¸ä¸ªindex.jsæ件ï¼å¹¶éè¿modulesçå½¢å¼å±ç°ï¼
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import shopcar from './shopcar'
let store=new Vuex.Store({
modules:{
shopcar:shopcar
}
})
export default store
æ¥æºï¼https://blog.csdn.net/weixin_43747906/article/details/84981199