指令
重要指令
- v-for
- v-if v-else-if v-else
- v-bind
- v-on
- v-model
一般指令
- v-show
- v-text v-html
不重要的指令
- v-once
- v-cloak
- v-pre
生命周期
生命周期中包含了四個(gè)過(guò)程 創(chuàng)建 掛載 更新 銷毀
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
配置
計(jì)算屬性
<!--
當(dāng)?shù)谝淮蔚玫浇Y(jié)果后盐股，之后每次使用都直接使用上一次的結(jié)果, data怎么用，computed就怎么用
1. 當(dāng)表達(dá)式過(guò)于復(fù)雜時(shí)
{{ msg.split('').reverse().join('') }}
{{reverseMsg}}
2. 需要從data中去篩選出數(shù)據(jù)時(shí)
-->
new Vue ({
data: {
msg: "hello world",
stu: [
{
name: '張三',
age: 18,
sex: '男'
}, {
name: '李四',
age: 20,
sex: '女'
}
]
},
computed: {
demo () {
return 1
},
// demo: 1
reverseMsg () {
return this.msg.split('').reverse().join('')
},
boys () {
return this.stu.filter(stu => stu.sex === '男')
}
}
})
監(jiān)聽(tīng)
new Vue({
data: {
msg: ''
},
watch: {
msg (newMsg, oldMsg) {
},
msg: {
handler (newMsg, oldMsg) {
},
deep: true,
immediate: true
}
}
})
methods
綁定的事件孤页，以及頁(yè)面上需要用到的函數(shù)峭状，我們可以加載methods娃肿。如果調(diào)用則使用this.方法名()
組件
組件注冊(cè)
需要組件配置對(duì)象（就是一個(gè)普通對(duì)象）
組件配置對(duì)象
const 對(duì)象名(組件名) = {
// template中有且只能有一個(gè)根節(jié)點(diǎn)
template: `
<div></div>
`,
// 函數(shù)返回值的形式
data () {
return {
// 組件中的data默認(rèn)只能被當(dāng)前組件獲取
msg: ""
}
}
}
全局注冊(cè)
在所有的組件中都可以直接使用
Vue.component('組件名', 組件配置對(duì)象)
const com1 = {
name: 'com1'
}
const com2 = {
name: 'com2'
}
const com3 = {
name: 'com3'
}
const com4 = {
name: 'com4'
}
const components = [com1, com2, com3, com4]
components.forEach(component => Vue.component(component.name, component))
局部注冊(cè)
const BedRoom = {
template: `
<div>臥室</div>
`
}
const House = {
template: `
<div>
<bed-room></bed-room>
</div>
`,
components: {
// 組件名: 組件配置對(duì)象
BedRoom: BedRoom
}
}
組件關(guān)系
Vue只有兩種關(guān)系疾嗅， 父子組件 非父子組件
組件通信
- 父子通信
當(dāng)我們需要把父組件中的數(shù)據(jù)傳遞給子組件時(shí)，使用父子通信
父組件
const Parent = {
template: `
<div>
<child :m="msg"></child>
</div>
`,
data () {
return {
msg: "這是父組件中的數(shù)據(jù)"
}
}
}
子組件
const Child = {
template: `
<div>{{m}}</div>
`,
// 設(shè)置prop接收
props: ['m']
}
- 子父通信
當(dāng)我們要把子組件中的數(shù)據(jù)谴蔑，傳遞給父組件時(shí)豌骏，使用子父通信
父組件
const Parent = {
template: `
<div>
<child :msg="msg" @send:msg="getMsg"></child>
</div>
`,
data () {
return {
msg: '父組件中的數(shù)據(jù)'
}
},
methods: {
getMsg (msg) {
this.msg = msg
}
}
}
子組件
const Child = {
template: `
<div>
{{msg}}
<button @click="changeMsg">點(diǎn)擊修改msg</button>
</div>
`,
props: ['msg'],
methods: {
changeMsg () {
// this.msg = "新的內(nèi)容" // 錯(cuò)誤的 不要在子組件中直接修改父組件中傳來(lái)的數(shù)據(jù)
// 正確的
this.$emit('send:msg', '子組件發(fā)過(guò)去的數(shù)據(jù)')
}
}
}
在組件標(biāo)簽上看到屬性，那么表示對(duì)應(yīng)的父組件給子組件傳值隐锭，如果我們?cè)诮M件標(biāo)簽上看到@xxx="函數(shù)" 表示父組件在監(jiān)聽(tīng)子組件的自定義事件
<child @click="fn"></child>
<!-- 這個(gè)click不是原生事件窃躲，是自定義事件 -->
<child @click.native="fn"></child>
<!-- 如果添加了.native才會(huì)執(zhí)行原生的點(diǎn)擊事件 -->
- 非父子通信
利用的是自定義事件，因?yàn)樽远x事件的監(jiān)聽(tīng)和觸發(fā)必須得是同一個(gè)this钦睡，所以我們需要一個(gè)公共的vue實(shí)例蒂窒，稱其為bus
bus
const bus = new Vue()
組件1
const com1 = {
template: `
<div>
<button @click="changemsg">點(diǎn)擊修改組件2中的數(shù)據(jù)</button>
</div>
`,
methods: {
changemsg () {
bus.$emit('changeMsg', '數(shù)據(jù)')
}
}
}
組件2
const com2 = {
template: `
<div>{{msg}}</div>
`,
data () {
return {
msg: '消息'
}
},
created () {
bus.$on('changeMsg', (msg) => {
this.msg = msg
})
}
}
插槽
普通插槽
const com = {
template: `
<div>
其他內(nèi)容
<slot></slot>
</div>
`
}
<div>
<com>
自定義內(nèi)容
</com>
</div>
具名插槽
默認(rèn)的slot有一個(gè)名字為default
const com = {
template: `
<div>
其他內(nèi)容
<slot name="自定義slot名字"></slot>
<slot name="自定義slot名字2"></slot>
</div>
`
}
<div>
<com>
<template v-slot:自定義slot名字></template>
<template v-slot:自定義slot名字2></template>
</com>
</div>
作用域插槽
給用戶留一些需要的數(shù)據(jù)
const com = {
template: `
<div>
其他內(nèi)容
<slot key="value" key2="value2" key3="value3"></slot>
</div>
`
}
<div>
<com>
<template v-slot="scope">
{{scope.key}}
<button >刪除</button>
</template>
</com>
<com>
<template v-slot="{key}"></template>
</com>
</div>
