0
| 上一月 | 一 | 下一月 | ||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
1230博客
<input :value="message" @input="message = $event.target.value" />
// 父组件
<template>
<base-checkbox v-model="baseCheck" />
</template>
// 子组件
<template>
<input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" />
</template>
<script>
export default {
model: {
prop: 'checked',
event: 'change'
},
prop: {
checked: Boolean
}
}
</script>
class 和 style 可以通过对象语法和数组语法进行动态绑定
<template>
<div :class="{ active: isActive }"></div>
<div :style="{ fontSize: fontSize }">
</template>
<script>
export default {
data() {
return {
isActive: true,
fontSize: 30
}
}
}
<template>
<div :class="[activeClass]"></div>
<div :style="[styleFontSize]">
</template>
<script>
export default {
data() {
return {
activeClass: 'active',
styleFontSize: {
fontSize: '12px'
}
}
}
}
</script>
slot 插槽，可以理解为slot在组件模板中提前占据了位置。当复用组件时，使用相关的slot标签时，标签里的内容就会自动替换组件模板中对应slot标签的位置，作为承载分发内容的出口。
主要作用是复用和扩展组件，做一些定制化组件的处理。
插槽主要有3种
// 子组件
<template>
<slot>
<div>默认插槽备选内容</div>
</slot>
</template>
// 父组件
<template>
<Child>
<div>替换默认插槽内容</div>
</Child>
</template>
slot 标签没有name属性，则为默认插槽。具备name属性，则为具名插槽
// 子组件
<template>
<slot>默认插槽的位置</slot>
<slot name="content">插槽content内容</slot>
</template>
// 父组件
<template>
<Child>
<template v-slot:default>
默认...
</template>
<template v-slot:content>
内容...
</template>
</Child>
</template>
// 子组件
<template>
<slot name="footer" childProps="子组件">
作用域插槽内容
</slot>
</template>
// 父组件
<template>
<Child v-slot="slotProps">
{{ slotProps.childProps }}
</Child>
</template>
// 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注册 (指令函数)
Vue.directive('my-directive', function () {
// 这里将会被 `bind` 和 `update` 调用
})
// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')
<template>
<div>{{ message | formatMessage }}</div>
</template>
<script>
export default {
filters: {
formatMessage: function(value) {
// 可基于源值做一些处理
return value
}
}
}
</script>
Vue.filter('formatMessage', function(value) {
// 可基于源值做一些处理
return value
})
<div>{{ message | formatMessage1 | formatMessage2 }}</div>
v-show指令通过修改元素的display属性让其显示或者隐藏，v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果加载渲染过程：
子组件更新过程：
父组件更新过程：
销毁过程：
| 生命周期 | 阶段 | 描述 |
|---|---|---|
| beforeCreated | 创建前 | vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 |
| created | 创建后 | vue实例的数据对象data有了，$el还没有。 |
| beforeMount | 模板载入前 | vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换 |
| mounted | 模板载入后 | vue实例挂载完成，data.message成功渲染。 |
| beforeUpdate | 组件更新前 | 组件更新之前调用 |
| updated | 组件更新后 | 组件更新之后调用 |
| beforeDestroy | 组件销毁前 | 调用$destroy方法后，立即执行beforeDestroy |
| destroyed | 组件销毁后 | 组件销毁后调用，此时只剩下dom空壳 |
1. 有哪些生命周期
系统自带：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
2. 一旦进入到页面或者组件，会执行哪些生命周期，顺序。
beforeCreate
created
beforeMount
mounted
3. 在哪个阶段有$el，在哪个阶段有$data
beforeCreate 啥也没有
created 有data没有el
beforeMount 有data没有el
mounted 都有
4. 如果加入了keep-alive会多俩个生命周期
activated、deactivated
5. 如果加入了keep-alive，第一次进入组件会执行哪些生命？
beforeCreate
created
beforeMount
mounted
activated
6. 如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期？
只执行一个生命周期：activated
<div v-on="{click:myclick,mouseleave:myMouseleave}"></div>
（1）mounted
如果把所有请求放在created里面的话,请求过多会,加载太慢会导致页面出现短暂的白屏情况,一般上我写的话,接口不复杂会放created里面,接口多复杂的话会放在mounted里面.
（2）mounted
created 是加载DOM,html之后 就马上执行, 比如初始化,获取屏幕高度调整,赋值等等,而mounted就是执行包括js之后,准备开始调用方法,也就是说 类似传统开发那样,先加载jquery 再调用插件
store.commit('increment')
store.dispatch('increment')
一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便
webpack 是一个现代 JavaScript 应用程序的静态模块打包器
入口(entry)、输出(output)、loader、插件(plugins)、模式
https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive https://www.jianshu.com/p/d9211d5b5837 https://blog.csdn.net/fu983531588/article/details/90321827
生产环境是内网的话，就把资源放内网，通过静态文件引入 如果有外网的话，可以通过CDN方式引入，因为不用占用访问外网的带宽，不仅可以为您节省流量，还能通过CDN加速，获得更快的访问速度。但是要注意下，如果你引用的CDN 资源存在于第三方服务器，在安全性上并不完全可控。
在访问到当前页面才会加载相关的资源
打包的app.js过大，另外还有一些生成的map文件。先将多余的map文件去掉，
找到config文件夹下index.js文件,把这个build里面的productionSourceMap改成false即可
通过减少文件体积来提高加载速度
热门推荐：
0
