vue基础知识

一、遍历对象

v-for = "(value, index) in obj" // 遍历对象

<template>
	<ul>
      <li :key="key" v-for="(value, key) in obj">{{value}}</li>
    </ul>
</template>

<script>
	export default {
		data(){
			return {
				obj:{
					firstName: "John",
					lastName: "Doe",
					age: 30
				}
			}
		}
	}
</script>

二、操作DOM

this.$nextTick
this.$refs

<template>
	<div>
		<p>操作DOM</p>
		<div ref="test">测试操作DOM</div>
	</div>
</template>

export default {
	data(){
		return {
		
		}
	},
	mounted(){
		this.$refs.test.innerHTML = "我好高兴！";
	}
}

三、transition 动画

<template>
	<div>
		<p>过渡效果</p>
		<button @click="show=!show">Toggle</button>
		<transition name="fade">
		  <p v-if="show">Hello World!</p>
		</transition>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				show: false
			}
		}
	}
</script>

<style>
	.fade-enter-active,
	.fade-leave-active {
	  transition: opacity 0.5s;
	}
	.fade-enter,
	.fade-leave-to {
	  opacity: 0;
	}
	.fade-enter-to {
	  opacity: 1;
	}
</style>

1、隐藏
leave 离开 leave 1--- leave-active ----- leave-to 0
opcity: 1 变到 0

2、显示
enter 进入 enter 0 --- enter-active ------ enter-to 1
opcity: 0 变到 1

四、页面跳转功能

用法1：<router-link to="/demo1">demo1</router-link>
to="{name:'demo9', params:{userId:123}}"
用法2: :to="{name:'demo9',params:{userId:123}}"
用法3：this.$router.push({path:'/demo1'});
用法4：this.$router.push({name:'demo1',params:{userId:124}})

五、状态管理Vuex

全局状态管理，所有页面共享数据
设置数据： this.$store.dispatch('increment',100000);
获取数据：this.$store.state.num;

store 代码

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 0,
        num: 1
    },
    mutations: {
        increment(state, num) {
            state.count++;
            state.num = num;
        }
    },
    actions: {
        inc({ commit }, obj) {
            commit('increment', obj);
        }
    }
});　

vue 页面

<template>
	<div>
		<p>状态管理vuex</p>
		<div>{{msg}}</div>
		<button @click="change">change按钮</button>
	</div>
</template>

export default {
	data(){
		return {
			msg : "123"
		}
	},
	methods:{
		change(){
		   // vuex取数据
		   // this.msg = this.$store.state.count;
				
		  // 修改公共数据
		  this.$store.dispatch("inc", 100000);
		  this.msg = this.$store.state.num;
		}
	}
}

六、Slot 插槽　
常用于组件调用中

栗子　

slot组件

<template>
  <div>
    <div>测试插槽</div>
    <slot></slot>

    <p>我是最底部</p>
    <slot name="bottom"></slot>
  </div>
</template>

vue页面

<template>
<div>
	<p>slot 插槽</p>
	<mySlot>
		<div>test-1</div>
		<p>test-2</p>
		<p>test-3</p>
		<div slot="bottom">test-4</div>
	</mySlot>
</div>
</template>

<script>
	// 引入组件
	import mySlot from "../../components/slot";
	export default {
		data(){
			return {
			
			}
		},
		components:{
			mySlot
		}
	
	}
</script>

页面输出
slot 插槽
测试插槽
test-1
test-2
test-3

我是最底部
test-4