vue组件笔记-CSDN博客

显示宽高相等的图片，宽度为屏幕宽度，高度与宽度相等

<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 官方介绍：

cn.vuejs.org/v2/guide/re…

3-5年内部岗位（平安、乐信、500万、vivo、oppo）推荐机会，欢迎发简历到： zgxie@126.com

遇到的进行整理。