01 2025 档案
摘要：1、创建环境 conda create -n 环境名 python=版本 2、切换环境 conda activate 环境名 3、导入 pip install -r requirements.txt 4、生成 pip freeze > requirements.txt
阅读全文
摘要：实用 # 配置文件 .DS_Store .idea/ # 编译文件 __pycache__/ *.py[cod] *$py.class # Django 项目中的日志文件和本地配置文件 *.log local_settings.py db.sqlite3 db.sqlite3-journal # 虚
阅读全文
摘要：生成x-y Math.round(Math.random()*(y-x)+x)
阅读全文
摘要：1、安装nvm控制node版本 2、下载安装nvm https://nvm.uihtm.com/ 3、清缓存，删依赖，重新下载 npm cache clean --force rm -rf node_modules rm package-lock.json npm install
阅读全文
摘要：1、全局api Vue.config.xxx app.config.xxx Vue.component app.component Vue.directive app.directive Vue.mixin app.mixin Vue.use app.use Vue.prototype app.co
阅读全文
摘要：1、异步引入组件 import { defineAsyncComponent } from 'vue'; const ChildData = defineAsyncComponent(() => import('./components/ChildData.vue')) 2、使用Suspense包裹
阅读全文
摘要：Teleport是一种能够将组件html结构移动到指定位置的技术 <template> <div> <button @click="isShow = true">弹窗</button> <Teleport v-if="isShow" to="body"> <div class="dialog"> <
阅读全文
摘要：1、isRef 2、isReactive 3、isReadonly 4、isProxy：检查一个对象是否由reactive或readonly方法创建代理
阅读全文
摘要：一、作用 祖孙组件实现通信 二、过程 父组件 provide()提供数据，后代组件inject()选项，开始使用这些数据 三、语法 1、祖组件 setup() { let car = reactive({ name: 'su7', print:30 }) provide('car',car) ret
阅读全文
摘要：自定义ref <template> <input type="text" v-model="msg"> <h2>{{ msg }}</h2> </template> <script> import { customRef, ref } from 'vue'; export default { nam
阅读全文
摘要：1、markRaw函数 作用：标记一个对象，使其永远不会成为响应式对象 应用场景： 有些值不值得被设置成响应式的。比如第三方库 当渲染具有不可变数据的大列表时，跳过响应式转换可以提高性能 2、toRaw函数 作用：把reactive响应式对象，变成普通对象 使用场景：用于读取响应式对象对应的普通对象
阅读全文
摘要：1、readyonly：把响应式数据变成只读，深层次 2、shallowReadyonly：把响应式数据变成只读，浅层次 应用场景：不希望数据被修改
阅读全文
摘要：1、概念 轻量化的ref函数和reactive函数，只能进行一层响应式 2、对比 a、shallowRef和ref ref响应式的，可以是基本数据类型和对象，当是对象时，ref会借助reactive生产proxy，实现数据响应式 shallowRef，只能对基本数据类型进行响应式处理 b、shall
阅读全文
摘要：一、作用 简化模板{{xx}}，xx的长度 二、toRef 1、语法 toRef(对象,属性) 2、案例 <template> <h2>姓名：{{ name }}</h2> <h2>年龄：{{ age }}</h2> <h2>工资:{{ salary }}</h2> <button @click="
阅读全文
摘要：1、优点 代码功能模块化，复用代码 2、建立 新建hooks文件夹，在src下 src/hooks/use功能.js 3、案例 a、模块化 src/hooks/usepoint.js import { reactive, onMounted, onBeforeUnmount} from 'vue';
阅读全文
摘要：vue.config.js const { defineConfig } = require('@vue/cli-service') const {DefinePlugin} = require('webpack') module.exports = defineConfig({ transpile
阅读全文
摘要：一、引入 ，写在setup里面 import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'; 二、与Vue2的关系 setup() > beforecrea
阅读全文
摘要：1、watch：既要指明监视的属性，也要指明监视的回调 2、watchEffect：不要指明监视的属性，监视的回调用哪个属性，就监视哪个属性 3、语法 a、引入 import { watchEffect } from 'vue'; b、使用 // 不用指明监视属性，监视回调中使用的属性 watchE
阅读全文
摘要：一、引入 import {reactive, watch } from 'vue' 二、注意 1、监视reactive定义的响应式对象时，oldval无法正确获取，强制开启深度监视，无法关闭 2、监视reactive对象的某个属性时，deep有效(属性为对象)，属性为字符串或数字 oldvalue可
阅读全文
摘要：1、引用 import {ref, watch } from 'vue' 2、监视两种方法，属性ref，immediate deep可以直接写，比vue2简单 a、监听一个 // 第一种写法，监视 一个 immediate deep watch(num, (newVal, oldVal) => {
阅读全文
摘要：一、与vue2的computed配置功能一致 二、用法 1、引入 import {computed } from 'vue'; 2、计算属性简写(get) setup(props, context){ let fullNmae = computed(() => { return person.fir
阅读全文
摘要：一、执行时机 在beforecreate生命周期函数前执行一次，且this为undefined 二、setup参数 1、props：值为对象，组件外部传递过来，且组件内部通过props:[]接受的值 a、外部组件传递 <Demon msg="Hello" :num="10"/> b、且内部组件接受
阅读全文
摘要：1、通过Proxy(代理)：拦截对象中任意属性变化，包括：属性的读写、添加、删除 2、通过Reflect(反射)：对被代理的属性进行操作 <script type="text/javascript"> new Proxy(data, { // 读书属性 get(target, prop){ retu
阅读全文
摘要：1、作用 定义一个对象的响应式数据(基本类型不用它，用ref) 2、使用 a、引入 import { reactive } from 'vue'; b、语法 const 代理对象= recative(源对象) 源对象可以是数组或对象，返回Proxy对象的实例对象 3、reactive定义的响应式是深
阅读全文
摘要：1、作用：定义响应式数据 2、语法 a、引用 import { ref } from 'vue'; b、创建 创建一个包含响应式数据的引用对象 let xx= ref(数据) c、JS操作 xx.value d、模板操作 {{xx}} 3、注意 数据可以是：基本类型，也可以是对象类型 基本类型需要.
阅读全文
摘要：1、setup是一个函数，注意有返回值 2、组件中所用到的：数据、方法等，均要配置在setup中 3、setup函数返回值(两种) a、返回对象，则对象中的属性、方法等在模板中可以直接使用 案例 <template> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2>
阅读全文
摘要：一、脚手架创建 vue create 项目名 二、vite创建 # 创建工程 npm init vite-app <project-name> cd <project-name> # 安装依赖 npm install # 运行 npm run dev
阅读全文
摘要：一、移动端 1、nutui 2、Vant 3、Cube UI 4、Mint UI 二、PC端 1、Element UI https://element.eleme.cn/#/zh-CN 2、IView UI 3、Ant Design of Vue 三、Element UI 1、全局引入 2、按需引入
阅读全文
摘要：一、概念 1、对与url来说 # 后面的内容就是hash值 2、hash值不包含在http请求中，即：hsah值不会带给服务器 3、hash模式 a、地址不美观带有# b、地址可能会被校验不合法 c、兼容性好 4、histroy模式 a、地址干净、整洁 b、兼容性比hash模式差 c、部署需要解决服
阅读全文
摘要：1、顺序 2、位置 组件内部 3、语法 beforeRouteEnter 通过路由规则，进入该组件时被调佣 beforeRouteLeave通过路由规则，离开该组件时被调用 注意：通过组件引入不被调用 beforeRouteEnter (to, from, next) { // ... consol
阅读全文
摘要：1、位置 src/router/index.js 写在路由中 2、顺序 在全局 前置守卫 执行后执行 2、语法 { path:'news', component: NewsData, meta:{isAuth:true, title:'新闻'}, beforeEnter: (to, from, ne
阅读全文
摘要：一、位置 src/router/index.js const router = new VueRouter({ routes:[ ] }) // 这个地方写全局前置路由守卫或 全局后置路由守卫 export default router 一、全局前置路由守卫 1、时间：初始化时被调用，每次切换前被调
阅读全文
摘要：1、作用 路由独有的两个生命周期函数，用于捕获路由组件的激活状态，激活路由调用 2、功能, 只有 组件被 keep-alive 包裹时才能生效 activated路由组件被激活时调用 activated(){} deactivated路由组件失活时调用 deactivated(){}
阅读全文
摘要：路由切换，组件自动销毁，想要保留A组件的数据，需要确认A组件路由所在的组件，在该组件中包<router-view> <keep-alive include="NewsData"> <router-view></router-view> </keep-alive> include=组件名称 不写inc
阅读全文
摘要：一、作用 不借助<router-link>实现路由跳转 二、路由 (push replace) 借助 $router 的push(保存浏览记录) 和replace(替换浏览记录) 与 query和params对象传参类似 1、push 触发 <button @click="pushShow(m)">
阅读全文
摘要：1、作用 控制路由跳转时操作浏览器历史记录的模式 2、两种 push：追加历史记录 replace：替换历史记录 默认为 push 3、设置 添加 replace 属性 <router-link replace class="list-group-item" active-class="active
阅读全文
摘要：1、作用 让路由组件便于接受参数 2、写法(三种) src/router/index.js a、简单 值为对象，通过props传递给组件，组件需要接受 { name:'detail', // params参数 需要占位符 path:'detail/:id/:title', component: De
阅读全文
摘要：一、传递参数 1、路由(占位符) src/router/index.js children:[ { name:'detail', // params参数 需要占位符 path:'detail/:id/:title', component: DetailData }, ] 2、传递(对象) 注意：pa
阅读全文
摘要：1、作用 简化多级路由 2、设置 src/router/index.js 在路由中添加 name 关键字 children:[ { name:'detail', path:'detail', component: DetailData }, ] 3、使用，配合传递参数，或者单个name关键字 to要
阅读全文
摘要：一、传递参数 1、固定参数 <router-link to="/home/message/detail?name=jojo&age=8">{{ m.title }}</router-link> 2、变化参数(对象写法) 关键字：path 路径(完整)，query: 对象 <router-link :
阅读全文
摘要：一、配置路由 关键字 children 注意 子路由 path 不加斜杠 src/router/index.js export default new VueRouter({ routes:[ { // path 是路径，component是组件 path: '/about', component:
阅读全文
摘要：1、安装vue-router //Vue2 npm i vue-router@3 //vue3 npm i vue-router 2、使用VueRouter main.js // 引入VueRouter import VueRouter from "vue-router"; //使用 Vue.use
阅读全文
摘要：1、在pbulic文件夹中创建css文件夹，并存入bootstrap.css文件 2、在index.html文件中引入 <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
阅读全文
摘要：1、创建Js文件 每个组件单独一个js文件，在src/sore中 2、每个组件文件中，默认暴露，actions mutations state gettters namespaced：true export default { namespaced: true, actions:{}, mutati
阅读全文
摘要：1、actions addPersonApi(context){ axios.get('https://random-data-api.com/api/name/random_name').then( response=>{ context.commit('ADD_PERSON', {id:nano
阅读全文
摘要：一、模块化 1、几个组件定义几个对象 文件 src/store/index.js // 与count组件相关的optinos const countOptions = { actions:{}, mutations:{}, state:{}, getters:{} } // 与person组件 相关
阅读全文
摘要：1、安装 npm i nanoid 2、引入 import {nanoid} from 'nanoid' 3、使用 nanoid()
阅读全文
摘要：一、mapMutations 1、作用：帮助我们生成与mutations对话的方法，即包含 $store.commit() 2、步骤 a、引入 import {mapActions, mapMutations} from 'vuex' b、语法 methods:{ // mapMutations生成
阅读全文
摘要：一、作用 生成计算属性，简化模版{{xx}}xx的写法，原因xx在vuex中写法麻烦$store.state.x或$store.getters.x 二、步骤 1、引入 import {mapState, mapGetters} from 'vuex' 2、语法 computed:{ // 借助 ma
阅读全文
摘要：1、当state中的数据需要加工使用时，可以使用getters加工 2、在sindex.js中追加getters配置，注意别忘记创建和暴露 //准备state对象--保存具体数据 const state = { sum:0 } // 对state中的数据进行加工处理 const getters =
阅读全文
摘要：1、index.js import Vue from "vue"; import Vuex from "vuex" // 使用Vuex Vue.use(Vuex) // 准备actions对象--响应组件中的动作 const actions = { addOdd(context, value){ i
阅读全文
摘要：一、下载vuex 注意版本 vue2对应 npm i vuex@3 vue3对应 npm i vuex@4 二、创建文件 src/store/index.html import Vue from "vue"; import Vuex from "vuex" // 使用Vuex Vue.use(Vue
阅读全文
摘要：一、作用 父组件可以向子组件指定位置插入html结构，也是一种通信方式，适用于 父组件=>子组件 二、分类 默认插槽、具名插槽(有具体名字的插槽)、作用域插槽 三、使用方式 1、默认插槽 父组件 <Category title="美食" > <ul> <li v-for="data,index in
阅读全文
摘要：一、配置文件 vue.config.js devServer: { proxy: { '/api': { // 获取数据的接口 target: 'http://127.0.0.1:8000', // 特别重要 pathRewrite:{'^/api':''}, ws: true, changeOri
阅读全文
摘要：settings文件 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), # 添加此项 ]
阅读全文
摘要：一、修改配置文件 通过 vue.config.js 中的 devServer.proxy 配置代理 // 配置代理 proxy 指向后端API服务器 devServer: { proxy: 'http://127.0.0.1:8000' } 二、使用axios 1、下载 npm install ax
阅读全文
摘要：一、作用 在插入、更新或移除DOM元素时 在合适的时候给元素提那家样式类名 二、写法 1、准备好样式 元素进入的样式： a、v-enter:进入起点 b、v-enter-avctive:进入过程中 c、v-enter-to:进入终点 元素远离样式： a、v-leave:离开的起点 b、v-leave
阅读全文
摘要：一、watch 作用：对数据进行监听，数据发生变化时执行 二、nextTick 作用：数据修改后，DOM更新完毕后，执行里面的内容，可以和swiper插件配合使用 三、案例 watch:{ // 1、监听数据发生变化, bannerList存储 图片数据 bannerList:{ handler(n
阅读全文
摘要：一、作用 任意组件间通讯 二、使用 1、安装pubsub npm install pubsub-js 2、引入 import pubsub from 'pubsub-js' 3、接受数据(订阅) a、引入 import pubsub from 'pubsub-js' b、回调方法 methods:
阅读全文
摘要：一、优点 任意组件间通讯 二、安装全局事件总线 mian.js，使用生命周期钩子beforeCreate new Vue({ el:'#app', render: h => h(App), // 生命周期钩子 beforeCreate() { Vue.prototype.$bus = this },
阅读全文
摘要：一、proprs 父组件定义方法->传给子组件(子组件props接收)->子组件通过触发事件给父组件传递的方法赋值->父组件的方法获得值 父组件定义方法 methods: { getSchoodata(value){ this.crossData = value } }, 父组件(定义方法)传递给子
阅读全文
摘要：一、概念 浏览器端通过sessionstorage和localstorage属性来实现本地存储 二、相关API // 设置，key value，key若存在，则则更新value，value为字符串，需要使用JSON localStorage.setItem('msg', 'Hello') sessi
阅读全文
摘要：在Django 项目的__init__.py文件中 import pymysql # 添加版本信息 pymysql.install_as_MySQLdb() pymysql.version_info=(1, 4, 3, 'final', 0) pymysql.install_as_MySQLdb()
阅读全文
摘要：一、第一次使用conda环境 二、添加conda虚拟环境
阅读全文
摘要：1、作用：让样式在局部(组件)生效，防止样式冲突 2、使用 在除App组件外的样式中添加scoped <style scoped> </style>
阅读全文
摘要：1、功能 增加Vue 2、创建插件(plugins.js)文件 a,b为其它参数 export default { install(Vue，a, b){ // 全局混入 Vue.mixin({ data() { return { x: 100, y: 99 } }, }) // 全局过滤器 Vue.
阅读全文
摘要：1、功能 可以把多个组件共用的配置提取成一个混入对象 2、使用方式 a、创建混入(mixin.js文件) import { computed } from "vue" export const mixin = { methods: { showName(){ alert(this.name) } }
阅读全文
摘要：一、作用 接收数据(父组件传输) 二、语法 1、传递数据 <Demo name="jojo" sex="male" :age="30"/> 注意：传递Number数据类型，需要数据绑定(数据绑定计算引号中的值) 2、接收数据 a、简单接收数据 props:['name', 'sex', 'age']
阅读全文
摘要：1、被用来给元素或子组件引入信息 2、元素获取真实DOM，子组件获取子组件的 组件实例化对象 VueComponents 3、使用方法 打标识 ref='"名字" <div> <h2 ref="title">{{info}}</h2> <button ref="btn" @click="showIn
阅读全文
摘要：一、官网 https://cli.vuejs.org/zh/config/ 二、配置 1、打开vue.config.js文件，脚手架自带 2、添加 lintOnSave: false 三、查看脚手架默认配置 vue inspect > output.js
阅读全文
摘要：1、vue.js与vue.runtime.xxx.js的区别 a、vue.js是完整版的Vue，包含：核心功能和模板解析器。 b、vue.runtime.xx.js是运行版的vue。只包含核心功能，没有模板解析器 2、因为rvue.runtime.xxx.js没有模板解析器，所以不能使用templa
阅读全文
摘要：1、以管理员的权限打卡 PowerShell 2、设置 Get-ExecutionPolicy // 选择 y Set-ExecutionPolicy RemoteSigned 如果还不行，输入以下内容，并找到占用的文件，并删除 get-command npm 3、重启vscode
阅读全文
摘要：官网： https://cli.vuejs.org/zh/ 一、安装脚手架 npm install -g @vue/cli 注意：安装过程有警告，安装完后，关闭窗口，重新打开cmd，输入vue，没有报错 二、切换到创建文件的目录，然后使用命令创建 vue create vue_test 耐心等待 三
阅读全文
摘要：一、安装 1、下载 https://nodejs.org/en/download/ 2、安装 3、测试 打开cmd 查看node 和npm 版本 node -v npm -v 二、环境配置 1、找到安装目录，新建 node_cache 和 node_global文件夹 2、以管理员权限打开cmd 输
阅读全文
摘要：文件 xx.vue，xx文件名，使用大驼峰 1、template 内 写 html ，注意添加div 2、script 写 vue核心功能， 注意name 和 引入子组件 3、style 写css格式 <template> </template> <script> export default {
阅读全文
摘要：一、VueComponent 1、组件的本质是 VueComponent的构造函数，是Vue.extend生成的 2、我们只需要写<组件名></组件名>，Vue解析时会帮我们创建组件的实例对象 即Vue帮我们执行的：new VueComponent({}) 3、注意：每次调佣Vue.extend({
阅读全文
摘要：一、Vue组件使用的三大步 1、定义组件 2、注册组件 3、使用组件 二、定义组件 1、Vue.extend({})与new Vue({})基本相似，Vue.extend不适用el，data要写返回函数 2、template用来写html结构，注意要加div包裹起来 3、简写 const s = {
阅读全文
摘要：一、生命周期钩子 1、挂载流程 初始化生命周期->beforecreate->数据代理->created->初始化虚拟DOM->beforemount->虚拟DOM转化为真是DOM并挂在在页面->mounted 2、更新流程 数据发生改变->beforeupdate(此时数据发生改变，页面没变)->
阅读全文
摘要：一、定义语法 1、局部 // 简单，只需要指令语法绑定元素和指令语法所在模块加载时使用 nev Vue({ ..., directives:{ // element指令绑定的dom，binding获取value 指令名(element, binding){ }, }, } // 详细，指令绑定元素、
阅读全文
