vue小总结

Posted 2021-02-12 mokani

好处：将开发者的精力从dom中解除，极少做dom操作

用法：一个元素 一个数据 通过指令绑定一下

v-   这种是指令 如v-if v-show v-else v-for v-on:click  v-bind ......

事件修饰符  .stop(阻止冒泡)  .prevent(取消默认事件)

按键修饰符   鼠标按钮修饰符

---

 

函数/计算属性/watch监听

计算属性（配置项） computed 默认有缓存功能，只有当与计算属性中相关的属性的值变化时，才会执行（相关属性不一定是要监听属性）

监听（配置项）  要监听的数据发生变化时 执行

---

过滤器　（配置项）filter

全局过滤器 vue.filter()

局部过滤器 filters：function（）{}

{{  要过滤掉的数据 |  过滤器名  }}　　

---

 

实例中的data 是个对象 

组件中的data 是个函数 返回一个对象data(){  return {}  }

_______________________________________________

动态组件： 让多个组件使用同一个挂载点，并动态进行切换。

component 动态的绑定它的is特性，可以实现动态组件 keep-alive 包裹动态组件(组件)时，会缓存不活动的组件实例，而不是销毁它们 组件切换调用的时候本身会被销毁掉的，只要加上keep-alive进行包裹，就不会被销毁，而是被缓存起来， 下一次使用的时候直接从缓存中调用 

 

---

使用组件若再加元素时 默认都不解析读取

 若想解析读取的话 则在组建模板中声明一个<slot></slot>插槽标签，这样就能读取了，

但这样是全部读取；有几个slot读取几次；若想读取特定的 则：

<h1 slot=‘top‘>今天周四</p>

<slot name=‘top‘></slot>

<slot></slot>插槽的作用：可以自定义组件里的部分内容 

---

vue中使用c3动画

<transition name=‘fade‘>   <p v-if=‘show‘ >hello</p>  </transition>

<style>

    .fade-enter：

    .fade-enter-to:

    .fade-enter-active

    .fade-leave:

    .fade-leave-to:

    .fade-leave-active:

</style>

 

transition只能用一个单元素 

若是多元素如两个p那么要用transition-group 并且每个元素都要有一个key

        或者将内部的多元素再加个父元素 对父元素进行v-if=‘show‘

animate.css   超简单 比上面的还好看

先下载css 引入

使用 <transition enter-active-class=‘animater 进入的方式的类名‘ leave-active-class=‘animater 离开的方式的类名‘>  //animater必须有 不然不会动

 

---

组件传参  https://www.cnblogs.com/mokani/p/10492072.html

生命周期  https://www.cnblogs.com/mokani/p/10492104.html

路由跳转  https://www.cnblogs.com/mokani/p/10492190.html