显示宽高相等的图片,宽度为屏幕宽度,高度与宽度相等
<div class="image-header">
<img :src="food.image"/>
</div>
.image-header
position: relative
width:100%
height: 0
padding-top : 100%
img
position: absolute
left: 0
top: 0
width: 100%
height: 100%
复制代码
重点是父元素的height
设为0,padding-top
设为100%
非父子组件传值 ☆
主要通过事件总线传值
在根节点给 Vue
挂载一个空的 Vue
对象
Vue.prototype.bus = new Vue();
复制代码
需要发送事件的组件里
this.bus.$emit("change", params)复制代码
接收事件的组件
this.bus.$on("change", (msg) => {
//do yourself work
})复制代码
动画结合 Animate.css
//引入 animate.css
<link rel="stylesheet" type="text/css" href="animate.css">
//布局
<transition enter-active-class="animated bounce" leave-active-class="animated shake">
<p v-if="show">hello world</p>
</transition>
<button @click='toggleShow'>toggle</button>
复制代码
要定义 enter-active-class
和 leave-active-class
的类名,且必须有 animated
,想要什么动画效果就写在第二个位置上
解决第一次显示没有动画的bug
<transition
appear
enter-active-class="animated bounce"
leave-active-class="animated shake"
appear-active-class="animated bounce">
<p v-if="show">hello world</p>
</transition>
复制代码
在 <transition>
上添加 appear
和 appear-active-class
即可。
同时使用过渡和动画
<transition
name="fade"
type='transition'
appear
enter-active-class="animated bounce fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated bounce">
<p v-if="show">hello world</p>
</transition>
复制代码
在 enter-active-class
和 leave-active-class
加上相应的类名 fade-enter-active
和 fade-leave-active
,然后在样式中定义过渡效果即可。
.fade-enter-active, .fade-leave-active{
transition: opacity 2s
}
.fade-enter, .fade-leave-to{
opacity: 0
}
复制代码
动画执行的总时长是根据动画还是过渡来定呢?可以手动指定:
//指定整体动画时间为过渡动画时间
type='transition'复制代码
还可以自己指定动画总时长:
//指定动画时长为10秒
:duration="10000"
//分别指定进场时长5秒和出场动画时长10秒
:duration="{enter: 5000, leave: 10000}"复制代码
img 标签的 src 动态绑定
路径前加 require()
<img :src="bookingManageImg" slot="icon"/>
bookingManageImg(){
return this.selectedTab === "bookingManage" ? require('../assets/manage_focus.png') : require('../assets/manage_normal.png')
},复制代码
vuex 在页面刷新后状态丢失解决办法
刷新页面后,存在 vuex 的数据会丢失,给调试带来不便。把用户的登录信息放到 sessionStorage
中避免丢失。
const USER_INFO = "userInfo";
export default new Vuex.Store({
state: {
userInfo: JSON.parse(sessionStorage.getItem(USER_INFO))
},
mutations: {
setUserInfo(state, userInfo){
//存储到 sessionStorage 中以防刷新页面后状态丢失
sessionStorage.setItem(USER_INFO, JSON.stringify(userInfo));
state.userInfo = userInfo
}
}
}
复制代码
组件基本形式
Vue.prototype.$lang = $lang
Vue.component('lang', {
render: function(h){
return (<em domPropsInnerHTML="XXXXXXXX"></em>)
}
})
Vue.directive('lang', {
bind: function(el, binding){
// 元素和后面的值
el.innerHTML = binding.value
},
inserted: function(el, binding){
},
update: function(el, binding){},
componentUpdated: function(el, binding){}
})复制代码
复制代码
Vue 响应原理
把一个普通javascript 对象传给Vue 实例来作为它的data
选项,Vue 将遍历它的属性,用Object.defineProperty
将它们转为 getter/setter。
每个组件实例都有相应的watcher
程序实例,它会在组件渲染的过程中把属性记录依赖,当依赖项的setter
被调用时,会通知watcher 重新计算,从而致使它关联的组件得以更新。
所以,你直接vm.bb = '123'
这种是不响应的,(缺少一步转为getter/setter)Vue 不能检测到对象属性的添加或删除。
不能检测到对象属性的解决办法:
Vue.set(object, key, value)
this.$set(this.someObject, 'b', '2')
也可以创建一个新的对象,让它包含原对象的属性和新的属性:
// Object.assign(this.someObj, {a:1, b:2}) (这两个是有区别的) err
this.someObj = Object.assign({}, this.someObj, {a:1,b:2})
数组不能检测的解决办法:
- 当你直接设置一个项的索引时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组长度, 例如:
vm.items.length = newLength
fix 1:
Vue.$set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
fix 2:
example1.items.splice(newLengh)
监听组件的生命周期 技巧 ☆
比如有父组件Parent 和子组件 Child, 如果父组件监听到子组件挂载mounted 就做一些逻辑处理,常规的写法:(缺点需要动两个父子组件)
// Parent.vue
<Child @mounted="dosometing" />
// Child.vue
mounted(){
this.$emit('mounted')
}复制代码
这里提供一个更好用的方式, 子组件不需要任何处理,只需在父组件引用的时候通过@hook 来监听即可。
<Child @hook:mounted="dosomething" />复制代码
其他生命周期事件,依然可以
多属性多事件传递技巧
如果碰到属性较多时,需要一个个去传递,非常不友好且费时,有没有一次性传递的呢?
v-bind 和v-on
<template>
<BaseList v-bind="$props" v-on="$listeners"> </BaseList>
</template>复制代码
实现属性传递
函数式组件 (vue 性能优化)
函数式组件,即无状态,内部没有任何生命周期处理办法,轻量,特别适合用来只依赖外部数据传递而变化的组件。
函数式组件只是函数,所以渲染开销也低很多
- 在template 标签里面标明 functional
- 只接受 props 值
- 不需要 script 标签
<!-- App.vue -->
<template>
<div id="app">
<List
:items="['Wonderwoman', 'Ironman']"
:item-click="item => (clicked = item)"
/>
<p>Clicked hero: {{ clicked }}</p>
</div>
</template>
<script>
import List from "./List";
export default {
name: "App",
data: () => ({ clicked: "" }),
components: { List }
};
</script>
复制代码
<!-- List.vue 函数式组件 -->
<template functional>
<div>
<p v-for="item in props.items" @click="props.itemClick(item);">
{{ item }}
</p>
</div>
</template>复制代码
vue 官方介绍:
3-5年内部岗位(平安、乐信、500万、vivo、oppo)推荐机会,欢迎发简历到: zgxie@126.com
遇到的进行整理。