一、遍历对象
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
原文：https://www.cnblogs.com/liushihong21/p/11335974.html