代码编织梦想

vuex 有大的更新 vue2创建项目的时候 勾选上了vue默认版本 是"vue":“^3.4.0”
vue3 里面 得使用 4开头的版本 “vue”:“^4.0.0”

  1. 第一步: 创建一个store/index.js
    npm i vuex (或者创建vue项目的时候 勾选项 勾上 vuex)

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        // state 放需要管理的数据
        singerList:[
            {id:1,name:"周杰伦"},
            {id:2,name:"薛之谦"},
            {id:3,name:"陈奕迅"},
            {id:4,name:"孙燕姿"}
        ]
    },
    // 一般放函数
    actions:{},
    mutations:{}
})

然后呢 得在main.js里

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

走通一条线

PageA 中使用singerList这条数据


<template>
    <div id="pagear">
      <h3>歌手列表</h3>
      <ul>
          <li v-for="item in singerList" :key="item.id">
          <p>{{ item.name }}</p>
        </li>
      </ul>
   </div>
</template>
<script>

export default{
    name:"PageA",
   
    data(){
          return{
            singerList:[],
    }
    },


    methods:{
    
    
    },
  mounted(){
  console.log(this)
  this.singerList = this.$store.state.singerList
     },
}
</script>
<template>
    <div id="pagear">
      <h3>歌手列表</h3>
      <ul>
          <li v-for="item in singerList" :key="item.id">
          <p>{{ item.name }}</p>
        </li>
      </ul>
   </div>
</template>
<script>

export default{
    name:"PageA",
   
    methods:{
      
    
    },
    // 或者不在data数据中定义数组,直接用计算属性来接收
    computed:{
     singerList(){ 
    return this.$store.state.singerList 
      }
    }, 
  mounted(){
  console.log(this)
  this.singerList = this.$store.state.singerList
     },
}

</script>

获取state数据的方式2 mapState

<template>
    <div id="pagear">
      <h3>歌手列表</h3>
      <ul>
          <li v-for="item in singerList" :key="item.id">
          <p>{{ item.name }}</p>
        </li>
      </ul>
   </div>
</template>
<script>
import {mapState} from 'vuex'
export default{
    name:"PageA",
    
    computed:{


        如果我们要从state中  取十条数据
        如果没有  mapSate 那我们需要写  类似于  以下爱的十条  计算属性
    //  singerList(){ 
    //   return this.$store.state.singerList 
    //   }

     //  arr(){ 
    //   return this.$store.state.arr 
    //   }
    //  相当于上面的操作  相当于  拥有了singerList或者arr计算属性
    ...mapState(["singerList","arr"])  用在 computed内
    }, 
     使用了 mapState 只需要在数组中   添加数组项即可
}
</script>
如果我们不希望  同名  想要在组件内  自己定义数据名
不要用数组写法   用对象写法
...mapState({  list 是组件内的计算属性   singerList 是 state中的数据
    list:"singerList"
})
等价于下面的写法
list(){
   return this.$store.state.singerList  
}

mutations的知识点

 actions:{},
    mutations:{
//    真正去修改  state内数据的函数   一些多余的逻辑处理(校验 判断 请求数据  这些都不放在  mutation内)
  ADDFN(state,value){
    state.singerList.push(value)
  }

    }

触发AddFN函数的方式1

  methods:{
        addFn(){
            // this.$state.singerList.push({})

            // commit 调用mutations内的 ADDFN函数   后面传参
            this.$store.commit("ADDFN",{
                id:8,
                name:this.selectStr
            })

        }

    }

InputAdd

<template>
    <div class="inputadd">
        <select v-model="selectStr">
            <option value="李荣浩">李荣浩</option>
            <option value="林依晨">林依晨</option>
            <option value="陈奕迅">陈奕迅</option>
            <option value="毛不易">毛不易</option>
            <option value="邓紫棋">邓紫棋</option>
         
        </select>
        <button @click="addFn">添加一条</button>
    </div>
</template>
<script>
export default{
    name:"InputAdd",
    data(){
        return{
            selectStr:"李荣浩"
        }
    },
    methods:{
        addFn(){
            // this.$state.singerList.push({})

            // commit 调用mutations内的 ADDFN函数   后面传参
            this.$store.commit("ADDFN",{
                id:8,
                name:this.selectStr
            })

        }

    }

}


</script>

触发mutations内函数的方式2

ADDFN从mutations内导入到methods中  在组件内使用函数  只需要 this.函数名

  methods:{
   ...mapMutations(["ADDFN"]),
  addFn(){
    this.ADDFN({id:8,name:this.selectStr})
  }

    }

数组写法:
相当于 在组件内  用ADDFN变量名接收 mutations内的ADDFN函数
...mapMutations(["ADDFN"]),
对象写法: 在组件内  用ADDfn变量名 接收 mutations的ADDFN函数
...mapMutations({
    ADDfn:"ADDFN"
}),

InputAdd.vue

<template>
    <div class="inputadd">
        <select v-model="selectStr">
            <option value="李荣浩">李荣浩</option>
            <option value="林依晨">林依晨</option>
            <option value="陈奕迅">陈奕迅</option>
            <option value="毛不易">毛不易</option>
            <option value="邓紫棋">邓紫棋</option>
         
        </select>
        <button @click="addFn">添加一条</button>
    </div>
</template>
<script>
import {mapMutations} from "vuex"
export default{
    name:"InputAdd",
    data(){
        return{
            selectStr:"李荣浩"
        }
    },
    methods:{
        // addFn(){
        //     // this.$state.singerList.push({})

        //     // commit 调用mutations内的 ADDFN函数   后面传参
        //     this.$store.commit("ADDFN",{
        //         id:8,
        //         name:this.selectStr
        //     })

        // }
// 把ADDFN从mutations内导入到methods中  在组件内使用函数  只需要 this.函数名


   ...mapMutations(["ADDFN"]),
  addFn(){
    this.ADDFN({id:8,name:this.selectStr})
  }

    }

}


</script>

actions

  actions:{
        addAction(context,value){
            // 如果添加项  数组已经有了  那就  什么操作都不做
            // context  是  简单版的$store
            // console.log(context,value)
            console.log(value)

            // 如果return 内  返回true(value在数组项中存在) index 返回对应的索引值
            // 返回都是false  value在数组内不存在  返回 index = -1
            const index = context.state.singerList.findIndex((item =>{
                return item.name === value.name
            }))
            if(index>-1)  return 

            // 调用mutations内的函数
            context.commit("ADDFN",value)
        }


    },

actions触发方式1

  methods:{

       addFn(){
        // dispach函数触发  actions内的函数执行
        console.log(this.$store)
        this.$store.dispatch("addAction",{id:8,name:this.selectStr})
       }

actions触发方式2

数组写法

    ...mapActions(["addAction"]),
    addFn(){
        this.addAction({id:8,name:this.selectStr})
    }

对象写法
 ...mapActions({
  inputAddFn:"addAction"
 }),
    addFn(){
        this.inputAddFn({id:8,name:this.selectStr})
    }

index.js


import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)
console.log(Vuex)
export default new Vuex.Store({
    state:{
        // state 放需要管理的数据
        singerList:[
            {id:1,name:"周杰伦"},
            {id:2,name:"薛之谦"},
            {id:3,name:"陈奕迅"},
            {id:4,name:"孙燕姿"}
        ],
        arr:[
            1,2,3
        ]
    },
    // 一般放函数
    actions:{
        addAction(context,value){
            // 如果添加项  数组已经有了  那就  什么操作都不做
            // context  是  简单版的$store
            // console.log(context,value)
            console.log(value)

            // 如果return 内  返回true(value在数组项中存在) index 返回对应的索引值
            // 返回都是false  value在数组内不存在  返回 index = -1
            const index = context.state.singerList.findIndex((item =>{
                return item.name === value.name
            }))
            if(index>-1)  return 

            // 调用mutations内的函数
            context.commit("ADDFN",value)
        }


    },
    mutations:{
//    真正去修改  state内数据的函数   一些多余的逻辑处理(校验 判断 请求数据  这些都不放在  mutation内)
  ADDFN(state,value){
    state.singerList.push(value)
  }

    }
})

InputAdd.vue

<template>
    <div class="inputadd">
        <select v-model="selectStr">
            <option value="李荣浩">李荣浩</option>
            <option value="林依晨">林依晨</option>
            <option value="陈奕迅">陈奕迅</option>
            <option value="毛不易">毛不易</option>
            <option value="邓紫棋">邓紫棋</option>
         
        </select>
        <button @click="addFn">添加一条</button>
    </div>
</template>
<script>
import {mapActions} from "vuex"
export default{
    name:"InputAdd",
    data(){
        return{
            selectStr:"李荣浩"
        }
    },
    methods:{

    //    addFn(){
    //     // dispach函数触发  actions内的函数执行
    //     console.log(this.$store)
    //     this.$store.dispatch("addAction",{id:8,name:this.selectStr})
    //    }

    ...mapActions(["addAction"]),
    addFn(){
        this.addAction({id:8,name:this.selectStr})
    }


  }

    }

</script>

补充一下 context参数内 dispach用于触发actions内其他的函数

actions内的逻辑处理比较复杂 需要抽分出几个函数
删除一条的方法

  1. 方法一
<template>
    <div class="controlBtn">
        <button @click="deleteOne">删除一条</button>
    </div>
</template>
<script>
  export default{
    name:"ControlBtn",
    methods:{
      deleteOne(){
        this.$store.state.singerList.pop()
      }

    }


  }

</script>
  1. 方法二
    index.js
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)
console.log(Vuex)
export default new Vuex.Store({
    state:{
        // state 放需要管理的数据
        singerList:[
            {id:1,name:"周杰伦"},
            {id:2,name:"薛之谦"},
            {id:3,name:"陈奕迅"},
            {id:4,name:"孙燕姿"}
        ],
        arr:[
            1,2,3
        ]
    },
    // 一般放函数
    actions:{
        addAction(context,value){
            // 如果添加项  数组已经有了  那就  什么操作都不做
            // context  是  简单版的$store
            // console.log(context,value)
            console.log(value)

            // 如果return 内  返回true(value在数组项中存在) index 返回对应的索引值
            // 返回都是false  value在数组内不存在  返回 index = -1
            const index = context.state.singerList.findIndex((item =>{
                return item.name === value.name
            }))
            if(index>-1)  return 

            // 调用mutations内的函数
            context.commit("ADDFN",value)
        },
        


    },
    mutations:{
//    真正去修改  state内数据的函数   一些多余的逻辑处理(校验 判断 请求数据  这些都不放在  mutation内)
  ADDFN(state,value){
    state.singerList.push(value)
  },
  DELETEONE(state){
    state.singerList.pop()
  }

    }
})
ContolBtn.vue

``js
<template>
    <div class="controlBtn">
        <button @click="deleteOne">删除一条</button>
    </div>
</template>
<script>

  export default{
    name:"ControlBtn",
    methods:{
      deleteOne(){
        // this.$store.state.singerList.pop()
        this.$store.commit("DELETEONE")
      }

    }


  }

</script>

方法三:
index.js


import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)
console.log(Vuex)
export default new Vuex.Store({
    state:{
        // state 放需要管理的数据
        singerList:[
            {id:1,name:"周杰伦"},
            {id:2,name:"薛之谦"},
            {id:3,name:"陈奕迅"},
            {id:4,name:"孙燕姿"}
        ],
        arr:[
            1,2,3
        ]
    },
    // 一般放函数
    actions:{
        addAction(context,value){
            // 如果添加项  数组已经有了  那就  什么操作都不做
            // context  是  简单版的$store
            // console.log(context,value)
            console.log(value)

            // 如果return 内  返回true(value在数组项中存在) index 返回对应的索引值
            // 返回都是false  value在数组内不存在  返回 index = -1
            const index = context.state.singerList.findIndex((item =>{
                return item.name === value.name
            }))
            if(index>-1)  return 

            // 调用mutations内的函数
            context.commit("ADDFN",value)
        },
        deleteAction(context){
            if(context.state.singerList.length <= 1) return
              context.dispatch("moreAction")

        },
        moreAction(context){
            console.log("在这里处理了一些其他的事情");
            context.commit("DELETEONE")
        }


    },
    mutations:{
//    真正去修改  state内数据的函数   一些多余的逻辑处理(校验 判断 请求数据  这些都不放在  mutation内)
  ADDFN(state,value){
    state.singerList.push(value)
  },
  DELETEONE(state){
    state.singerList.pop()
  }

    }
})

ControlBtn.vue

<template>
    <div class="controlBtn">
        <button @click="deleteOne">删除一条</button>
    </div>
</template>
<script>

  export default{
    name:"ControlBtn",
    methods:{
      deleteOne(){
        // this.$store.state.singerList.pop()
        // this.$store.commit("DELETEONE")
        this.$store.dispatch("deleteAction")
      }

    }


  }

</script>

getter

当频繁要去获取state数据的内容,可以把当前的数据 处理为getter,去加工 state 内的数据 (不是去修改) 只是去获取(更加便捷)
需求:想要获取singerList的第一项

  1. {{ $store.state.singerList[0].name }}

<template>
    <div class="controlBtn">
        <button @click="deleteOne">删除一条</button>
      <p>{{ $store.state.singerList[0].name }}</p>
    </div>
</template>
<script>

  export default{
    name:"ControlBtn",
    methods:{
      deleteOne(){
        // this.$store.state.singerList.pop()
        // this.$store.commit("DELETEONE")
        this.$store.dispatch("deleteAction")
      }

    }


  }

</script>


 <p>{{ $store.getters.singerListFirstName }}</p>
getters:{
    singerListFirstName(state){
     
        return state.singerList[0].name
    }
}

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)
console.log(Vuex)
export default new Vuex.Store({
    state:{
        // state 放需要管理的数据
        singerList:[
            {id:1,name:"周杰伦"},
            {id:2,name:"薛之谦"},
            {id:3,name:"陈奕迅"},
            {id:4,name:"孙燕姿"}
        ],
        arr:[
            1,2,3
        ]
    },
    // 一般放函数
    actions:{
        addAction(context,value){
            // 如果添加项  数组已经有了  那就  什么操作都不做
            // context  是  简单版的$store
            // console.log(context,value)
            console.log(value)

            // 如果return 内  返回true(value在数组项中存在) index 返回对应的索引值
            // 返回都是false  value在数组内不存在  返回 index = -1
            const index = context.state.singerList.findIndex((item =>{
                return item.name === value.name
            }))
            if(index>-1)  return 

            // 调用mutations内的函数
            context.commit("ADDFN",value)
        },
        deleteAction(context){
            if(context.state.singerList.length <= 1) return
              context.dispatch("moreAction")

        },
        moreAction(context){
            console.log("在这里处理了一些其他的事情");
            context.commit("DELETEONE")
        },

    },
    mutations:{
//    真正去修改  state内数据的函数   一些多余的逻辑处理(校验 判断 请求数据  这些都不放在  mutation内)
  ADDFN(state,value){
    state.singerList.push(value)
  },
  DELETEONE(state){
    state.singerList.pop()
  }

    },

    getters:{
        singerListFirstName(state){
         
            return state.singerList[0].name
        }
    }
})

其他获取方式

import {mapActions} from "vuex"
   conputed:{
          ...mapGetters(["singerListFirstName"]),
        
   
    },

从这里开始报错…

新增一条songList 数据 新增多条数据导致 {} 内 actions mutations内的函数 变的 不好维护

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //state 放需要管理的数据 
    singerList: [
      { id: 1, name: "薛之谦" },
      { id: 2, name: "周杰伦" },
      { id: 3, name: "陈奕迅" },
      { id: 4, name: "孙燕姿" },
    ],
    songList: [
      { name: "动物世界" },
      { name: "布拉格广场" },
      { name: "隐形的翅膀" },
    ],

  },
  actions: {
    addAction(context, value) {
      const index = context.state.singerList.findIndex((item) => {
        return item.name === value.name
      })
      if (index > -1) return

      // 调用 mutations内的函数 
      context.commit('ADDFN', value)
    },
    deleteAction(context) {
      if (context.state.singerList.length <= 1) return
      context.dispatch('moreAction')
    },
    moreAction(context) {
      console.log('在这里处理了一些其他的事情');
      context.commit('DELETEONE')
    },
    // 操作songList
    addSongAction(context, value) {
      const index = context.state.songList.findIndex((item) => {
        return item.name === value.name
      })
      if (index > -1) return

      // 调用 mutations内的函数 
      context.commit('ADDSONG', value)
    },
  },
  mutations: {
    //操作singerList
    ADDFN(state, value) {
      state.singerList.push(value)
    },
    // 操作songList
    ADDSONG(state, value) {
      state.songList.push(value)
    },
    DELETEONE(state, value) {
      state.singerList.pop()
    }
  },
  getters: {
    singerListFirstName(state) {
      return state.singerList[0].name
    },
    currentSong() {
      return playList[index]
    }
  }

})


pageB 
<template>
  <div class="pageb">
    <h3>歌曲列表</h3>
    <ul>
      <li v-for="item in songList">
        <p>{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "PageB",
  computed: {
    ...mapState(["songList"]),
  },
};
</script>


inputAdd
<template>
  <div class="inputadd">
    <select v-model="selectStr">
      <option value="李荣浩">李荣浩</option>
      <option value="林依晨">林依晨</option>
      <option value="陈奕迅">陈奕迅</option>
      <option value="毛不易">毛不易</option>
      <option value="邓紫棋">邓紫棋</option>
    </select>
    <button @click="addFn">添加一条</button>
    <hr />
    <select v-model="selectV">
      <option value="遇见">遇见</option>
      <option value="一路生花">一路生花</option>
      <option value="李白">李白</option>
      <option value="偏爱">偏爱</option>
      <option value="平凡之路">平凡之路</option>
    </select>
    <button @click="addSongItem">添加一条</button>
  </div>
</template>
<script>
import { mapMutations, mapActions } from "vuex";
export default {
  name: "InputAdd",
  data() {
    return {
      selectStr: "李荣浩",
      selectV: "遇见",
    };
  },
  methods: {
    addFn() {
      this.addAction({ id: 8, name: this.selectStr });
    },
    addSongItem() {
      //触发 actions内的
      this.addSongAction({ name: this.selectV });
    },
    ...mapActions(["addAction", "addSongAction"]),
  },
};
</script>

modules 模块化处理

songlist.js

export default {
    namespaced: true, //开启命名空间 
  state: {
    songList: [
      { name: "动物世界" },
      { name: "布拉格广场" },
      { name: "隐形的翅膀" },
    ],
  },
  actions: {
    // 操作songList
    addSongAction(context, value) {
      const index = context.state.songList.findIndex((item) => {
        return item.name === value.name
      })
      if (index > -1) return

      // 调用 mutations内的函数 
      context.commit('ADDSONG', value)
    },
  },
  mutations: {
    ADDSONG(state, value) {
      state.songList.push(value)
    },
  }
}

singerlist.js

export default {
    namespaced: true,
  state: {
    singerList: [
      { id: 1, name: "薛之谦" },
      { id: 2, name: "周杰伦" },
      { id: 3, name: "陈奕迅" },
      { id: 4, name: "孙燕姿" },
    ],
  },
  actions: {
    addAction(context, value) {
      const index = context.state.singerList.findIndex((item) => {
        return item.name === value.name
      })
      if (index > -1) return
      context.commit('ADDFN', value)
    },
    deleteAction(context) {
      if (context.state.singerList.length <= 1) return
      context.commit('DELETEONE')
    },

  },
  mutations: {
    //操作singerList
    ADDFN(state, value) {
      state.singerList.push(value)
    },
    DELETEONE(state, value) {
      state.singerList.pop()
    }
  }
}

index.js

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

import singerListModule from './singerList'
import songListModule from './songList'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    singerListModule,
    songListModule
  }
})
state内数据的获取
state: Object
singerListModule: (…)
songListModule: (…) 

console.log(this.$store.state.singerListModule.singerList);

用 mapState的方式 
computed: {
    ...mapState("singerListModule", ["singerList"]),
  },
      

getters内的数据的获取
普通获取
console.log(this.$store.getters["singerListModule/singerListFirstName"]);

mapGetters获取
...mapGetters("singerListModule", ["singerListFirstName"]),
    
actions内的数据的获取
普通调用
this.$store.dispatch("songListModule/addSongAction", {
        name: this.selectV,
      });

   ...mapActions("singerListModule", ["addAction"]),
    ...mapActions("songListModule", ["addSongAction"]),
mutations内的数据的获取
 this.$store.commit('singerListModule/DELETEONE')

...mapMutations("singerListModule", ["DELETEONE"]),

动态组件

<template>
  <div id="app">
    <component :is="componentId"></component>
    <button @click="bool = !bool">修改bool</button>
  </div>
</template>
<script>
import Song from "@/components/song.vue";
import Singer from "@/components/singer.vue";
export default {
  name: "App",
  data() {
    return {
      bool: true,
    };
  },
  computed: {
    componentId() {
      return this.bool ? "Singer" : "Song";
    },
  },
  components: { Song, Singer },
};
</script>

缓存动态组件

 <!-- 默认缓存所有的动态组件  -->
    <keep-alive>
      <component :is="componentId"></component>
    </keep-alive>


只缓存 Song 组件  
<keep-alive include="Song"> //值是 组件name 
      <component :is="componentId"></component>
    </keep-alive>


<!-- 不缓存Song的组件  -->
    <keep-alive exclude="Song">
      <component :is="componentId"></component>
    </keep-alive>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_57858263/article/details/130882078

vue基础知识一:说说你对vue的理解?-爱代码爱编程

一、从历史说起 Web是World Wide Web的简称,中文译为万维网 我们可以将它规划成如下的几个时代来进行理解 石器时代 文明时代 工业革命时代 百花齐放时代 石器时代 石器时代指的就是我们的静态网

vue 级联组件添加按钮并添加点击事件加传参-爱代码爱编程

我这里采用的是jq+vue实现的此功能,首先是要把按钮追加进去,当然头开始写真实dom会导致页面上也追加显示,但是我想实现的是在级联组件上追加所以,选择创建虚拟dom,然后传参这点实在是研究试错了半天,最后选择使用级联组件的

vue基础入门-爱代码爱编程

目录 一、Vue简介 1.1MVVM 二、Vue入门 2.1在页面引入vue的js文件 2.2 在页面中绑定vue元素 2.3 创建vue对象,设计对象的内容 2.4 在页面的元素中使用插值表达式来使用vue对象中的内容 插值表达式的作用是在View中获得Model中的内容 2.5 Vue的循环 v-for 2.5.1 带着索引的f

5.22作业-爱代码爱编程

1.ref作用:         放到 dom 节点上 >> 获取原生 dom         组件身上 >> 获取组件实例 >> 可以获取组件内部所有的方法和数据 2. vue组件通信?         父传子                 在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过

excel操作图表制作地图-爱代码爱编程

私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图! 系列文章目录 前端系列文章——传送

一、尚医通平台前端搭建-爱代码爱编程

文章目录 一、尚医通平台前端搭建1、服务端渲染技术NUXT 二、首页实现1、公共处理1.1添加静态资源1.2 定义布局1.2.1 修改默认布局1.2.2 提取头文件1.2.3 提取尾文件1.2.4 默认布

css获取vue组件 props-爱代码爱编程

一、在 CSS 中,无法直接获取 Vue 组件的 props 值。CSS 是用于描述样式的语言,而 Vue 组件的 props 是在 JavaScript/TypeScript 中进行处理和传递的。CSS 无法直接访问组件的 props。 如果你需要在 CSS 中使用组件的 props 值,你可以通过将 props 值应用于组件的样式类名或内联样式来间接

15 个非常流行的vscode插件,让你的编码效率倍增!-爱代码爱编程

VS Code已经成为了最受欢迎的代码编辑器之一。 它的简洁性、易用性和可扩展性使得它成为了许多开发者的首选。 而在VS Code中,插件是其最大的卖点之一。 通过安装插件,你可以将VS Code打造成一个功能强大

一款好看的markdown编辑器:md-editor-v3-爱代码爱编程

文章目录 md-eidtor-v3地址其它markdown编辑器🎄 md-editor-v3⭐️ 功能一览📦 安装💡 用法✍🏻 编辑器模式📖 仅预览模式 🗺 预览图🎁 Apis🔖 MdPreivew P

vite的使用-爱代码爱编程

私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图! 系列文章目录 前端系列文章——传送

打包和优化-爱代码爱编程

私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图! 系列文章目录 前端系列文章——传送

基于geotoolkit/int实现二维等值线图绘制示例-爱代码爱编程

       继续在上一篇文章的基础上,利用相同的数据处理方法统一了地层数据和断层数据格式,本文主要基于GeoToolkit/INT组件,针对地质专业经常用到的地层数据解析和二维等值线(等高或等深线)可视化需求,本示例实现了不同地质年代地层的三种类型快速可视化,详细效果如下。 本篇主要阐述地质研究形成的地层数据解析与可视化交互显示,包括前端、后端设计等内

如何使用vue的计算属性来处理数据计算?-爱代码爱编程

计算属性是Vue.js中非常强大的功能,它可以帮助我们轻松地处理数据计算和管理数据。 先说个段子:有一天,一个新手问一个Vue大师,“大师,我的数据计算和管理怎么那么麻烦?”,大师回答:“你还没学会使用计算属性吧?”,新手

element-ui对话框dialog详解-爱代码爱编程

效果展示 先给大家展示一下大致的样式   代码 <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加用户" width="35%" center> <el-form :inline="true" :model="

java(springboot+ssm)/python/php/nodejs/基于vue的景区门票预约管理系统-爱代码爱编程

后端:java(springboot+ssm)/python/php/nodejs/ 开发运行:微信开发者/hbuilderx 后端:idea/eclipse/vscode/pycharm 模块划分:公告类型、公告信息、用户信息、用户咨询、地区信息、景区信息、景区开放、景区预约、统计信息  本技术是Java平台的开源应用框架,其目的是简化Sping的初始搭

前端学习-爱代码爱编程

一、组件的生命周期 一个组件从创建-运行-销毁的真个阶段,强调的是一个时间段 1.1 生命周期函数  1.1.1 创建 (只执行一次) created() 阶段任务:最早可以使用methods中的方法发起ajax请求获取数据,并将数据挂载到data中 mounted() 阶段任务:最早可以操作dom元素 1.1.2 运行 (最少