Vue-学习笔记-3

最新推荐文章于 2024-05-06 21:48:32 发布
最新推荐文章于 2024-05-06 21:48:32 发布
阅读量292 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pakho_lin/article/details/120176189
版权

文章目录

Vue

一、Mixin混入的基础语法

<script>
  // mixin 混入
  // 组件 data, methods 优先级高于 mixin data, methods 优先级
  // 生命周期函数，先执行 mixin 里面的，再执行组件里面的
  // 自定义的属性，组件种的属性优先级高于 mixin 属性的优先级
  const myMixin = {
    number: 1
  }

  const app = Vue.createApp({
    mixins: [myMixin],
    number: 2,
    template: `
      <div>
        <div>{{this.$options.number}}</div>
      </div>
    `
  });

  app.config.optionMergeStrategies.number = (mixinVal, appValue) => {
    return mixinVal || appValue;
  }

  const vm = app.mount('#root');
</script>

二、开发自定义指令

<script>
  // 自定义指令 directive

  const app = Vue.createApp({
    data() {
      return {
        distance: 110
      }
    },
    template: `
      <div>
        <div v-pos:right="distance" class="header">
          <input />
        </div>
      </div>
    `
  });

  app.directive('pos', (el, binding) => {
    el.style[binding.arg] = (binding.value + 'px');
  })

  const vm = app.mount('#root');
</script>

三、Teleport传送门功能

<style>
    .area {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 300px;
      background: green;
    }
    .mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #000;
      opacity: 0.5;
      color: #fff;
      font-size: 100px;
    }
  </style>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
  <div id="hello"></div>
</body>
<script>
  // teleport 传送门
  const app = Vue.createApp({
    data() {
      return {
        show: false,
        message: 'hello'
      }
    },
    methods: {
      handleBtnClick() {
        this.show = !this.show;
      }
    },
    template: `
      <div class="area">
        <button @click="handleBtnClick">按钮</button>
        <teleport to="#hello">
          <div class="mask" v-show="show">{{message}}</div>
        </teleport>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

四、render函数

<script>
  // render function
  // template -> render -> h -> 虚拟DOM（JS对象）-> 真实 DOM -> 展示到页面上
  const app = Vue.createApp({
    template: `
      <my-title :level="2">
        hello dell
      </my-title>
    `
  });

  app.component('my-title', {
    props: ['level'],
    render() {
      const { h } = Vue;
      return h('h' + this.level, {}, [
        this.$slots.default(),
        h('h4', {}, 'dell')
      ])
    }
  })

  const vm = app.mount('#root');
</script>

五、插件的定义和使用

<script>
  // plugin 插件, 也是把通用性的功能封装起来
  const myPlugin = {
    install(app, options) {
      app.provide('name', 'Dell Lee');
      app.directive('focus', {
        mounted(el) {
          el.focus();
        }
      })
      app.mixin({
        mounted(){
          console.log('mixin')
        }
      })
      app.config.globalProperties.$sayHello = 'hello world';
    }
  }

  const app = Vue.createApp({
    template: `
      <my-title />
    `
  });

  app.component('my-title', {
    inject: ['name'],
    mounted() {
      console.log(this.$sayHello);
    },
    template: `<div>{{name}}<input v-focus /></div>`
  })

  app.use(myPlugin, { name: 'dell'});

  const vm = app.mount('#root');
</script>

六、数据校验插件

<script>
  // 对数据做校验的插件
  const app = Vue.createApp({
    data() {
      return { name: 'dell', age: 23}
    },
    rules: {
      age: {
        validate: age => age > 25,
        message: 'too young, to simple'
      },
      name: {
        validate: name => name.length >= 4,
        message: 'name too short'
      }
    },
    template: `
      <div>name:{{name}}, age:{{age}}</div>
    `
  });

  const validatorPlugin = (app, options) => {
    app.mixin({
      created() {
        for(let key in this.$options.rules) {
          const item = this.$options.rules[key];
          this.$watch(key, (value) => {
            const result = item.validate(value);
            if(!result) console.log(item.message);
          })
        }
      }
    })
  }

  app.use(validatorPlugin);
  const vm = app.mount('#root');
</script>

七、Setup函数使用

<script>
  // 对数据做校验的插件
  const app = Vue.createApp({
    template: `
      <div @click="handleClick">{{name}}</div>
    `,
    methods: {
      test() {
        console.log(this.$options.setup());
      }
    },
    mounted() {
      this.test();
    },
    // created 实例被完全初始化之前
    setup(props, context) {
      return {
        name: 'dell',
        handleClick: () => {
          alert(123)
        }
      }
    }
  });
  const vm = app.mount('#root');
</script>

八、ref、reactive响应式引用的用法和原理、toRef以及context参数

<script>
  // ref, reactive 响应式的引用
  // 原理，通过 proxy 对数据进行封装，当数据变化时，触发模版等内容的更新
  // ref 处理基础类型的数据
  // reactive 处理非基础类型的数据
  const app = Vue.createApp({
    template: `
      <div>{{name}}</div>
    `,
    setup(props, context) {
      // const { ref } = Vue;
      // proxy , 'dell' 变成 proxy({value: 'dell'}) 这样的一个响应式引用
      // let name = ref('dell');
      // setTimeout(() => {
      //   name.value = 'lee'
      // }, 2000)
      // return { name }

      const { reactive, readonly, toRefs } = Vue;
       // proxy , { name: 'dell'} 变成 proxy({ name: 'dell'}) 这样的一个响应式引用
      const nameObj = reactive({name: 'dell', age: 28});
      setTimeout(() => {
        nameObj.name = 'lee'
      }, 2000)
      // toRefs proxy({ name: 'dell', age: 28}), { 
      //  name: proxy({ value: 'dell'}),
      //  age: proxy({value: 28})
      // }
      const { name, age } = toRefs(nameObj);
      return { name }
    }
  });
  const vm = app.mount('#root');
</script>

九、使用Composition API开发Todolist

<script>
  // 关于 list 操作的内容进行了封装
  const listRelativeEffect = () => {
    const { reactive } = Vue;
    const list = reactive([]);
    const addItemToList = (item) => {
      list.push(item);
    }
    return { list, addItemToList }
  }

  // 关于 inputValue 操作的内容进行了封装
  const inputRelativeEffect = () => {
    const { ref } = Vue;
    const inputValue = ref('');
    const handleInputValueChange = (e) => {
      inputValue.value = e.target.value
    }
    return { inputValue, handleInputValueChange}
  }

  const app = Vue.createApp({
    setup() {
      // 流程调度中转
      const { list, addItemToList } = listRelativeEffect();
      const { inputValue, handleInputValueChange} = inputRelativeEffect();
      return {
        list, addItemToList,
        inputValue, handleInputValueChange
      }
    },
    template: `
      <div>
        <div>
          <input :value="inputValue" @input="handleInputValueChange" />
          <button @click="() => addItemToList(inputValue)">提交</button>
        </div>
        <ul>
          <li v-for="(item, index) in list" :key="index">{{item}}</li>
        </ul>
      </div>
    `,
  });
  
  const vm = app.mount('#root');
</script>

十、computed方法生成计算属性

<script>
  // computed 计算属性
  const app = Vue.createApp({
    setup() {
      const { reactive, computed } = Vue;
      const countObj = reactive({ count: 0});
      const handleClick = () => {
        countObj.count += 1;
      }
      let countAddFive = computed({
        get: () => {
          return countObj.count + 5;
        },
        set: (param) => {
          countObj.count = param - 5;
        }
      })

      setTimeout(() => {
        countAddFive.value = 100;
      }, 3000)

      return { countObj, countAddFive, handleClick }
    },
    template: `
      <div>
        <span @click="handleClick">{{countObj.count}}</span> -- {{countAddFive}}
      </div>
    `,
  });
  
  const vm = app.mount('#root');
</script>

十一、watch 和 watchEffect 的使用和差异性

<script>
  // watch 侦听器
  // watchEffect 侦听器，偏向于 effect
  const app = Vue.createApp({
    setup() {
      const { reactive, watch, watchEffect, toRefs } = Vue;
      const nameObj = reactive({
        name: 'dell', englishName: 'lee'
      })
      // 具备一定的惰性 lazy
      // 参数可以拿到原始和当前值
      // 可以侦听多个数据的变化，用一个侦听器承载
      watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [prevName, preEng]) => {
        console.log('watch', curName, prevName, '---', curEng, preEng);
      }, { immediate: true })

      // 立即执行，没有惰性 immediate
      // 不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数
      // 不能获取之前数据的值
      // const stop = watchEffect(() => {
      //   console.log(nameObj.name);
      //   console.log(nameObj.englishName);
      //   setTimeout(() => {
      //     stop();
      //   }, 5000)
      // })

      const { name, englishName } = toRefs(nameObj);

      return { name, englishName }
    },
    template: `
      <div>
        <div>
          Name: <input v-model="name"> 
        </div>
        <div>
          Name is {{name}}
        </div>
        <div>
          EnglishName: <input v-model="englishName"> 
        </div>
        <div>
          EnglishName is {{englishName}}
        </div>
      </div>
    `,
  });
  
  const vm = app.mount('#root');
</script>

十二、生命周期函数的新写法

<script>

  const app = Vue.createApp({
    // beforeMount => onBeforeMount
    // mounted => onMounted
    // beforeUpdate => onBeforeUpdate
    // beforeUnmount => onBeforeUnmount
    // unmouted => onUnmounted
    setup() {
      const {
        ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated,
        onRenderTracked, onRenderTriggered
      } = Vue;
      const name = ref('dell')
      onBeforeMount(() => {
        console.log('onBeforeMount')
      })
      onMounted(() => {
        console.log('onMounted')
      })
      onBeforeUpdate(() => {
        console.log('onBeforeUpdate')
      })
      onUpdated(() => {
        console.log('onUpdated')
      })
      // 每次渲染后重新收集响应式依赖
      onRenderTracked(() => {
        console.log('onRenderTracked')
      })
      // 每次触发页面重新渲染时自动执行
      onRenderTriggered(() => {
        console.log('onRenderTriggered')
      })
      const handleClick = () => {
        name.value = 'lee'
      }
      return { name, handleClick }
    },
    template: `
      <div @click="handleClick">
        {{name}}
      </div>
    `,
  });
  
  const vm = app.mount('#root');
</script>

十三、Provide,Inject,模版 Ref 的用法

<script>
  // provide, inject
  // dom ref
  // const app = Vue.createApp({
  //   setup() {
  //     const { provide, ref, readonly } = Vue;
  //     const name = ref('dell');
  //     provide('name', readonly(name));
  //     provide('changeName', (value) => {
  //       name.value = value;
  //     });
  //     return { }
  //   },
  //   template: `
  //     <div>
  //       <child />
  //     </div>
  //   `,
  // });

  // app.component('child', {
  //   setup() {
  //     const { inject } = Vue;
  //     const name = inject('name');
  //     const changeName = inject('changeName');
  //     const handleClick = () => {
  //       changeName('lee');
  //     }
  //     return { name, handleClick }
  //   },
  //   template: '<div @click="handleClick">{{name}}</div>'
  // })

  // CompositionAPI 的语法下，获取真实的 DOM 元素节点
  const app = Vue.createApp({
    setup() {
      const { ref, onMounted } = Vue;
      const hello = ref(null);
      onMounted(() => {
        console.log(hello.value);
      })
      return { hello }
    },
    template: `
      <div>
        <div ref="hello">hello world</div>
      </div>
    `,
  });
  
  const vm = app.mount('#root');
</script>

十四、VueCLI 的使用和单文件组件

1.先安装node.js
2.node -v
3.安装npm、nrm、nrm ls
4.如果先前安装过脚手架，请先卸载再安装新的。
5.使用脚手架创建vue项目。
6.启动项目，浏览器查看端口。

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
// 单文件组件
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
}
</script>

<style>

</style>

man.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

HelloWorld.vue

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style>
</style>

十五、使用单文件组件编写 TodoList

Listitem.vue

<template>
  <li class="button">{{ msg }}</li>
</template>

<script>
export default {
  name: 'ListItem',
  props: {
    msg: String
  }
}
</script>

<style>
</style>

App.vue

<template>
  <div>
    <input v-model="inputValue" />
    <button class="button" @click="handleAddItem">提交</button>
  </div>
  <ul>
    <list-item
      v-for="(item, index) in list"
      :key="index"
      :msg="item"
    />
  </ul>
</template>

<script>
import { reactive, ref } from 'vue';
import ListItem from './components/ListItem';

export default {
  name: 'App',
  components: { ListItem },
  setup() {
    const inputValue = ref('');
    const list = reactive([]);

    const handleAddItem = () => {
      list.push(inputValue.value);
      inputValue.value = '';
    };
    return { handleAddItem, inputValue, list }
  }
}
</script>

<style>
  .button {
    margin-left: 20px;
    color: red;
  }
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

十六、Vue-Router 路由的理解和使用

index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/about',
    name: 'About',
    // 异步加载路由
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

App.vue

<template>
  <div id="nav">
    <!-- router-link 是跳转路由的标签 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/login">Login</router-link>
  </div>
  <!-- router-view 负责展示当前路由对应的组件内容 -->
  <router-view/>
</template>

<style></style>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 路由是指根据 url 的不同，展示不同的内容
createApp(App).use(router).mount('#app')

十七、VueX的语法

router/ index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

store/ index.js

import { createStore } from 'vuex'
// VueX 数据管理框架
// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: { name: 'dell' },
  // mutation 里面只允许写同步代码，不允许写异步代码
  // commit 和 mutation 做关联
  mutations: {
    change(state, str) {
      state.name = str;
    }
  },
  // dispatch 和 actions 做关联
  actions: {
    // change(store, str) {
    //   setTimeout(() => {
    //     store.commit('change', str)
    //   }, 2000)
    // }
  }
})

About.vue

<template>
  <div class="about">
    <h1 @click="handleClick">This is an about page</h1>
    <h1>{{myName}}</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
  computed: {
    myName() {
      return this.$store.state.name;
    }
  },
  methods: {
    handleClick() {
      // 1. dispatch 方法，派发一个 action，名字叫做change
      // 2. 感知到 change 这个action，执行store 中 actions 下面的 change 方法
      // 3. commit 提交一个叫做 change 的数据改变
      // 4. mutation 感知到提交的change改变，执行 change 方法改变数据
      this.$store.commit('change', 'hello world');
    }
  }
}
</script>

十八、CompositionAPI 中使用 VueX

store/ index.js

import { createStore } from 'vuex'
export default createStore({
  state: { name: 'dell' },
  mutations: {
    changeName(state, str) {
      state.name = str;
    }
  },
  actions: {
    getData(store) {
      setTimeout(() => {
        store.commit('changeName', 'hello')
      }, 2000)
    }
  }
})

About.vue

<template>
  <div class="about">
    <h1 @click="handleClick">This is an about page</h1>
    <h1>{{name}}</h1>
  </div>
</template>

<script>
import { toRefs } from 'vue';
import { useStore } from 'vuex';
export default {
  name: 'Home',
  setup() {
    const store = useStore();
    const { name } = toRefs(store.state);
    const handleClick = () => {
      store.dispatch('getData')
    }
    return { name, handleClick }
  }
}
</script>·

十九、使用axios发送ajax请求

index.js

import { createStore } from 'vuex'
import axios from 'axios';
export default createStore({
  state: { name: 'dell' },
  mutations: {
    changeName(state, str) {
      state.name = str;
    }
  },
  actions: {
    getData(store) {
      axios.post('https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/user/register')
      .then((response) => {
        const msg = response.data.message;
        store.commit('changeName', msg)
      })
    }
  }
})

About.vue

<template>
  <div class="about">
    <h1 @click="handleClick">This is an about page</h1>
    <h1>{{name}}</h1>
  </div>
</template>

<script>
// https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/user/register
import { toRefs } from 'vue';
import { useStore } from 'vuex';
export default {
  name: 'Home',
  setup() {
    const store = useStore();
    const { name } = toRefs(store.state);
    const handleClick = () => {
      store.dispatch('getData')
    }
    return { name, handleClick }
  }
}
</script>·
wuyi~lin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-router学习笔记
02-24
学习Vue的必备技能，必须熟练使用Vue-router，能够在实际项目中运用。VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化的、基于组件的路由配置；路由参数、查询、通配符；基于Vue.js过渡系统的视图过渡效果；细粒度的导航控制；带有自动激活的CSSclass的链接；HTML5历史模式或hash模式，在IE9中自动降级；自定义的滚动条行为。由前端来控制页面的跳转（但其实是个单页面），根据不同的url地址展示不同的内容和页面。优点：体验好，不需要每次从服务器获取全部，快速展现给用户；缺点：不
Vue3组件同步更新 update 方法 和Vue2.sync的用法
m0_59993469的博客
12-13 7782
有一篇文章我用到了这个update来向父组组件传参 那么这个是干啥的 ，其实通俗易懂一点 他就是用来同步更新父组件的值 不需要再用父组件来调用自定义事件 实例： vue3版本 <template> <div class=""> <p @click="open">请你点击</p> <zh-drag v-model:show="show" title="头部"> <template #center> 中
Vue3 中的 v-model 语法糖（三种写法）
nana18874597151的博客
01-17 837
Vue3 中的 v-model 默认解析为 :modelValue 和 @update:modelValue。通过v-model:count 解析成 count @update:count。Vue2 中的 v-model 默认解析为 :value 和 @input。
vue2 update的用法
qq_37304058的博客
02-06 459
sync="this$emitfalse。
Vue2.x中修改父组件数据的.sync替换为Vue3.x的@update
小火车况且况且况且的博客
04-26 1596
Vue2.x中修改父组件数据的.sync替换为Vue3.x的@update 官方地址 2.x语法 父组件 <!-- 标准写法: --> <ChildComponent :title="pageTitle" @change="pageTitle = $event" /> <!-- 是以下的简写: --> <ChildComponent :title.sync="pageTitle" /> export default { data() { retur
Vue知识点补充
qq_46035460的博客
12-16 180
1. .sync的用法 子组件中通过$emit里面的update把改变的数据发送出来，父组件可以接收到 close() { this.$emit('update:show', false); }, 父组件通过.sync来接收子组件传过来的数据,实时更新 <SelectProductPop :show.sync="pop.show" :title="pop.title" :type="pop.type" :product.
vue3子组件通过update事件修改父组件绑定的属性值，update:modelValue
vcdddd的博客
10-09 5528
vue3子组件通过update事件修改父组件绑定的属性值，update:modelValue注意事项
在Vue 3中，`@update:model-value`
m0_57537410的博客
01-25 1358
在子组件中，可以使用`$emit`方法触发一个自定义事件来更新父组件中的数据。在子组件中，我们使用`:value`绑定`modelValue`，并在`@input`事件中使用`$emit`方法触发`update:model-value`事件，并传递新的值。这样，当子组件中的输入框的值发生变化时，父组件中的`value`变量也会相应地更新。在Vue 3中，`@update:model-value`是一个自定义事件修饰符，用于在子组件中更新父组件中的`v-model`绑定的值。
update（十）
weixin_30542079的博客
08-14 379
Vue 的_update是实例的一个私有方法，它被调用的时机有 2 个，一个是首次渲染，一个是数据更新的时候；由于我们这一章节只分析首次渲染部分，数据更新部分会在之后分析响应式原理的时候涉及。_update方法的作用是把 VNode 渲染成真实的 DOM，它的定义在src/core/instance/lifecycle.js中： Vue.prototype._update ...
Vue自定义指令
Siobhan_Mxin的博客
09-07 2573
自定义指令v-focus光标聚焦、v-color指定文本颜色、v- fontSize指定字体大小
vue3 update:modelValue使用
热门推荐
淡淡的芦苇的博客
11-22 3万+
v-model中update:modelValue v-model的主要原因是由于value和input事件可能另有它用， 那么我们可不可以直接使用另外的属性和方法，而不需要去通过model进行定义。 vue3中就实现了这个功能，v-model绑定的不再是value，而是modelValue，接收的方法也不再是input，而是update:modelValue 写法： <ChildComponent v-model:title="title" /> //或者 <ChildCompone
JavaWeb03-Vue学习笔记
08-22
JavaWeb03-Vue学习笔记
vue 3 学习笔记 vue3 vue3学习笔记
10-18
vue 3 学习笔记
vue-notes:Vue学习笔记！
05-01
Vue 系列 学习笔记阅读目录Vue 双向绑定原理，浅析 MVVMVue 源码概要VueX 状态管理常用地址链接Vue 是一个开源框架，最新版本已经更新到了 3.0，当前系列基于 2.X（单独发文 3.0），是一个独立的 Javascript 框架，...
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 559
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 123
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 794
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue中的async
最新发布
三三木木七的博客
05-06 170
在使用 async 关键字声明的函数内部，可以使用 await 关键字来等待一个 Promise 对象解析。这样可以使代码更加清晰和易于理解，因为它们使异步代码看起来更像同步代码，避免了回调地狱。
小区服务|基于SprinBoot+vue的小区服务管理系统(源码+数据库+文档)
weixin_66413741的博客
05-01 1079
这次开发的小区服务管理系统对安保管理、安保分配管理、客服聊天管理、字典管理、房屋管理、反馈管理、论坛管理、公告管理、反馈处理管理、住户管理、员工管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识，加上自己在学校课堂上学习的知识，决定开发系统选择B/S模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问，采用的主流的Java语言这种面向对象的语言进行小区服务管理系统程序的开发，在数据库的选择上面，选择功能强大的Mysql数据库进行数据的存放操作。
django-vue-admin 学习笔记 自定义插槽tooltip字符数据显示
02-02
最近我在学习django-vue-admin时遇到了一个问题，就是关于自定义插槽tooltip字符数据显示的。在默认情况下，tooltip只能显示简单的数据，无法满足我对复杂数据的显示需求。经过查阅文档和实践，我成功解决了这个问题。 首先，我在vue-admin中找到了tooltip的配置文件，并使用了自定义插槽的方式对tooltip进行了定制。接着，我在django后端数据库中设计了一张新的表格，用来存储需要显示的复杂数据。然后，我通过vue-admin的请求功能，将数据从后端获取到前端，在自定义的插槽中对tooltip进行了渲染。我使用了一些vue的组件和方法，使得tooltip可以显示并格式化复杂的数据，比如表格、图表等。 经过一番努力，我成功实现了对tooltip字符数据的自定义显示。这个经验让我对django-vue-admin有了更深入的理解，并且对前后端数据交互有了更深刻的认识。我会继续学习和探索，希望能够在将来的开发中运用这些技术，为项目增添更多的灵活性和美观性。感谢django-vue-admin给我提供了这次学习的机会，我对它的功能和扩展能力有了更高的认知和期待。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值