【Vue】Vue2.0+Vue3.0学习笔记day11（Vuex）

已于 2022-02-19 14:56:43 修改
阅读量563 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2022-01-16 12:58:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58214412/article/details/122434588
版权

目录

102.默认插槽

103.具名插槽

104.作用域插槽

105.Vuex简介

106.就和案例_纯vue版

107.Vuex工作原理图

108.搭建Vuex环境

109.求和案例_Vuex版

110.Vuex开发者工具的使用

111.getter配置项

112.mapState和mapGetters

113.mapAction与mapMutations

114.多组件共享数据

115.Vuex模块化_namespace1

116.Vuex模块化_namespace2

102.默认插槽

  不使用插槽

<template> 
  <div class="container">
    <Category title="美食" :listData="foods"></Category>
    <Category title="游戏" :listData="games"></Category>
    <Category title="电影" :listData="filsm"></Category>
</div>
</template>

<script>
    import Category from "./components/Category.vue";
    export default {
        name:'App',
        components:{
           Category
        },
        data() {
            return {
               foods:['火锅','烧烤','小龙虾'],
               games:['王者','吃鸡','lol'],
               filsm:['《功夫》','《大话西游》','《喜剧之王》']               
            }
        },       
    }
</script>

<style>
    .container{
        display: flex;
        justify-content: space-around;
    }
</style>

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <ul>
            <li v-for="(item, index) in listData" :key="index">{{item}}</li>
        </ul>
    </div>
</template>

<script>

export default {
    name:'Category',
    props:['listData','title']
}
</script>

<style>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 200px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
</style>

 使用默认插槽

<template> 
  <div class="container">
    <Category title="美食" :listData="foods">
        <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg">
    </Category>
    <Category title="游戏" :listData="games">
        <ul>
            <li v-for="(g, index) in games" :key="index">{{g}}</li>
        </ul>
    </Category>
    <Category title="电影" :listData="filsm">
        <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </Category>
</div>
</template>

<script>
    import Category from "./components/Category.vue";
    export default {
        name:'App',
        components:{
           Category
        },
        data() {
            return {
               foods:['火锅','烧烤','小龙虾'],
               games:['王者','吃鸡','lol'],
               filsm:['《功夫》','《大话西游》','《喜剧之王》']               
            }
        },       
    }
</script>

<style>
    .container{
        display: flex;
        justify-content: space-around;
    }
    video{
        width: 100%;
    }
    img{
        width: 100%;
    }
</style>

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽 -->
        <slot></slot>
    </div>
</template>

<script>

export default {
    name:'Category',
    props:['title']
}
</script>

<style>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
</style>

103.具名插槽

<template> 
  <div class="container">
    <Category title="美食" :listData="foods">
        <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg">
        <a slot="footer" href="https://blog.csdn.net/weixin_58214412?spm=1008.2028.3001.5343">更多美食</a>
    </Category>
    <Category title="游戏" :listData="games">
        <ul slot="center">
            <li v-for="(g, index) in games" :key="index">{{g}}</li>
        </ul>
        <div class="foot" slot="footer">
            <a href="https://blog.csdn.net/weixin_58214412?spm=1008.2028.3001.5343">单机游戏</a>
            <a href="https://blog.csdn.net/weixin_58214412?spm=1008.2028.3001.5343">网络游戏</a>
        </div>
    </Category>
    <Category title="电影" :listData="filsm">
        <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
        <template v-slot:footer>
            <div class="foot">
                <a href="https://blog.csdn.net/weixin_58214412?spm=1008.2028.3001.5343">经典</a>
                <a href="https://blog.csdn.net/weixin_58214412?spm=1008.2028.3001.5343">热门</a>
                <a href="https://blog.csdn.net/weixin_58214412?spm=1008.2028.3001.5343">推荐</a>
            </div>
            <h4>欢迎来观影</h4>
        </template>
    </Category>
</div>
</template>

<script>
    import Category from "./components/Category.vue";
    export default {
        name:'App',
        components:{
           Category
        },
        data() {
            return {
               foods:['火锅','烧烤','小龙虾'],
               games:['王者','吃鸡','lol'],
               filsm:['《功夫》','《大话西游》','《喜剧之王》']               
            }
        },       
    }
</script>

<style>
    .container,.foot{
        display: flex;
        justify-content: space-around;
    }
    video{
        width: 100%;
    }
    img{
        width: 100%;
    }
    h4{
        text-align: center;
    }
</style>

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽 -->
        <slot name="center"></slot>
        <slot name="footer"></slot>
    </div>
</template>

<script>

export default {
    name:'Category',
    props:['title']
}
</script>

<style>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
</style>

104.作用域插槽

<template> 
  <div class="container">
    <Category title="游戏" :listData="games">
        <template scope="a">
            <ul>
                <li v-for="(g, index) in a.games" :key="index">{{g}}</li>
            </ul>   
        </template>
    </Category>
    <Category title="游戏" :listData="games">
        <!-- {games}结构赋值 -->
        <template scope="{games}">
            <ol>
                <li v-for="(g, index) in games" :key="index">{{g}}</li>
            </ol>   
        </template>
    </Category>
    <Category title="游戏" :listData="games">
        <!-- slot-scope新的API -->
        <template slot-scope="{games}">
            <h4 v-for="(g, index) in games" :key="index">{{g}}</h4>
        </template>
    </Category>
</div>
</template>

<script>
    import Category from "./components/Category.vue";
    export default {
        name:'App',
        components:{
           Category
        },      
    }
</script>

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽 -->
        <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>

<script>

export default {
    name:'Category',
    props:['title'],
    data() {
        return {
            games:['王者','吃鸡','lol']         
        }
    }, 
}
</script>
## 插槽
   1.作用：让父组件可以向子组件指定位置插入HTML结构，也是一种组件间通信的方式，使用于父组件===>子组件
   2.分类：默认插槽、具名插槽、作用域插槽
   3.使用方法：作用域插槽的数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

105.Vuex简介

概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件通信

什么时候使用Vuex

1.多个组件依赖于同一状态      2.来自不同组件的行为需要变更同一状态

 

106.就和案例_纯vue版

<template>
    <div>
       <h1>当前求和为：{{sum}}</h1> 
       <select v-model.number="n">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
       </select>
       <button @click="increment">+</button>
       <button @click="decteent">-</button>
       <button @click="incerentOdd">当前求和为奇数再加</button>
       <button @click="incerentWait">等一等再加</button>
    </div>
</template>

<script>

export default {
    name:'Count',
    data() {
        return {
            n:1, //用户选择的数字
            sum:0 //当前的和
        }
    },
    methods: {
        increment(){
            this.sum +=this.n
        },
        decteent(){
            this.sum -= this.n
        },
        incerentOdd(){
            // 0的布尔值是false
            if(this.sum % 2){
                this.sum += this.n
            }
        },
        incerentWait(){
            setTimeout(()=>{
                this.sum += this.n
            },500)
        },
    },
}
</script>

<style>
    button{
        margin-left: 5px;
    }
</style>
<template> 
  <div>
    <Count></Count>
</div>
</template>

<script>
    import Count from "./components/Count.vue";
    export default {
        name:'App',
        components:{
           Count
        },      
    }
</script>

107.Vuex工作原理图

actions行为动作，mutations加工维护，state保存数据，dispatch和commit是两个API，backend api后端接口，devtools开发者调式工具

 当发生一个动作的值需要发送Ajax请求获取的时候，在action发送Ajax请求

组件可以直接调用commit ，没有需要判断的简单业务逻辑可以直接调用

 store（仓库）管理actions，mutations和state，提供ispatch和commit这两个API

108.搭建Vuex环境

   安装vuex

npm i vuex

 在src下创建store文件夹

// 该文件用于创建vuex中最为核心的store

// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)

// 准备actions用于响应组件中的动作
const actions = {}
// 准备mutations用于操作数据（state）
const mutations = {}
// 准备state用于存储数据
const state = {}

// 创建并导出store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

在main.js引入store并在传入配置项

// 引入vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'

// 引入store
import store from './store/index'
// 关闭vue的生产提示
Vue.config.productionTip = false

// 创建vue的实例对象--vm
new Vue({
  // 将App组件放入容器中
  render: h => h(App),
  store,
  beforeCreate(){
    Vue.prototype.$bus = this
  }
}).$mount('#app')

109.求和案例_Vuex版

<template>
    <div>
       <h1>当前求和为：{{$store.state.sum}}</h1> 
       <select v-model.number="n">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
       </select>
       <button @click="increment">+</button>
       <button @click="decteent">-</button>
       <button @click="incerentOdd">当前求和为奇数再加</button>
       <button @click="incerentWait">等一等再加</button>
    </div>
</template>

<script>

export default {
    name:'Count',
    data() {
        return {
            n:1, //用户选择的数字
        }
    },
    methods: {
        increment(){
            // this.$store.dispatch('jia',this.n)
            this.$store.commit('JIA',this.n)
        },
        decteent(){
            // this.$store.dispatch('jian',this.n)
            this.$store.commit('JIAN',this.n)
        },
        incerentOdd(){
            this.$store.dispatch('jiaOdd',this.n)
        },
        incerentWait(){
            this.$store.dispatch('jiaWait',this.n)
        },
    },
}
</script>

<style>
    button{
        margin-left: 5px;
    }
</style>

 在store中

// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)

// 准备actions用于响应组件中的动作
const actions = {
    /* jia(context,value){
        context.commit('JIA',value)
    },
    jian(context,value){
        context.commit('JIAN',value)
    }, */
    jiaOdd(context,value){
        if(context.state.sum % 2)
        context.commit('JIA',value)
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit('JIA',value)
        }, 500);
    },
}
// 准备mutations用于操作数据（state）
const mutations = {
    JIA(state,value){
        state.sum += value
    },
    JIAN(state,value){
        state.sum -= value
    },
}
// 准备state用于存储数据
const state = {
    sum:0 //当前的和
}

// 创建并导出store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

110.Vuex开发者工具的使用

111.getter配置项

​
// 准备getters用于将stade中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

// 创建并导出store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

​
<template>
    <div>
       <h1>当前求和为：{{$store.state.sum}}</h1> 
       <h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3>
       <select v-model.number="n">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
       </select>
       <button @click="increment">+</button>
       <button @click="decteent">-</button>
       <button @click="incerentOdd">当前求和为奇数再加</button>
       <button @click="incerentWait">等一等再加</button>
    </div>
</template>

112.mapState和mapGetters

<template>
    <div>
       <h1>当前求和为：{{sum}}</h1> 
       <h3>当前求和放大10倍为：{{bigSum}}</h3>
       <h3>我在{{school}}学习{{subject}}</h3>
       <select v-model.number="n">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
       </select>
       <button @click="increment">+</button>
       <button @click="decteent">-</button>
       <button @click="incerentOdd">当前求和为奇数再加</button>
       <button @click="incerentWait">等一等再加</button>
    </div>
</template>

<script>
import { mapState,mapGetters } from "vuex";
export default {
    name:'Count',
    data() {
        return {
            n:1, //用户选择的数字
        }
    },
    methods: {
        increment(){
            // this.$store.dispatch('jia',this.n)
            this.$store.commit('JIA',this.n)
        },
        decteent(){
            // this.$store.dispatch('jian',this.n)
            this.$store.commit('JIAN',this.n)
        },
        incerentOdd(){
            this.$store.dispatch('jiaOdd',this.n)
        },
        incerentWait(){
            this.$store.dispatch('jiaWait',this.n)
        },
    },
    computed:{
        // 靠程序员自己亲自去写计算属性
        /* sum(){
            return this.$store.state.sum
        },
        school(){
            return this.$store.state.school
        },
        subject(){
            return this.$store.state.subject
        },
         bigSum(){
            return this.$store.getters.bigSum
        } 
        */
        // 借助mapState生成计算属性，从state中读取数据（对象写法）
        // ...mapState({sum:'sum',school:'school',subject:'subject'}),
        // 借助mapState生成计算属性，从state中读取数据（数组写法）
        ...mapState(['sum','school','subject']),

        // 借助mapGetters生成计算属性，从getters中读取数据（对象写法）
        // ...mapGetters({bigSum:'bigSum'})
        ...mapGetters(['bigSum'])
    },
    
}
</script>

<style>
    button{
        margin-left: 5px;
    }
</style>

// 准备state用于存储数据
const state = {
    sum:0, //当前的和
    school:'新东方',
    subject:'颠大锅'
}

113.mapAction与mapMutations

备注：mapAction与mapMutations使用时，若需要传递参数要在模板绑定事件时传递好参数，否则参数是事件对象

<template>
    <div>
       
       <button @click="increment(n)">+</button>
       <button @click="decteent(n)">-</button>
       <button @click="incerentOdd(n)">当前求和为奇数再加</button>
       <button @click="incerentWait(n)">等一等再加</button>
    </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from "vuex";
export default {
    name:'Count',
    
    methods: {
        /* increment(){
            // this.$store.dispatch('jia',this.n)
            this.$store.commit('JIA',this.n)
        },
        decteent(){
            // this.$store.dispatch('jian',this.n)
            this.$store.commit('JIAN',this.n)
        }, */
        // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
        ...mapMutations({increment:'JIA',decteent:'JIAN'}),
        // ...mapMutations(['JIA','JIAN']),

        /* incerentOdd(){
            this.$store.dispatch('jiaOdd',this.n)
        },
        incerentWait(){
            this.$store.dispatch('jiaWait',this.n)
        }, */
        // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
        ...mapActions({incerentOdd:'jiaOdd',incerentWait:'jiaWait'}),
        // ...mapActions(['jiaOdd','jiaWait'])
    },
   
    
}
</script>

114.多组件共享数据

 新建组件person

<template>
  <div>
      <h1>人员列表</h1>
      <h3 style="color:red">Count组件求和为：{{sum}}</h3>
      <input type="text" placeholder="请输入名字" v-model="name">
      <button @click="add">添加</button>
      <ul>
          <li v-for="p in personList" :key="p.id">{{p.name}}</li>
      </ul>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
    name:'Person',
    data() {
        return {
            name:''
        }
    },
    computed:{
        personList(){
            return this.$store.state.personList
        },
        sum(){
            return this.$store.state.sum
        }
    },
    methods:{
        add(){
            const personObj = {id:nanoid(),name:this.name}
            this.$store.commit('ADD_PERSON',personObj)
            this.name = ''
        }
    }   
}
</script>

 在store/index.js中 

// 准备mutations用于操作数据（state）
const mutations = {
    JIA(state,value){
        state.sum += value
    },
    JIAN(state,value){
        state.sum -= value
    },
    ADD_PERSON(state,value){
        state.personList.unshift(value)
    }
}

 在count中

<h3 style="color:red">person组件列表的总人数是：{{personList.length}}</h3>

 computed:{
        // 借助mapState生成计算属性，从state中读取数据（对象写法）
        // ...mapState({sum:'sum',school:'school',subject:'subject'}),
        // 借助mapState生成计算属性，从state中读取数据（数组写法）
        ...mapState(['sum','school','subject','personList']),

        // 借助mapGetters生成计算属性，从getters中读取数据（对象写法）
        // ...mapGetters({bigSum:'bigSum'})
        ...mapGetters(['bigSum'])
    },

115.Vuex模块化_namespace1

 新建src/store/count.js文件

// 求和相关的配置
export default {
    // 开启命名空间
    namespaced:true,
    actions:{
        jiaOdd(context,value){
            if(context.state.sum % 2)
            context.commit('JIA',value)
        },
        jiaWait(context,value){
            setTimeout(() => {
                context.commit('JIA',value)
            }, 500);
        },
    },
    mutations:{
        JIA(state,value){
            state.sum += value
        },
        JIAN(state,value){
            state.sum -= value
        },
    },
    state:{
        sum:0, //当前的和
        school:'新东方',
        subject:'颠大锅',
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    },
}

新建src/store/person.js文件

import axios from "axios"
import { nanoid } from "nanoid"

// 人员管理相关的配置
export default {
    // 开启命名空间
    namespaced:true,
    actions:{
        addPersonWang(context,value){
            if(value.name.indexOf('王')===0){
                context.commit('ADD_PERSON',value)
            }else{
                alert('添加的人必须姓王')
            }
        },
        addPersonServer(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                Response => {
                    context.commit('ADD_PERSON',{id:nanoid(),name: Response.data})
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[
            {id:'001',name:'张三'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    },
}

 在store/index.js中

// 该文件用于创建vuex中最为核心的store

// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
// 使用vuex
Vue.use(Vuex)


// 创建并导出store
export default new Vuex.Store({
    // 模块化分类
    modules:{
        a:countOptions,
        b:personOptions
    }
})

 main.js 

// 引入vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'

// 引入store
import store from './store/index'
// 关闭vue的生产提示
Vue.config.productionTip = false

// 创建vue的实例对象--vm
new Vue({
  // 将App组件放入容器中
  render: h => h(App),
  store,
  beforeCreate(){
    Vue.prototype.$bus = this
  }
}).$mount('#app')

<template>
    <div>
       <h1>当前求和为：{{sum}}</h1> 
       <h3>当前求和放大10倍为：{{bigSum}}</h3>
       <h3>我在{{school}}学习{{subject}}</h3>
       <h3 style="color:red">person组件列表的总人数是：{{personList.length}}</h3>
       <select v-model.number="n">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
       </select>
       <button @click="increment(n)">+</button>
       <button @click="decteent(n)">-</button>
       <button @click="incerentOdd(n)">当前求和为奇数再加</button>
       <button @click="incerentWait(n)">等一等再加</button>
    </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from "vuex";
export default {
    name:'Count',
    data() {
        return {
            n:1, //用户选择的数字
        }
    },
    methods: {
        // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
        ...mapMutations('a',{increment:'JIA',decteent:'JIAN'}),
        // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
        ...mapActions('a',{incerentOdd:'jiaOdd',incerentWait:'jiaWait'}),
    },
    computed:{
        // 借助mapState生成计算属性，从state中读取数据（数组写法）
        ...mapState('a',['sum','school','subject']),
        ...mapState('b',['personList']),

        ...mapGetters('a',['bigSum'])
    },
    
}
</script>

<style>
    button{
        margin-left: 5px;
    }
</style>

<template>
  <div>
      <h1>人员列表</h1>
      <h3 style="color:red">Count组件求和为：{{sum}}</h3>
      <h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
      <input type="text" placeholder="请输入名字" v-model="name">
      <button @click="add">添加</button>
      <button @click="addWang">添加一个姓王的人</button>
      <button @click="addServer">添加一个人，名字随机</button>
      <ul>
          <li v-for="p in personList" :key="p.id">{{p.name}}</li>
      </ul>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
    name:'Person',
    data() {
        return {
            name:''
        }
    },
    computed:{
        personList(){
            return this.$store.state.b.personList
        },
        sum(){
            return this.$store.state.a.sum
        },
        firstPersonName(){
            return this.$store.getters['b/firstPersonName']
        }
    },
    methods:{
        add(){
            const personObj = {id:nanoid(),name:this.name}
            this.$store.commit('b/ADD_PERSON',personObj)
            this.name = ''
        },
        addWang(){
            const personObj = {id:nanoid(),name:this.name}
            this.$store.dispatch('b/addPersonWang',personObj)
            this.name = ''
        },
        addServer(){
             this.$store.dispatch('b/addPersonServer')
        }
    }   
}
</script>

<template> 
  <div>
    <Count></Count>
    <hr>
    <Person></Person>
</div>
</template>

<script>
    import Count from "./components/Count.vue";
    import Person from "./components/Person.vue";
    export default {
        name:'App',
        components:{
           Count,
           Person
        },      
    }
</script>

116.Vuex模块化_namespace2

## 模块化+命名空间
   1.目的：让代码更好维护，让多种数据分类更加明确
   2.开启命名空间后，组件中读取state数据：
      this.$store.state.a.sum
      ...mapState('a',['sum','school','subject']),
   3.开启命名空间后，组件中读取getters数据：
      this.$store.getters['b/firstPersonName']
      ...mapGetters('a',['bigSum'])
   4.开启命名空间后，组件中读取dispatch数据：
      this.$store.dispatch('b/addPersonWang',personObj)
      ...mapActions('a',{incerentOdd:'jiaOdd',incerentWait:'jiaWait'}),
   5.开启命名空间后，组件中读取commit数据：\
      this.$store.commit('b/ADD_PERSON',personObj)
      ...mapMutations('a',{increment:'JIA',decteent:'JIAN'}),

西西歪歪西歪
关注
专栏目录
Vue - flex布局 justify-content: space-around / space-between 最后一行元素不对其解决方案（JS）
王佳斌
05-24 6886
前言 本文的解决方案不止适用于 Vue（只不过用它做示例），原生 JS 或其他框架均可借助该算法完成。 使用 flex 布局时，设置 justify-content: space-around / space-between 属性后，会出现如下图所示问题： 我们希望最后一行 居左对齐 排列，如下图所示： 解决方案 解决方案有很多种，本文使用 补齐元素 方式完成，而非 :after 插入或更改布局。 Gitee 仓库地址（代码中有超级详细的注释）：https://gitee.com/wangjia
【Vue】Vue2.0+Vue3.0学习笔记day10(GitHub案例)
weixin_58214412的博客
01-11 490
目录 091.动画效果 092.过度效果 093.多个元素过度 094.集成第三方动画 095.总结过度与动画 096.配置代理方式一 097.配置代理方式二 098.GitHub案例_静态组件 099.GitHub案例_列表展示 100.GitHub案例_完善案例 101.vue-resource
vue3.0 入门四 （computed计算属性的使用）
weixin_44104659的博客
07-31 733
场景： 两个值num1 , num2 点击按钮两个数各自加1 ，展示他们的和:addnum 1 从vue中引入 computed 2 声明一个计算属性的变量，主要要用箭头函数，vue3.x中 setup是没有this这个概念的 ， 最后必须要return一个值 ...
justify-content: space-around；放在父元素还是子元素上
fury的博客
12-09 451
Vuex学习
qq_49184510的博客
06-20 115
Vuex的应用
vue——布局（flex、gride）
wy313622821的博客
09-03 1万+
前端布局发展史： 初代table布局 CSS+div布局 Flex布局（移动端较友好） grid布局（2020年） Flex布局： 实例1用flex布局制作导航栏 flex:1表示下面的综合： flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长 flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小 flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： -.
【Vue】Vue2.0+Vue3.0学习笔记day06
weixin_58214412的博客
01-07 762
目录 048.引出生命周期 049.生命周期挂载流程 050.生命周期更新流程 051.生命周期销毁流程 052.生命周期总结 053.对组件的理解 054.非单文件组件--基本使用 055.组件的几个注意点 056.组件的嵌套 057.VueComponent构造函数 058.Vue实例与组件实例 059.一个重要的内置关系 060.单文件组件
【Vue】Vue2.0+Vue3.0学习笔记day15（Vue3）
weixin_58214412的博客
01-20 818
目录 159.readonly与shallowReadonly 160.toRaw与markRaw 161.customRef 162.provide与inject 163.响应式数据的判断 164.CompositionAPI的优势 1.Options API 存在的问题 2.Composition API 的优势 165.Fragment组件 166.Teleport组件 167.Suspense组件 168.Vue3中的其他改变 1.全局API的转移 2.其他改变
【Vue】Vue2.0+Vue3.0学习笔记day14（Vue3）
weixin_58214412的博客
01-19 1020
目录 150.computed计算属性 151.watch监视ref定义的数据 152.watch监视reactive定义的数据 153.watch时value的问题 154.watchEffect函数 155.Vue3生命周期 156.自定义hook 157.toRef与toRefs 158.shallowReactive与shallowRef
【Vue】Vue2.0+Vue3.0学习笔记day05
weixin_58214412的博客
01-06 463
目录 038.收集表单数据 039.过滤器 040.v-text指令 041.v-html指令 042.v-cloak指令 043.v-once指令、 044.v-pre指令 045.自定义指令_函数式 046.自定义指令_对象式 047.自定义指令_总结 038.收集表单数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
前端面试八股文--Vue篇（持续更新）
weixin_47964837的博客
04-27 1万+
vue2与vue3的常考知识点
(flex布局)justify-content：space-around和space-between的区别
热门推荐
qq_41619567的博客
11-09 2万+
space-between space-around
vue3展示列表和加减求和
qq_50951790的博客
03-15 1836
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
Vue07 vue-resource 插槽 vuex工作原理 求和案例 vuex开发者工具 getters mapState 多组件共享数据 vuex模块化+namespaced
weixin_58562753的博客
03-16 1386
vue-resource 插槽 Vuex 求和案例 Vuex工作原理图 搭建Vuex环境 求和案例vuex vuex开发工具的使用 getters配置项 mapState与mapGetters mapActions与mapMutations 多组件共享数据 vuex模块化+namespaced
java基础学习2---运算符、this关键字
柒月
02-09 227
1、表达式 表达式由运算符合操作数组成。 如： 5 num a+b sum = a+b 2、运算符 2.1 算术运算符 主要用于进行基本的算术运算，如加法、减法、乘法、除法等。 2.2 赋值运算符 格式：变量 = 表达式； 如 int a = 12; //将12赋值给变量a 赋值运算符是从右往左运算的。 复合赋值运算符 2.3 关系运算符 用于判断两个数据的大小，比较的结果是一个...
解决display:flex属性 justify-content: space-between和space-around换行后的排版问题
tpwe的博客
06-03 3345
.box{ 　　display:flex; /*弹性盒子*/ 　　justify-content: space-between; /*两端对齐，子元素之间有间隙*/ 　　flex-flow: row wrap;/*子元素溢出父容器时换行*/ }
VUE-flex布局之flex-wrap换行（3）
LzzMandy的博客
06-10 9103
1、外部容器display：flex； 可以设置的6个属性，如下： flex-direction 元素排列方向 flex-direction: row || row-reverse || column || column-reverse 元素排列方向: (从左往右)默认 || (从右往左) || (从上往下...
vue3中toRef和toRefs的用法以及使用场景
涂涂
10-25 453
toRef。
vue如何让下拉框可以输入---查询下拉框内容
最新发布
qq_42666729的博客
10-28 305
使用filterable。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值