金木女友

vue3学习全部笔记

1. vue3介绍

Vue.js 3.0版在2020年9月18日发布
Vue3支持vue2的大多数特性
Vue3在2022年2月7日成为新的默认版本

性能提升

项目打包体积更小
初次渲染更快, 更新渲染更快
需要的运行内存更小
使用Proxy代替Object.defineProperty实现数据响应式
重写虚拟DOM的实现和Tree-Shaking
更好的支持Typescript

2. 获取vue3.0

1. cdn方式

打开vue3官网->起步->安装->CDN->单击CDN的src->右键另存为（将vue.global.js存到自己创建的文件夹）

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>Documenttitle>
    
    <script src="./vue.global.js">script>
head>

<body>
    
    <div id="app">
        <h1>{{msg}}h1>
    div>
body>

html>
<script>
    /*
    vue2写法:  
        new Vue({
            // 挂载应用实例
            el:"#app",
            // data可以写成一个对象
            data:{

            },
            methods: {
                
        },}) 
    */
    // 1.创建vue实例对象  
    const app = Vue.createApp({
        // data属性必须采用函数的写法
        data() {
            return {
                msg: 'hello vue3'
            }
        },
    })
    console.log(app);
    // 2.挂载应用实例
    app.mount('#app');
script>

2. vue cli脚手架方式

安装最新版本的vue cli 脚手架
```
npm i @vue/cli -g
```
创建项目
```
vue create 项目名称
```
选择vue3版本的默认选项
启动项目
```
npm run serve
```

3. vite构建工具

vite是vue官方发布的一款构建工具

vite底层不是基于webpack

vite底层是基于浏览器对ES模块语法的支持来进行项目构建, 所有构建速度很快

创建项目
```
npm init vite 项目名称
```
安装项目依赖

项目根目录运行初始化命令
```
npm install
// 或者
npm i
```
启动项目

项目根目录运行启动命令
```
npm run dev
```
默认监听端口号3000
```
http://localhost:3000
```

（模块化理解）：

tools.js

export default{
    add(x,y){
        return x+y;
    },
    reduce(x,y){
        return x-y;
    }
}

index.html

方法一:

方法二:

3. 新增特性

Fragment模板碎片

vue2中组件的模板必须有一个唯一的根标签

vue3中组件模板可以有多个根标签

Home.vue

App.vue

页面结果:

Composition (组合) API

作用: 将不同组件的相同部分抽离出来, 单独维护, 目的是提高代码复用率

1. setup

用法: 在组件对象中添加setup方法
该方法在组件创建完成之前自动调用, 所用不能在其内部使用this访问组件对象
该方法中返回的数据会自动和组件对象中的data合并

该方法中返回的方法会自动和组件对象中的methods合并

export default {
    setup(){

    }
}

eg:

页面结果:

2. reactive

作用: 帮助我们创建响应式数据对象

语法

import {reactive} from 'vue';
export default {
    setup(){
        // 创建响应式数据对象
        const obj=reactive({

        });
        return obj;
    }
}

eg:

3. ref

作用: 基于基本数据类型(字符串, 布尔, 数值) 创建一个响应式的数据对象

语法

import {ref} from 'vue';

export default {
    setup(){
        // 使用ref基于基本数据类型创建响应式数据对象
        const name=ref('张三');
        const age=ref(20);
        console.log(name);
        console.log(age);
        return {
            name,age
        }
    }
}

视图中引用直接通过数据名称引用即可

{{name}}

eg:

4. toRefs

作用: 让reactvie方法创建的响应式数据对象, 支持ES6的解构赋值操作( reactive创建的响应式数据对象默认不支持ES6解构赋值, 因为会使其失去响应式 )

语法: 参数必须是reactive创建的响应式数据对象

import {torRefs} from 'vue';

export default {
    setup(){
        // 创建响应式数据对象
        const {name,age}=toRefs(reactive({
          name:'张三',
          age:20
        }));
        return {
            name,age
        };
    }
}

eg:

computed计算属性

vue2

export default {
    computed:{
        // 计算属性方法
    }
}

vue3

使用方式1

export default {
    computed:{
        // 计算属性方法
    }
}

使用方式2

import {computed} from 'vue';

const computedData=computed(()=>{})

eg:

watch侦听器

vue2

export default {
    // 侦听器
    watch:{

    }
}

vue3

使用方式1

export default {
     // 侦听器
    watch:{

    }
}

使用方式2

通过watch方法创建的普通侦听器无法侦听到数组元素的变化, 必须使用深度侦听器
以下补充：
监听对象的某个属性
- setup中监听对象的某个属性，监听不到
- setup中监听对象，监听不到某个属性的新旧值变化
- watch中监听对象的某个属性，可以监听新旧值变化
监听数组添加属性
- 能监听，但是监听不到变化
备用解决思路：
- toRefs解构reactive对象可实现监听某属性新旧值
- 使用ref,不用reactive

import {watch} from 'vue';
export default {
    setup(){
        // 普通侦听器
        watch(被侦听的数据,function(value,oldValue){

        });
        // 深度侦听器
        watch(被侦听的数据,function(value,oldValue){

        },{deep:true});
    }
}

eg:

组合API中调用生命周期钩子函数

如果要在setup方法中调用组件生命周期钩子函数: 在原来的生命周期钩子函数名称前加on关键, 并且需要保持小驼峰的命名方式
不能在setup方法中调用beforeCreate,created者2个生命周期钩子函数 ( 因为beforeCreate,created这两个生命周期钩子函数的执行时间和setup方法接近 )
注意:
- 钩子函数：beforeDestory->beforeUnmount
- 钩子函数：destoryed->unmounted
- 销毁组件：this.$destory()->app.unmount()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R6X6Qq2p-1659530104528)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a16c02f295714778abcbd52057a3eeee~tplv-k3u1fbpfcp-watermark.image?)]

语法

// 导入
import {onMounted,onUpdated,onUnmounted} from 'vue';
export default {
setup(){
    onMounted(function(){
        console.log('组件视图挂载完成');
    });
    onUpdated(function(){
        console.log('组件更新完成');
    });
    onUnmounted(function(){
        console.log('组件卸载完成');
    });
}
}

h渲染函数

vue2

系统会自动在render中注入渲染函数

import App from './App.vue';
new Vue({
    // h是系统自动注入的渲染函数
    render(h){
       return h(App); 	
    }
});

vue3

vue3中提供了一个h渲染函数, 我们需要手动导入才能使用, 系统不会自动将其注入到render中

import { createApp,h} from 'vue'
import App from './App.vue'
// createApp(App).mount('#app')
createApp({
    render(){
        // 调用渲染函数h进行组件渲染
        // return h(App);
        // h创建元素对象: h('元素名称',{/*属性集合*/},['子节点'])
        return h('h1',{style:{color:'red'}},'hello vue3');
    }
}).mount('#app')

teleport: 瞬移组件的位置

teleport是一个vue3中提供的系统组件
作用: 可以让开发者动态指定组件内的某个视图结构的挂载位置
语法
```
    
```

函数式组件

通过函数方式定义的组件
特点: 函数组件默认没有状态数据和生命周期

语法

定义

import { h } from 'vue';
export default function FunctionComponent(props){
    // console.log(props);
    return h('h1',{style:{color:'red'}},props.msg);
}

调用

全局属性app.config.globalProperties

作用: 给Vue注册全局功能( 给每一个vue组件提供全局的属性或者方法 )
vue2中创建vue应用
```
const app=new Vue({
    
});
```
- vue2中给Vue注册全局功能: 在Vue的原型对象添加属性或者方法, 这样每一个vue组件都可以访问, 每一个vue组件都是Vue的实例对象( 利用面向对象的继承性 )
vue3中创建应用对象
```
const app=Vue.createApp({
    
});
```
- vue3中给vue注册全局功能: 必须借助全局属性app.config.globalProperties
需求: 希望在每一个vue组件中都可以通过组件对象访问axios
- 下载安装axios
```
npm i axios
```
- 必须使用app.config.globalProperties全局注册axios
```
app.config.globalPropperties.$axios=axios;
```

插件注册

vue2中插件注册
```
Vue.use();
```

vue3中插件注册

// app: 是通过Vue.createApp()方法创建的应用对象
app.use();

功能: 将axios自动注册成全局对象( 在每一个组件中都可以通过this来访问axios )

开发vue插件

函数方式

// app: 系统自动注入, 应用对象
// options: 调用者通过app.use()方法手动传入的配置对象(可选)
function MyAxios(app,options){
    
}

对象方式

const MyAxios={
    // app: 系统自动注入的应用对象
    // options: 调用者通过app.use()方法手动传递的配置对象(可选)
    install(app,options){
        
    }
}

// 导入axios
import axios from 'axios';
export default {
    // app: 系统自动注入的应用对象
    install(app){
        // 通过app.config.globalProperties全局注册axios
        app.config.globalProperties.$http=axios;
    }
}

4. 更新特性

生命周期钩子函数

销毁阶段生命周期钩子函数名称发生了变换

vue2中

export default {
    // 销毁前
    beforeDestroy(){
        
    },
    // 销毁后
    destroyed(){
        
    }
}

vue3中

vue3中从组件对象中移除了销毁组件实例的方法$destroy

export default {
    // 销毁前
    beforeUnmount(){
        
    },
    // 销毁后
    unmounted(){
        
    }
}

全局组件注册方式

vue2中注册全局组件

Vue.component('组件名称',{
    /* 组件对象 */
});

vue3中注册全局组件

import {createApp} from 'Vue';
// 创建实例对象
const app=createApp();
// 注册全局组件
app.component('组件名称',{
    // 组件对象
})

异步组件

vue2中

const Home=()=>import('./pages/Home.vue');

const asyncModal = {
  // vue2中通过component属性节点指定目标组件
  component: () => import('./Modal.vue'),
  // 延时时长
  delay: 200,
  // 超时时间  
  timeout: 3000,
  // 错误处理组件 
  error: ErrorComponent,
  // 加载中的组件  
  loading: LoadingComponent
}

vue3中

import {defineAsyncComponent} from 'vue';

const Home=defineAsyncComponent(()=>import('./pages/Home.vue'));

const asyncModalWithOptions = defineAsyncComponent({
  // vue3中通过loader属性节点指定目标组件  
  loader: () => import('./Modal.vue'),
   // 延时时长
  delay: 200,
  // 超时时间  
  timeout: 3000,
  // 错误处理组件 
  error: ErrorComponent,
  // 加载中的组件  
  loading: LoadingComponent
})

v-for指令中使用ref属性

vue2中

this.$refs.list[0];
this.$refs.list[1];

vue3中: 需要手动维护一个数组用来保存每一个子元素对象

export default {
    data(){
        return {
            // 保存列表元素的元素对象   
            refList:[]     
        }
    },
    methods:{
        // el: 系统自动注入的参数, 子元素的元素对象
        addRef(el){
            this.refList.push(el);
        }
    },
    // 在组件更新之前, 清空数组中的元素, 否则该数组中的元素会越来越多
    beforeUpdate(){
        this.refList=[];
    }
}

v-if和v-for结合使用

vue2中

v-if和v-for指令同时应用于同一个元素之上, v-for指令优先级会更高, v-if会作用域v-for循环遍历产生的每一个子元素之上
vue3中

v-if指令的优先级高于v-for指令, v-if指令执行, 然后执行v-for指令

自定义指令定义方式

vue2中

Vue.directive('指令名称',function(el, binding, vnode){
    
});

vue3中

然而，在 Vue 3 中，我们为自定义指令创建了一个更具凝聚力的 API。正如你所看到的，它们与我们的组件生命周期方法有很大的不同，即使钩子的目标事件十分相似。我们现在把它们统一起来了：
- created - 新增！在元素的 attribute 或事件监听器被应用之前调用。
- bind → beforeMount
- inserted → mounted
- beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。
- update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。
- componentUpdated → updated
- beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
- unbind -> unmounted
```
const app=createApp();
app.directive('指令名称',function(el, binding, vnode){
    
});
```

`$attrs`包含`class&style`

vue2中
- this.$attrs包含调用组件的时候通过自定义属性所传递的数据, 但是不包含class属性和style属性
vue3中
- this.$attrs: 调用组件的时候通过自定义属性所传递的所有数据, 包含class属性和style属性
  - 当子组件只有一个唯一的根元素的时候, 系统会将所有的自定义属性平移到组件视图的根元素上
  - 如果组件视图存在多个根元素, 则不会处理

emits属性节点

vue3中针对组件对象新增的属性节点
作用:
- 告诉系统组件调用标签上添加的事件是一个自定义事件, 需要通过自定义事件的方式进行触发( vue3中默认会将组件调用标签上的事件作为原生事件进行触发)
- 避免当我们的定义的自定义事件名称和系统事件名称出现冲突的时候, vue3直接把自定义事件当做系统事件来触发

过渡动画

过渡动画选择器名称的变化
- v-enter=>v-enter-from: 元素进入之前的过渡动画选择器名称
- v-leave=>v-leave-from: 元素离开之前的过渡动画选择器名称
transition组件属性的变化
- enter-class=>enter-from-class: 指定元素进入之前需要的过渡动画选择器
- leave-class=>leave-from-class: 指定元素离开之前需要的过渡动画选择器
transition-group组件默认不再自动渲染一个span标签, 但是依然可以通过tag属性指定transition-group渲染的元素名称

v-model实现组件双向数据绑

vue2中使用v-model实现组件双向数据绑定
1. 在组件的调用标签上添加了一个自定义属性value, 通过value属性向组件内部传递数据
2. 在组件的调用标签上通过v-on监听了input事件
3. 希望对v-model指令背后使用的自定义属性名称和自定义事件名称进行修改
  - 在组件内部通过model属性节点对自定义属性名称和自定义事件名称进行修改
```
export default{
    model:{
        prop:'',        // 修改自定义属性名称
        event:''        // 修改自定义事件名称
    }
}
```
vue3中使用v-model指令实现组件双向数据绑定
1. 在组件的调用标签上添加了一个自定义属性modelValue, 通过modelValue向组件内部传递数据
2. 在组件的调用标签上通过v-on监听了update:modelValue
3. 希望对v-model指令背后的自定义属性名称和自定义事件名称进行修改
  1. 在组件内部要通过isShow来接收数据
  2. 在组件内部要通过$emit()触发事件update:isShow
4. vue3中允许在同一个组件的调用标签上多次使用v-model指令
```
 
```
  1. 相当于在组件的调用标签上添加了自定义属性isShow, msg, 同时监听了两个自定义事件update:isShow和update:msg

5. 移除特性

$children属性

vue2中可以通过组件属性$children获取子组件的组件对象
vue3中建议使用ref属性来操作子组件

native事件修饰符

vue2中可以通过native事件修饰符修饰某个事件, 被修饰的事件将被作为原生事件处理, 可以在子组件的内部使用原生方式对其进行触发
vue3中移除了native事件修饰符
vue3中如果希望某个事件可以在子组件的内部被当做原生事件来处理?
- 在vue3中组件调用标签上注册的事件, 默认都会当做原生的事件进行触发
- 在vue3中如果我们希望组件调用标签上所注册的事件是一个自定义事件, 可以在组件内部通过属性节点emits来进行声明, 在emits属性节点中生命过的事件就不会当做系统事件来处理
```
export default {
    // 此处声明过的事件, 会认为是自定义事件, 必须通过自定义事件的方式进行触发, 即使事件明层和系统事件名称冲突, 也不会通过系统事件的触发方式触发该事件
    emits:['click']
}
```

filter过滤器

vue2中过滤器的使用

作用: 对视图中即将输出的数据进行预处理

定义

全局过滤器: 在全局作用域内都可以使用

// data: 系统自动注入, 待处理的数据
Vue.filter('过滤器名称',function(data){
   // 必须返回处理结果      
});

私有过滤器: 只能在定义地方使用

export default {
    filters:{
        // data: 系统自动注入, 待处理的数据
        过滤器名称:function(data){
            // 必须返回处理结果             
        }
    }
}

使用: 只能在插值表达式和v-bind指令中使用
```
{{待处理数据 | 过滤器名称}}
```

vue3中建议使用自定义方法或者computed计算属性来代替过滤器

vm.$set(Vue.set)

vue2中可以使用vm.$set方法解决通过数组下标方式向数组中添加元素, 视图不更新的问题
```
vm.$set(目标数组,数组下标,数组元素);
```
```
vm.$set(目标对象,属性名,属性值);
```
vue3中移除实例方法vm.$set和静态方法Vue.set

vm.$destroy

vue2中, 可以通过实例方法$destroy销毁vue组件
vue3中移除实例方法$destroy,

vm.$on

vue2中, 可以通过$on方法监听自定义事件
vue3中, 移除了 $o n 方法, 但是$ emit方法没有移除

vm.$once

vue2中, 可以通过$once方法监听自定义事件, 但是只能监听一次
vue3中, $once方法被移除了

vm.$off

vue2中可以通过$off方法注销一个自定义事件
vue3中$off方法被移除了

6. vue-router路由模块

vue2中路由的使用流程

下载安装
```
npm i vue-router
```
导入路由模块
```
import Router from 'vue-router';
```
注册插件
```
Vue.use(Router);
```

创建路由实例对象

const router=new Router({
    routes:[],  // 引用路由规则数组
    mode:'hash'     // 指定路由模式, 可选值hash(默认路由模式),history
});

挂载路由实例对象

new Vue({
    el:'#app',
    router      // 挂载路由实例对象
});

在根组件中添加路由占位符

vue3中路由模块的使用流程

下载安装
```
npm i vur-router@next
```

导入路由模块

import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router';

创建路由实例

const router=createRouter({
    routes:[],      // 路由规则
    //必须手动指定路由模式, createWebHashHistory: 提供的是访问地址带#的路由模式
    // createWebHistory: 提供的是访问地址不带#的路由模式
    history:createWebHashHistory()
});

注册路由实例

 //app: 通过Vue.createApp()创建的应用实例
app.use(router);

在根组件中添加路由占位符

路由传参

动态路由

定义动态路由规则

const routes=[
    {
        path:'/goods/:id',
        component:Goods
    }
]

进行路由传参
获取动态路由参数
```
this.$route.params.id
```

查询字符串方式

在页面访问地址中拼接查询字符串
```
新闻详情
```

在目标页面中获取查询字符串参数

this.$route.query.id
this.$route.query.title

嵌套路由

配置嵌套路由规则

const routes=[
    {
        path:'/ucenter',
        component:Ucenter,
        // 嵌套路由规则
        children:[
            {
                name:'order',
                path:'/order',
                component:Order
            },
            {
                name:'address',
                path:'/Address',
                component:Address
            }
        ]
    }
]

父级路由对应的视图中添加二级路由占位符

7. element-plus组件库

下载安装

npm i element-plus

完整导入

将element-plus组件库中提供的所有组件全部导入我们自己的vue3的项目中

缺点: 导致项目最终构建出来的文件体积过大, 性能不好

main.js

// 导入element-plus核心文件
import Element from 'element-plus';
// 导入element-plus的样式文件
import 'element-plus/dist/index.css';
// 全局注册组件库
const app=Vue.createApp(App);
app.use(Element);

按需导入(vite)

安装一个开发依赖
```
npm i unplugin-vue-components
```

在项目配置文件中添加配置项

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
   + Components({
   +   resolvers: [ElementPlusResolver()],
   + }),
  ]
})

重启开发服务器
```
npm run dev
```

按需导入(vue-cli)

安装插件
```
npm install unplugin-vue-components
```

修改项目配置文件(webpack进行配置)

vue.config.js

const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports={
    // webpack的配置节点
    configureWebpack:{
        plugins: [
            Components({
              resolvers: [ElementPlusResolver()],
            }),
          ]
    }
}

重启开发服务器
```
npm run serve
```

8. vuex状态管理工具

vue2中使用vuex状态管理工具

下载安装
```
npm i vuex
```
导入
```
import Vuex from 'vuex'
```
注册
```
Vue.use(Vuex)
```

创建数据仓储对象

const store=new Vuex.Store({
    state:{
        // 状态数据
    },
    mutaionts:{
        // 操作state状态数据的同步方法
    },
    actions:{
        // 发送数据请求的异步方法
    },
    getters:{
        // 计算属性方法
    },
    modules:{
        // 子模块
    }
})

挂载数据仓储对象

/mian.js

new Vue({
    // 注册数据仓储对象
    store
});

在组件中使用数据仓储对象
```
this.$store
```

vue3中使用vuex状态管理工具

下载安装
```
npm i vuex@next
```
导出
```
import {createStore} from 'vuex';
```

创建数据仓储对象

const store=createStore({
    state:{
        // 状态数据
    },
    mutations:{
        // 操作state状态数据的同步方法
    },
    actions:{
        // 发送数据请求的异步方法
    },
    getters:{
        // 计算属性方法
    },
    modules:{
        // 子模块
    }
});

注册仓储对象

// app:Vue.createApp()创建的应用对象
app.use(store);

9. 案例

留言板案例

参考文档

你可能感兴趣的:(学习,vue,前端)

情绪觉察日记第37天露露_e800
今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习 python
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
铭刻于星（四十二）随风至
69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
学点心理知识，呵护孩子健康静候花开_7090
昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）研学随笔 arcgis 经验分享
我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录 leetcode 算法职场和发展
重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
2019-12-22-22:30 涓涓1016
今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
将cmd中命令输出保存为txt文本文件落难Coder Windows cmd window
最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
GitHub上克隆项目 bigbig猩猩 github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
阶段总结反思轻争
马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
ARM驱动学习之基础小知识 JT灬新一 ARM 嵌入式 arm开发学习
ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
ARM驱动学习之5 LEDS驱动 JT灬新一嵌入式 C 底层 arm开发学习单片机
ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
ARM驱动学习之4小结 JT灬新一嵌入式 C++arm开发学习 linux
ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
展现思维导图魅力，不断挖掘人生宝藏思维导图讲师Mandy
第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员
2019-3-23晨间日记红红火火小耳朵
今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte
【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面一个射手座的程序媛程序员华为od 面试职场和发展
最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
教育用心灵温暖心灵
@陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更
深入浅出Java Annotation(元注解和自定义注解） Josh_Persistence Java Annotation 元注解自定义注解
一、基本概述　　 Annontation是Java5开始引入的新特征。中文名称一般叫注解。它提供了一种安全的类似注释的机制，用来将任何的信息或元数据（metadata）与程序元素（类、方法、成员变量等）进行关联。　　更通俗的意思是为程序的元素（类、方法、成员变量）加上更直观更明了的说明，这些说明信息是与程序的业务逻辑无关，并且是供指定的工具或
mysql优化特定类型的查询 annan211 java 工作 mysql
本节所介绍的查询优化的技巧都是和特定版本相关的，所以对于未来mysql的版本未必适用。 1 优化count查询对于count这个函数的网上的大部分资料都是错误的或者是理解的都是一知半解的。在做优化之前我们先来看看真正的count()函数的作用到底是什么。 count()是一个特殊的函数，有两种非常不同的作用，他可以统计某个列值的数量，也可以统计行数。在统
MAC下安装多版本JDK和切换几种方式棋子chessman jdk
环境： MAC AIR,OS X 10.10,64位历史：过去 Mac 上的 Java 都是由 Apple 自己提供，只支持到 Java 6，并且OS X 10.7 开始系统并不自带（而是可选安装）（原自带的是1.6）。后来 Apple 加入 OpenJDK 继续支持 Java 6，而 Java 7 将由 Oracle 负责提供。在终端中输入jav
javaScript （1） Array_06 JavaScript java 浏览器
JavaScript 1、运算符　　运算符就是完成操作的一系列符号，它有七类：　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位
国内顶级代码分享网站袁潇含 java jdk oracle .net PHP
现在国内很多开源网站感觉都是为了利益而做的当然利益是肯定的,否则谁也不会免费的去做网站 &
Elasticsearch、MongoDB和Hadoop比较随意而生 mongodb hadoop 搜索引擎
IT界在过去几年中出现了一个有趣的现象。很多新的技术出现并立即拥抱了“大数据”。稍微老一点的技术也会将大数据添进自己的特性，避免落大部队太远，我们看到了不同技术之间的边际的模糊化。假如你有诸如Elasticsearch或者Solr这样的搜索引擎，它们存储着JSON文档，MongoDB存着JSON文档，或者一堆JSON文档存放在一个Hadoop集群的HDFS中。你可以使用这三种配
mac os 系统科研软件总结张亚雄 mac os
1.1 Microsoft Office for Mac 2011 大客户版，自行搜索。 1.2 Latex （MacTex）: 系统环境：https://tug.org/mactex/ &nb
Maven实战（四）生命周期 AdyZhang maven
1. 三套生命周期 Maven拥有三套相互独立的生命周期，它们分别为clean，default和site。每个生命周期包含一些阶段，这些阶段是有顺序的，并且后面的阶段依赖于前面的阶段，用户和Maven最直接的交互方式就是调用这些生命周期阶段。以clean生命周期为例，它包含的阶段有pre-clean, clean 和 post
Linux下Jenkins迁移 aijuans Jenkins
1. 将Jenkins程序目录copy过去源程序在/export/data/tomcatRoot/ofctest-jenkins.jd.com下面 tar -cvzf jenkins.tar.gz ofctest-jenkins.jd.com &
request.getInputStream()只能获取一次的问题 ayaoxinchao request Inputstream
问题：在使用HTTP协议实现应用间接口通信时，服务端读取客户端请求过来的数据，会用到request.getInputStream()，第一次读取的时候可以读取到数据，但是接下来的读取操作都读取不到数据原因： 1. 一个InputStream对象在被读取完成后，将无法被再次读取，始终返回-1； 2. InputStream并没有实现reset方法（可以重
数据库SQL优化大总结之百万级数据库优化方案 BigBird2012 SQL优化
网上关于SQL优化的教程很多，但是比较杂乱。近日有空整理了一下，写出来跟大家分享一下，其中有错误和不足的地方，还请大家纠正补充。这篇文章我花费了大量的时间查找资料、修改、排版，希望大家阅读之后，感觉好的话推荐给更多的人，让更多的人看到、纠正以及补充。 1.对查询进行优化，要尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where
jsonObject的使用 bijian1013 java json
在项目中难免会用java处理json格式的数据，因此封装了一个JSONUtil工具类。 JSONUtil.java package com.bijian.json.study; import java.util.ArrayList; import java.util.Date; import java.util.HashMap;
[Zookeeper学习笔记之六]Zookeeper源代码分析之Zookeeper.WatchRegistration bit1129 zookeeper
Zookeeper类是Zookeeper提供给用户访问Zookeeper service的主要API，它包含了如下几个内部类首先分析它的内部类，从WatchRegistration开始，为指定的znode path注册一个Watcher， /** * Register a watcher for a particular p
【Scala十三】Scala核心七：部分应用函数 bit1129 scala
何为部分应用函数？ Partially applied function: A function that’s used in an expression and that misses some of its arguments.For instance, if function f has type Int => Int => Int, then f and f(1) are p
Tomcat Error listenerStart 终极大法 ronin47 tomcat
Tomcat报的错太含糊了，什么错都没报出来，只提示了Error listenerStart。为了调试，我们要获得更详细的日志。可以在WEB-INF/classes目录下新建一个文件叫logging.properties，内容如下 Java代码 handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHa
不用加减符号实现加减法 BrokenDreams 实现
今天有群友发了一个问题，要求不用加减符号(包括负号)来实现加减法。分析一下，先看最简单的情况，假设1+1，按二进制算的话结果是10，可以看到从右往左的第一位变为0，第二位由于进位变为1。
读《研磨设计模式》-代码笔记-状态模式-State bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /* 当一个对象的内在状态改变时允许改变其行为，这个对象看起来像是改变了其类状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化如果在
CUDA程序block和thread超出硬件允许值时的异常 cherishLC CUDA
调用CUDA的核函数时指定block 和 thread大小，该大小可以是dim3类型的（三维数组），只用一维时可以是usigned int型的。以下程序验证了当block或thread大小超出硬件允许值时会产生异常！！！GPU根本不会执行运算！！！所以验证结果的正确性很重要！！！在VS中创建CUDA项目会有一个模板，里面有更详细的状态验证。以下程序在K5000GPU上跑的。
诡异的超长时间GC问题定位 chenchao051 jvm cms GC hbase swap
HBase的GC策略采用PawNew+CMS, 这是大众化的配置，ParNew经常会出现停顿时间特别长的情况，有时候甚至长到令人发指的地步，例如请看如下日志： 2012-10-17T05:54:54.293+0800: 739594.224: [GC 739606.508: [ParNew: 996800K->110720K(996800K), 178.8826900 secs] 3700
maven环境快速搭建 daizj 安装 mavne 环境配置
一下载maven 安装maven之前，要先安装jdk及配置JAVA_HOME环境变量。这个安装和配置java环境不用多说。 maven下载地址：http://maven.apache.org/download.html，目前最新的是这个apache-maven-3.2.5-bin.zip，然后解压在任意位置，最好地址中不要带中文字符，这个做java 的都知道，地址中出现中文会出现很多
PHP网站安全，避免PHP网站受到攻击的方法 dcj3sjt126com PHP
对于PHP网站安全主要存在这样几种攻击方式:1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgerie
yii中给CGridView设置默认的排序根据时间倒序的方法 dcj3sjt126com GridView
public function searchWithRelated() { $criteria = new CDbCriteria; $criteria->together = true; //without th
Java集合对象和数组对象的转换 dyy_gusi java集合
在开发中，我们经常需要将集合对象（List，Set）转换为数组对象，或者将数组对象转换为集合对象。Java提供了相互转换的工具，但是我们使用的时候需要注意，不能乱用滥用。 1、数组对象转换为集合对象最暴力的方式是new一个集合对象，然后遍历数组，依次将数组中的元素放入到新的集合中，但是这样做显然过
nginx同一主机部署多个应用 geeksun nginx
近日有一需求，需要在一台主机上用nginx部署2个php应用，分别是wordpress和wiki，探索了半天，终于部署好了，下面把过程记录下来。 1. 在nginx下创建vhosts目录，用以放置vhost文件。 mkdir vhosts 2. 修改nginx.conf的配置，在http节点增加下面内容设置，用来包含vhosts里的配置文件 #
ubuntu添加admin权限的用户账号 hongtoushizi ubuntu useradd
ubuntu创建账号的方式通常用到两种：useradd 和adduser . 本人尝试了useradd方法，步骤如下： 1:useradd 使用useradd时，如果后面不加任何参数的话，如：sudo useradd sysadm 创建出来的用户将是默认的三无用户：无home directory ,无密码,无系统shell。顾应该如下操作：
第五章常用Lua开发库2-JSON库、编码转换、字符串处理 jinnianshilongnian nginx lua
JSON库在进行数据传输时JSON格式目前应用广泛，因此从Lua对象与JSON字符串之间相互转换是一个非常常见的功能；目前Lua也有几个JSON库，本人用过cjson、dkjson。其中cjson的语法严格（比如unicode \u0020\u7eaf），要求符合规范否则会解析失败（如\u002），而dkjson相对宽松，当然也可以通过修改cjson的源码来完成
Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 yaerfeng1989 timer quartz 定时器
原创整理不易，转载请注明出处：Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解代码下载地址：http://www.zuidaima.com/share/1772648445103104.htm 有两种流行Spring定时器配置：Java的Timer类和OpenSymphony的Quartz。 1.Java Timer定时首先继承jav
Linux下df与du两个命令的差别？ pda158 linux
　一、df显示文件系统的使用情况，与du比較，就是更全盘化。　　最经常使用的就是 df -T，显示文件系统的使用情况并显示文件系统的类型。　　举比例如以下：　　[root@localhost ~]# df -T 　　Filesystem Type &n
[转]SQLite的工具类 ---- 通过反射把Cursor封装到VO对象 ctfzh VO android sqlite 反射 Cursor
在写DAO层时，觉得从Cursor里一个一个的取出字段值再装到VO(值对象)里太麻烦了，就写了一个工具类，用到了反射，可以把查询记录的值装到对应的VO里，也可以生成该VO的List。使用时需要注意：考虑到Android的性能问题，VO没有使用Setter和Getter，而是直接用public的属性。表中的字段名需要和VO的属性名一样，要是不一样就得在查询的SQL中
该学习笔记用到的Employee表 vipbooks oracle sql 工作
这是我在学习Oracle是用到的Employee表，在该笔记中用到的就是这张表，大家可以用它来学习和练习。 drop table Employee; -- 员工信息表 create table Employee( -- 员工编号 EmpNo number(3) primary key, -- 姓

vue3学习全部笔记

1. vue3介绍

性能提升

2. 获取vue3.0

1. cdn方式

2. vue cli脚手架方式

3. vite构建工具

3. 新增特性

Fragment模板碎片

{{msg}}

{{test}}

Composition (组合) API

1. setup

{{name}}

{{age}}

2. reactive

{{name}}

{{age}}

3. ref

{{name}}

{{age}}

4. toRefs

{{name}}

{{age}}

computed计算属性

{{msg}}

{{reverseMsg}}

watch侦听器

普通/深度监听写法

监听对象的某个属性

(setup中监听对象的某个属性，监听不到)

(setup中监听对象，监听不到某个属性的新旧值变化)

(watch中监听对象的某个属性，可以监听新旧值变化)

监听数组添加属性

(能监听，但是监听不到变化)

toRefs解构reactive对象可实现监听新旧值

组合API中调用生命周期钩子函数

h渲染函数

teleport: 瞬移组件的位置

函数式组件

全局属性app.config.globalProperties

插件注册

4. 更新特性

生命周期钩子函数

全局组件注册方式

异步组件

v-for指令中使用ref属性

v-if和v-for结合使用

自定义指令定义方式

$attrs包含class&style

emits属性节点

EmitsTest子组件

过渡动画

v-model实现组件双向数据绑

5. 移除特性

$children属性

native事件修饰符

filter过滤器

vm.$set(Vue.set)

vm.$destroy

vm.$on

vm.$once

vm.$off

6. vue-router路由模块

vue2中路由的使用流程

vue3中路由模块的使用流程

路由传参

动态路由

查询字符串方式

嵌套路由

7. element-plus组件库

下载安装

完整导入

按需导入(vite)

按需导入(vue-cli)

8. vuex状态管理工具

vue2中使用vuex状态管理工具

vue3中使用vuex状态管理工具

9. 案例

留言板案例

`$attrs`包含`class&style`