一. 关于局部组件组成的三个部分(template, script, style)
template => 组件的模板结构 (必选)
- 每个组件对应的模板结构,需要定义到template节点中
html
<template>
<!-- 当前组件的dom结构,需要定义到template结构的内部 -->
</template>
- template中使用的指令
html
<template>
<!-- 【1.内容渲染指令】 -->
<span v-text="msg"></span>
<span>{{msg}}</span>
<div v-html="html"></div>
<!-- 【2.属性绑定指令】 -->
<img v-bind:src="imageSrc">
<!-- 【3.双向指令绑定指令】 -->
<select v-model=""></select>
<!-- 【4.循环渲染指令】 -->
<div v-for="(item, index) in items"></div>
<!-- 【5.条件渲染】 -->
<div v-if="Math.random() > 0.5">Now you see me</div>
<div v-else-if="type === 'B'"></div>
<div v-else>Now you don't</div>
</template>
- template定义根节点
注:vue 2.x版本中,<template>节点内dom结构仅支持单个根节点;但在vue 3.x版本中,支持多个根节点
script => 组件的javascript行为 (可选)
- script中的data节点(可以定义当前组件渲染期间需要用到的数据对象;data是一个函数)
- script中的methods节点(可以定义组件中的事件处理函数)
style => 组件的样式 (可选)
- style的lang属性支持可选值css,less,sass,scss
- 当使用less或sass时,要先安装less或sass依赖,再设置lang的属性值为less或sass
- scss是sass3.0引入的语法,可以理解scss是sass的一个升级版本,弥补sass和css之间的鸿沟
- 合理使用scoped,因为使用scoped可以让样式只对当前组件生效
二. 关于生命周期
- beforeCreate
- created
- beforeMounted
- mounted
- beforeUpdate
- updated
- beforeDestory
- destoryed
created和mounted的区别:created在模板渲染成html前调用,mounted在模板渲染成html后调用
三. 关于父子组件的传值
**封装出来的通用组件叫子组件,引用通用组件的界面叫做父组件,**组件的封装必须高性能低耦合
1. 父组件向子组件传参用props
html
<!-- 父组件 -->
<template>
<Child :articleList="articleList"></Child>
</template>
<!-- 子组件 -->
<template>
<div>
<ul>
<li v-for="(value,index) in articleList" :key="index">{{value}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Child",
props: {
articleList: {
type: array,
default: function () {
return []
}
}
},//接收父组件传来的数据articleList
}
</script>
2. 子组件向父组件传参用emit
html
<!-- 父组件 -->
<template>
<common-dialog @pushId="getId"></common-dialog>
</template>
<script>
methods: {
getId (id) {}
}
</script>
<!-- 子组件 -->
<template>
<div>
<input type="button" @click="emitIndex(id)" value="向父组件发送数据">
</div>
</template>
<script>
export default {
methods: {
emitIndex (id) {
this.$emit('pushId', id)
}
}
}
</script>
四. 关于computed与watch
1. computed与watch的区别:
- computed是计算属性,watch是监听,监听data中的数据变化
- computed支持缓存,即当其依赖的属性值发生变化时,计算属性会重新计算,反之则使用缓存中的属性值;watch不支持缓存,当对应属性发生变化的时候,响应执行
- computed不支持异步,有异步操作时无法监听数据变化;watch支持异步
2. computed与watch的使用场景
- computed的使用
javascript
<template>
<div>
{{ changewords }}
</div>
</template>
<script>
export default {
data () {
myname: 'aBcDEf'
},
computed: {
changewords(){
return this.myname.substring(0,1).toUpperCase()
}
}
}
</script>
- watch的使用
javascript
<template>
<div>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</div>
</template>
<script>
export default{
data () {
firstName: 'Dawei',
lastName: 'Lou',
fullName: ''
},
watch: {
firstName(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
}
// firstName: {
// handler(newName, oldName) {
// this.fullName = newName + ' ' + this.lastName;
// },
// immediate: true
// }
}
}
</script>
五. 关于mixin
局部混入中mixin的文件就是一个对象,这个对象可以包含vue组件的一些常见的配置,包括data,methods,生命周期的钩子函数等等。
不同组件中的mixin是相互独立的。
mixin的使用
javascript
<!-- 引用mixins的文件 -->
<script>
import queryList from "@/common/mixin/queryList";
export default{
mixins: [queryList]
}
</script>
<!-- mixins的文件 -->
export const mixins = {
data() {
return {};
},
computed: {},
created() {},
mounted() {},
methods: {},
};
六. 关于slot的使用
html
<!-- 子组件使用插槽slot Link.vue-->
<template>
<a :href="href" rel="external nofollow" class="link">
<!-- 留个插槽,外界传入内容放置在这里 -->
<slot></slot>
</a>
</template>
<!-- 父组件调用子组件 -->
<template>
<div class="app">
<Link href="https://baidu.com" rel="external nofollow" > 百度</Link>
<Link href="https://google.com" rel="external nofollow" style="margin-top: 10px">
<!-- 这里允许放置任意的内容,包括字符串和标签 -->
<span>Icon</span>谷歌</Link
</Link>
</div>
</template>
七. 关于vuex
vuex的五个组成部分:state,mulations,action,getters,modules
- state:定义了应用程序的状态,即要管理的数据
javascript
const store = new Vuex.Store({
state: {
count: 0
}
})
- getters:用于获取state中的状态,类似vue组件中的计算属性
javascript
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
doubleCount(state) {
return state.count * 2
}
}
})
- mulations:修改state的数据
javascript
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
},
add(state, payload) {
state.count += payload
}
}
})
- action:用于异步操作和提交mulations,在actions中可以进行任何异步操作,最后再提交到mulations中同步修改state
javascript
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
incrementAsync(context) {
setTimeout(() => {
context.commit('increment')
}, 1000)
}
}
})
- modules:用于将store分割成模块,每个模块都拥有自己的state, getters, mulations, action和子模块,以便提高应用程序的可维护性
javascript
const store = new Vuex.Store({
modules: {
cart: {
state: {
items: []
},
mutations: {
addItem(state, item) {
state.items.push(item)
}
},
actions: {
addAsyncItem(context, item) {
setTimeout(() => {
context.commit('addItem', item)
}, 1000)
}
}
}
}
})