vue小总结

好处：将开发者的精力从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 {}  }

_______________________________________________

---

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

 若想解析读取的话 则在组建模板中声明一个<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必须有 不然不会动

---

组件之间的共享状态

vuex 单项数据流 及只能从一个方向修改数据

 

五个属性 state mutation action getter  module

  state  存状态 数据

  getters  派生状态 类似计算属性

  mutations  改变state 只能通过这里修改数据

  actions  调用mutations  this.$store.dispatch(‘xxx‘,data)触发action   commit

  modules

组件触发[dispatch]action ，action提交[commit]mutations，mutations修改state值，组件根据state或getters渲染页面

常用于： 地址  登录状态 音乐播放 加入购物车

this.$store.state.num

 

双向的数据绑定  数据变化 页面变化

原理 vm将date里的数据通过object.defindeProperty进行处理，使每个数据都有getter/setter，当数据发生改变时，触发setter方法，setter内部有watch监听，watch监听实现页面变化

 

---

vue小总结

原文：https://www.cnblogs.com/mokani/p/10492061.html