15.vue动画& vuex

Vue.config.productionTip = false; 是否显示提示信息

import/export

export xxx 必须跟跟对象或者和定义一起

对象： export {xxxx}

定义: export let a = xxx;

export function(){}

引入：

import modA from "./a" 错误

import {a} from "./a"

导出：

a.js

let a = 12;

export a;错误

export {a}

引入：

import modA from "./a" // modA => {a:12}

导出：

a.js

let a = 12;

export default {a}

导出:

export let a = "a";

等价于

let a = "a";

export {a};

引入：

import {a} from "./a"

导出:

let a = "a"

export default {a};

等价于

export default {a:"a"};

引入：

import modA from "./a";

导出

export var a = "a";

export var b = "b";

export var c = "c";

导入

import modA from "./a";错误

import * as modA from "./a";

console.log("modA",modA,modA.a,modA.b,modA.c);

或:

import {a,b,c} from "./a";

console.log("modA",a,b,c);

导出：

let a = "a";

let b = "b";

let c = "c";

export default {a,b,c}

导入

import modA from "./a";

console.log("modA",modA,modA.a,modA.b,modA.c);

export default 导出去的东西

引入的时候可以取任意的名字

++一个模块只能有一个default++

导出

export default function(){

alert("fn1");

};

export let a = 1;

export let b = 2;

export let c = 3;

引入：

import * as all from "./a";

// 接收所有

console.log("0modA",all,all.default,all.a,all.b,all.c);

import modA from "./a";

//获取的default出去的东西

console.log("1modA",modA);

import {a,b,c} from "./a";

console.log("2modA", a,b,c);

==>合并

import modA,{a,b,c} from "./a";

console.log("2modA",modA, a,b,c);

导出

export default {a:1};

export let b = "b";

引入

import modA from "./a";

console.log("2modA",modA);

setTimeout(()=>{

import("./a").then(res=>{

console.log("then:",res,res.default,res.b);

});

sass/less/css

sass:$

less:@

sass:安装 cnpm i -S sass-loader node-sass

.sass

.scss

less:安装 cnpm i -S less-loader less

样式里面配置 lang="scss/less"

运动/动画

原生写法

两部分：进入enter、离开leave

enter ---->none-->block 显示的过程

leave ---->block-->none 消失的过程

动画原生写法

xxx-enter{}        开始的状态

xxx-enter-active{} 运动形态

xxx-enter-to{}     终点     

xxx-leave{}        离开的开始的状态

xxx-leave-active{} 运动形态

xxx-leave-to{}     离开终点

exp1:留言板一

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

<style>

#div1{width:200px; height: 200px; background: #ccc;}

.fade-enter{opacity: 0;}

.fade-enter-active{ transition: 1s all ease;}

.fade-enter-to{opacity: 1;}

.fade-leave{opacity: 1;}

.fade-leave-active{transition: 1s all ease;}

.fade-leave-to{opacity: 0;}

</style>

<script src = "vue.js"></script>

<script>

window.onload = function(){

	let vm = new Vue({

		el:"#app",

		data:{

			isShow:true,

		},

		methods:{

			showHide(){

				this.isShow = !this.isShow;

			}

		}

	})

}

</script>

</head>

<body>

<div id="app">

	<input @click="showHide" type="button" value="显示隐藏"/>

	<transition name="fade">

		<div id="div1" v-show="isShow"></div>

	</transition>

</div>

</body>

</html>

使用自定义的动画名称

enter-class = "xxx"

enter-active-class = "xxx"

enter-to-class = "xxx"      

leave-class = "xxx"

leave-active-class = "xxx"

leave-to-class = "xxx"

exp2:留言板二

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{marign:0;padding:0;list-style:none;}

ul{width:300px; overflow: hidden; border:1px solid green;}

ul li{ text-indent: 2em; height:50px; line-height: 50px; border-bottom: 1px dashed red;}

ul li:nth-last-child(1) { border-bottom:none;}

.fade-slide-enter{opacity:0;height: 0;}

/*.fade-slide-enter-active{ transition: 1s all ease;}*/

.fade-slide-in-active{ transition: 1s all ease;}

.fade-slide-enter-to{opacity:1;height: 50px;}

.fade-slide-leave{opacity:1;height: 50px;}

/*.fade-slide-leave-active{transition: 1s all ease;}*/

.fade-slide-out-active{transition: 1s all ease;}

.fade-slide-leave-to{opacity:0;height: 0;}

</style>

<script src="vue.js"></script>

<script>

window.onload = function(){

	let vm = new Vue({

		el:"#app",

		data:{

            msg:"abc",

            arr:["aaa","bbb","ccc"]

		},

		methods:{

			add(){

				this.arr.push(this.msg);

			},

			/*del(index){

				 this.arr.splice(index,1)

            } */

            del(item){

                this.arr = this.arr.filter(value=>{

                    return item != value;

                });

           }

		}

	});

};

</script>

</head>

<body>

<div id="app">

    <input v-model="msg" type="text" value=""/>

    <input @click="add" type="button" value="添加"/>

    <ul>

        <transition-group name="fade-slide"

            enter-active-class="fade-slide-in-active"

            leave-active-class="fade-slide-out-active"

        >

            <li v-for="item,index in arr" :key="item">{{item}}<a @click="del(item)" href="javascript:;">删除</a></li>

        </transition-group>

    </ul>

</div>

</body>

</html>

运动：

transition：只能作用一个元素要多个元素需要使用 transition-group

<transition/transition-group name="指定动画的名称" enter-active-class="自定义的动画样式名称">

</transition/transition-group>

使用animate.css：

1、animated添加到 transition标签上

<transition enter-active-class="animated xxx">

	<div>动画的元素</div>

</transition>

2、animated添加到 transition动画的元素上

<transition>

	<div class="animated"></div>

</transition>

exp3:留言板三

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link rel="stylesheet" href="animate.css"/>

<style>

*{margin:0;padding:0;list-style:none;}

ul{width:300px; overflow: hidden; border:1px solid green;}

ul li{ text-indent: 2em; height:50px; line-height: 50px; border-bottom: 1px dashed red;}

ul li:nth-last-child(1) { border-bottom:none;}

</style>

<script src="vue.js"></script>

<script>

window.onload = function(){

	let vm = new Vue({

		el:"#app",

		data:{

            msg:"abc",

            arr:["aaa","bbb","ccc"]

		},

		methods:{

			add(){

				this.arr.push(this.msg);

			},

            del(item){

                this.arr = this.arr.filter(value=>{

                    return item != value;

                });

           }

		}

	});

};

</script>

</head>

<body>

<div id="app">

    <input v-model="msg" type="text" value=""/>

    <input @click="add" type="button" value="添加"/>

    <ul>

        <transition-group

            enter-active-class="animated rollIn"

            leave-active-class="animated rollOut"

        >

            <li v-for="item,index in arr" :key="item">{{item}}<a @click="del(item)" href="javascript:;">删除</a></li>

        </transition-group>

    </ul>

</div>

</body>

</html>

vue2-animate

cnpm i vue2-animate

vue-cli:引入外部文件

1、index.html页面安装传统的引入文件的方式进行引入

2、在入口文件main.js 通过import 直接导入

import "vue2-animate/dist/vue2-animate";

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

记住一句话：如果要修改state里面的值，只能通过mutaions进行修改！！！

https://vuex.vuejs.org/zh/guide/

https://github.com/vuejs/vuex

1、选安装

cnpm i -S vuex

2、导入

import Vuex from "vuex";

3、创建存储空间

let store = new Vuex.Store({

	  strict:true,严格模式

		getters:{},

		mutations:{},

		actions:{},

		modules:{}

});

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

4、注入实例Vue

new Vue({

	store

})

通信方式：

组件--->store

0、this.$store.state.count = xxx; 不推荐的错误方式

1、this.$store.commit("mutation",value);

2、this.$store.dispatch("action",value);

store-->store

action--->mutation

ctx.commit("mutation",value);

ctx.dispatch("action",value);

action/mutation区别

mutation只能做同步操作不能做异步！

所有数据修改只能通过mutation进行,

action不能直接修改state值

getters:简单的认为就是获取数据的一个计算属性

使用的时候不需要带括号： this.$store.getters.方法名称

exp:

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({

  strict:true,

  state:{

    count:1,

  },

  getters:{

    filterCount(state){

        return state.count >= 20? "20":state.count;

    }

  },

  mutations:{//只能做同步操作

    plusMutation(state,payload){//value  payload有效载荷

      state.count++;

    },

    minusMutation(state,payload){//value  payload有效载荷

        state.count--;

      }

  },

  actions:{//执行同步和异步操作

    plusAction({commit,dispatch},payload){//ctx容器  payload有效载荷

        commit("plusMutation");

    },

    minusAction({commit},payload){

        commit("minusMutation");

    }

  }

});

模块：多人开发，命名冲突

1、模块之间的数据访问，是区分模块

this.$store.state.count

this.$store.state.modA.count

2、方法不区分模块

this.$store.commit("mutation",value);

如果要区分模块需要加上命名空间

在子模块中添加 namespaced: true,

调用子模块的方法

this.$store.commit("modA/mutation",value);

功能函数

mapState/mapGetters/mapActions/mapMutations

... 解构赋值

store.vue

<template>

<div>

  <input @click="minus" type="button" value="减"/><br />

    {{count}}------{{filterCount}} <br />

    <input @click="plus" type="button" value="加"/> 

</div>

</template>

<script>

import {mapState,mapGetters,mapActions,mapMutations} from "vuex";

console.log("mapState:",mapState({count:"count"}));

console.log("mapGetters:",mapGetters({filterCount:"filterCount"}));

console.log("mapActions:",mapActions({minus:"minusAction"}));

console.log("mapMutations:",mapMutations({plus:"plusMutation"})); 

export default {

  name: "Store",

  data(){

    return{

    }

  },

  computed:{

    ...mapState({count:"count"}),

    ...mapGetters({filterCount:"filterCount"})

  },

  methods:{

    ...mapActions({minus:"minusAction"}),

    ...mapMutations({plus:"plusMutation"})

  },

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>

store.js



import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({

  strict:true,

  state:{

    count:1,

  },

  getters:{

    filterCount(state){

        return state.count >= 20? "20":state.count;

    }

  },

  mutations:{//只能做同步操作

    plusMutation(state,payload)st{//value  payload有效载荷

      state.count++;

    },

    minusMutation(state,payload){//value  payload有效载荷

        state.count--;

      }

  },

  actions:{//执行同步和异步操作

    plusAction({commit,dispatch},payload){//ctx容器  payload有效载荷

        commit("plusMutation");

    },

    minusAction({commit},payload){

        commit("minusMutation");

    }

  }

});

混入 (mixins)

mixins是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

<template>

<div>

  <input @click="minus" type="button" value="减"/><br />

    {{count}}------{{filterCount}} <br />

    <input @click="plus" type="button" value="加"/> 

</div>

</template>

<script>

import {mapState,mapGetters,mapActions,mapMutations} from "vuex";

console.log("mapState:",mapState({count:"count"}));

console.log("mapGetters:",mapGetters({filterCount:"filterCount"}));

console.log("mapActions:",mapActions({minus:"minusAction"}));

console.log("mapMutations:",mapMutations({plus:"plusMutation"})); 

let stateMixi = {

    computed:mapState({count:"count"})

};

let gettersMixi = {

    computed:mapGetters({filterCount:"filterCount"})

};

let actionsMixi = {

    methods:mapActions({minus:"minusAction"})

};

let mutationsMixi = {

    methods:mapMutations({plus:"plusMutation"})

};

export default {

  name: "Store",

  data(){

    return{

    }

  },

   mixins: [stateMixi,gettersMixi,actionsMixi,mutationsMixi]

  // computed:mapGetters({filterCount:"filterCount"}),

  // methods:mapMutations({plus:"plusMutation"}),

  // computed:{

  //   // count(){

  //   //   return this.$store.state.count;

  //   // },

  //   // filterCount(){

  //   //   return this.$store.getters.filterCount;

  //   // }

  // },

  // methods:{

  //   plus(){

  //     //mutation

  //     this.$store.commit("plusMutation");

  //   },

  //   minus(){

  //     //action

  //     this.$store.dispatch("minusAction");

  //   },

  // }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>