Vue3

  • 项目构建
  • 动态参数
  • lodash
  • 计算属性
  • 侦听器 (watch、watchEffect)
  • v-for
  • 在组件上使用 v-for
  • 复选框、选择框、lazy、number
  • Attribute
  • 在组件上使用 v-model
  • 插槽
  • 祖孙组件传值(provide、inject)
  • 动态组件
  • 异步组件(defineAsyncComponent、Suspense)
  • 模板引用
  • ref
  • 生命周期
  • setup、ref、toRef、toRefs
  • Mixin
  • Teleport
  • customRef
  • readonly、shallowReadonly
  • shallowReactive、shallowRef
  • toRaw、markRaw
  • 路由
  • vuex

项目构建

  • 安装

    $ npm init @vitejs/app app-name

  • 选择环境

    $ vue

  • 选择脚本

    $ vue-ts

动态参数


<template><p :[attrName]="attrValue">{{ attrName }} : {{ attrValue }}</p><button @click="updateAttr">更新动态参数</button><div v-for="item in list" :ref="getChildElement">{{ item }}</div>
</template><script setup lang="ts">
import {ref, reactive} from "vue";const attrName = ref('data-name');
const attrValue = ref('Lee');const updateAttr = () => {attrName.value = 'data-id';attrValue.value = 'abc-def-ghi';
}const list = reactive([1, 2, 3]);
const getChildElement = (el: HTMLElement) => console.log(el);
</script>


<template><button @[eventName]="eventFun">需要绑定事件类型</button><button @click="updateEvent">更新动态参数</button>
</template><script setup lang="ts">
import {ref} from "vue";const eventName = ref('data-name');
let eventFun = (e: MouseEvent) => {console.log(e);
};const updateEvent = () => {eventName.value = 'click';
}
</script>

lodash

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：

  • 遍历 array、object 和 string
  • 对值进行操作和检测
  • 创建符合功能的函数

$ npm i lodash

$ npm i --dev @types/lodash

import _ from "lodash/index";_([1, 2, 3, 4, 5, 6]).each(item => {console.log(item)
})

计算属性

  • 单向

    <template><p>name : {{ name }}</p><p>fullName : <input type="text" v-model="fullName"></p></template><script setup lang="ts">
import _ from "lodash/index";
import {computed, reactive} from "vue";const name = reactive({lastName: 'Lee',firstName: 'Prosper'
});// 计算属性 --> 单向 (将计算好的数据插值到页面)
const fullName = computed(() => {return _(name).values().value().join('-');
})
</script>
  • 双向 
    <template><p>name : {{ name }}</p><p>fullName : <input type="text" v-model="fullName"></p>
</template><script setup lang="ts">
import _ from "lodash/index";
import {computed, reactive} from "vue";const name = reactive({lastName: 'Lee',firstName: 'Prosper'
});// 计算属性 --> 双向 (修改页面内插值的同时改变定义的数据)
const fullName = computed({get() {return _(name).values().value().join('-');},set(value: string) {const names = _(value).split('-').value();name.lastName = names[0];name.firstName = names[1];}
})
</script>

侦听器 (watch、watchEffect)


<template><p>{{ data }}</p><p>msg : <input type="text" v-model="data.msg"></p><p>name : <input type="text" v-model="data.data.name"></p>
</template><script setup lang="ts">
// import _ from "lodash/index";
import {watch, reactive, watchEffect} from "vue";const data = reactive({code: 200,data: {name: 'Lee',age: 25},msg: 'ok'
})// 监听 数据对象
watch(data, value => {console.log('数据对象', value);
}, {deep: true, immediate: true})// 监听 单个属性
watch(() => data.data.name, (newValue, oldValue) => {console.log('单个属性', newValue, oldValue);
}, {deep: true, immediate: true})// 监听 多个属性
watch([() => data.msg, () => data.data.name], (newValues, oldValues) => {console.log('多个属性', newValues, oldValues);
}, {deep: true, immediate: true})// 获取属性变化之后的值(刚方法会在初始化时默认执行)
watchEffect(() => {console.log(data.msg);console.log(data.data.name);
})
</script>

v-for


<template><ul><li v-for="(value, name, index) in data">{{ index }} - {{ name }} - {{ value }}</li></ul>
</template><script setup lang="ts">
import {reactive} from "vue";const data = reactive({name1: 'value1',name2: 'value2',name3: 'value3'
})
</script>

在组件上使用 v-for

父组件 ---> 子组件 子组件 ---> 父组件

  • 父组件

<template><button @click="addRow(`Row-${Date.now()}`)">新增行</button><ul><template v-for="(item, index) in items" :key="item.id"><Child :item="item.name" :index="index" @remove="removeRow(index)" @add="addRow"/><!--错误写法--><!--<Child :item="item.name" :index="index" :key="item.id"/>--></template><hr><Child v-for="(item, index) in items" :item="item.name" :index="index" :key="item.id"/></ul>
</template><script setup lang="ts">
import _ from "lodash/index";
import {reactive} from "vue";import Child from './Child.vue';const items = reactive([{id: 'id-1', name: 'Lee'},{id: 'id-2', name: 'Tom'},{id: 'id-3', name: 'Lucy'}
]);// 删除行
const removeRow = (index: number) => {_(items).splice(index, 1).value();console.log(items);
}
// 新增行
const addRow = (name: string) => {_(items).push({id: `id-${items.length}`, name}).value();console.log(items);
}
</script>
  • 子组件

<template><li><span>{{ index }} - {{ item }}</span>&nbsp;<button @click="$emit('remove')">删除行</button>&nbsp;<button @click="removeData">删除行</button>&nbsp;<button @click="$emit('add', `Row-${Date.now()}`)">新增行</button>&nbsp;<button @click="addData">新增行</button></li>
</template><script setup lang="ts">
import {defineProps, defineEmits} from "vue";defineProps(['item', 'index']);const emits = defineEmits(['remove', 'add']);// 删除目标
const removeData = () => {emits('remove')
}// 删除目标
const addData = () => {emits('add', `Row-${Date.now()}`)
}
</script><style scoped>
span {display: inline-block;width: 200px;
}
</style>

复选框、选择框、lazy、number


<template><p>复选框</p><label><input type="checkbox" v-model="toggle" true-value="yes" false-value="no" @change="checkboxChange"/><span>复选框</span></label><p>选择框</p><select v-model="selected" @change="selectChange"><option v-for="item in list" :value="item">{{ item.name }}</option></select><span>{{ selected }}</span><p>lazy : 在调用change方法时改变数据</p><input v-model.lazy="msg" @change="textChange"/><span>{{ msg }}</span><p>number : 自动将用户的输入值转为数值类型</p><input v-model.number="num" @change="numberChange"/><span>{{ num }}</span>
</template><script setup lang="ts">
import _ from "lodash/index";
import {reactive, ref} from "vue";// 复选框
const toggle = ref('yes');
const checkboxChange = () => {console.log(toggle.value)
}// 选择框
const selected = ref({name: 'Tom'});
const list = reactive([{name: 'Lee'}, {name: 'Tom'}]);
const selectChange = () => {console.log(selected.value)
}// lazy
const msg = ref('Hello Msg!!!');
const textChange = () => {console.log(msg)
}// number
const num = ref(123);
const numberChange = () => {console.log(num.value)
}
</script>

Attribute

// 父组件
<template><Child data-msg="Hello" :data-status="activated"/><button @click="activated = !activated">修改状态</button>
</template>
<script setup lang="ts">
import {ref} from "vue";
import Child from './Child.vue';const activated = ref(true);
</script>// 子组件
<template><!--直接写 {{ data }} 报警告，提示你在msg外加上一层标签--><p>{{ data }}</p>
</template>
<script setup lang="ts">
import {useAttrs} from "vue";const data = useAttrs();
</script>

在组件上使用 v-model

// 父组件
<template><p>父</p><input v-model="firstName"><input type="text" v-model="lastName"><hr><Child v-model:first-name="firstName" v-model:last-name="lastName"/>
</template>
<script setup lang="ts">
import {ref} from "vue";
import Child from './Child.vue';const firstName = ref('Prosper');
const lastName = ref('Lee');
</script>// 子组件
<template><p>子</p><input :value="firstName" @input="$emit('update:firstName', $event.target.value)"><input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)">
</template>
<script setup lang="ts">
import {defineEmits, defineProps} from "vue";defineProps(['firstName', 'lastName'])
defineEmits(['update:firstName', 'update:lastName']);
</script>

插槽

  • 默认插槽
<!--父组件-->
<Child><p>默认插槽 : <span>ProsperLee</span></p></Child><!--子组件-->
<template><slot></slot>
</template>
  • 具名插槽
<!--父组件-->
<template v-slot:default><p>具名插槽 : Hello Msg!!!</p></template>
<template #default><p>具名插槽 : Hello Msg!!!</p></template><!--子组件(一个不带 name 的 <slot> 出口会带有隐含的名字“default”)-->
<template><slot></slot>
</template>

<!--父组件-->
<template v-slot:slotName><p>具名插槽 : Hello Msg!!!</p></template>
<template #slotName><p>具名插槽 : Hello Msg!!!</p></template><!--子组件(一个不带 name 的 <slot> 出口会带有隐含的名字“default”)-->
<template><slot name="slotName"></slot>
</template>

<!--父组件-->
<template><button @click="changeSlotName">切换插槽</button><Child><template #[dynamicSlotName]>Lee</template></Child>
</template><script setup lang="ts">
import Child from './Child.vue';
import {ref} from "vue";const toggle = ref(true);
const dynamicSlotName = ref('slotNameA');const changeSlotName = () => {toggle.value = !toggle.value;dynamicSlotName.value = toggle.value ? 'slotNameA' : 'slotNameB';
}
</script><!--子组件-->
<template><p style="color: aqua;"><slot name="slotNameA"></slot></p><p style="color: red;"><slot name="slotNameB"></slot></p>
</template>
  • 作用域插槽
<!--父组件-->
<Child>
<template v-slot:default="scope">作用域插槽 : {{ scope.data }}</template>
<template #default="scope">作用域插槽 : {{ scope.data }}</template>
<template #default="{data}">作用域插槽 : {{ data }}</template>
</Child><!--子组件-->
<template><ul><li v-for="( item, index ) in items"><slot :data="item">{{ index }} - {{item.name}}</slot></li></ul>
</template>
<script setup lang="ts">
import {reactive} from "vue";const items = reactive([{name: 'Lee'}, {name: 'Tom'}]);
</script>

<!--父组件-->
<template><Child><template v-slot:slotName="scope">作用域插槽 : {{ scope.data }}</template><template #slotName="scope">作用域插槽 : {{ scope.data }}</template><template #slotName="{data}">作用域插槽 : {{ data }}</template></Child>
</template><!--子组件-->
<template><ul><li v-for="( item, index ) in items"><slot name="slotName" :data="item">{{ index }} - {{item.name}}</slot></li></ul>
</template><script setup lang="ts">
import {reactive} from "vue";const items = reactive([{name: 'Lee'}, {name: 'Tom'}]);
</script>

祖孙组件传值(provide、inject)

// 祖组件
import Grandson from './components/Grandson.vue'
import {provide} from "vue";provide('msg', 'Hello Msg!!!');// 孙组件
import {inject} from "vue";const msg = inject('msg');
console.log(msg);

动态组件


<template><button @click="isKeepAlive = !isKeepAlive">是否缓存组件 {{ isKeepAlive }}</button><hr><button v-for="tab in tabs" :key="tab" @click="currentTab = tab">{{ tab }}</button><p>{{ currentTab }} - {{ currentTabComponent }}</p><hr><keep-alive v-if="isKeepAlive"><component :is="currentTabComponent"></component></keep-alive><component v-else :is="currentTabComponent"></component>
</template><script lang="ts">
import {reactive, ref, computed, defineComponent} from "vue";
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';
import Tab3 from './Tab3.vue';export default defineComponent({components: {Tab1,Tab2,Tab3},setup() {// 是否缓存组件const isKeepAlive = ref(true);const currentTab = ref('Tab1');const tabs = reactive(['Tab1', 'Tab2', 'Tab3']);const currentTabComponent = computed(() => {return currentTab.value;})return {isKeepAlive,currentTab,tabs,currentTabComponent}}
})
</script>

异步组件(defineAsyncComponent、Suspense)


<template><button @click="isKeepAlive = !isKeepAlive">是否缓存组件 {{ isKeepAlive }}</button><hr><button v-for="tab in tabs" :key="tab" @click="currentTab = tab">{{ tab }}</button><p>{{ currentTab }} - {{ currentTabComponent }}</p><hr><Suspense><template #default><keep-alive v-if="isKeepAlive"><component :is="currentTabComponent"></component></keep-alive><component v-else :is="currentTabComponent"></component></template><template #fallback>Loading···</template></Suspense>
</template><script lang="ts">
import {reactive, ref, computed, defineComponent, defineAsyncComponent} from "vue";export default defineComponent({components: {Tab1: defineAsyncComponent(() => new Promise((resolve, reject) => {setTimeout(() => {resolve(import("./Tab1.vue"));}, 3000);})),Tab2: defineAsyncComponent(() => import("./Tab2.vue")),Tab3: defineAsyncComponent(() => import("./Tab3.vue")),},setup() {// 是否缓存组件const isKeepAlive = ref(true);const currentTab = ref("Tab1");const tabs = reactive(["Tab1", "Tab2", "Tab3"]);const currentTabComponent = computed(() => {return currentTab.value;});return {isKeepAlive,currentTab,tabs,currentTabComponent,};},
});
</script>

模板引用


<template><div ref="box">ProsperLee</div><Child ref="child"/>
</template><script setup lang="ts">
import {onMounted, ref} from "vue";
import Child from "./Child.vue";const box = ref<HTMLElement | null>(null);
const child = ref<HTMLElement | null>(null);onMounted(() => {console.log(box.value);console.log(child.value.$el);
});
</script>

ref

使用ref定义变量是为了保持 JavaScript 中不同数据类型的行为统一，因为在 JavaScript 中，Number 或 String 等基本类型是通过值而非引用传递的，使用ref定义值实际上是创建了一个响应式引用。

const count = ref(0);
console.log(count.value);

生命周期


<template>
</template><script lang="ts">
import {defineComponent,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated,
} from "vue";export default defineComponent({name: "Demo",setup() {console.log('setup')onBeforeMount(() => {console.log('%cHook inside setup ---> onBeforeMount', 'color: green;')})onMounted(() => {console.log('%cHook inside setup ---> mounted', 'color: green;')})onBeforeUpdate(() => {console.log('%cHook inside setup ---> onBeforeUpdate', 'color: green;')})onUpdated(() => {console.log('%cHook inside setup ---> onUpdated', 'color: green;')})onBeforeUnmount(() => {console.log('%cHook inside setup ---> onBeforeUnmount', 'color: green;')})onUnmounted(() => {console.log('%cHook inside setup ---> onUnmounted', 'color: green;')})onErrorCaptured(() => {console.log('%cHook inside setup ---> onErrorCaptured', 'color: green;')})onRenderTracked(() => {console.log('%cHook inside setup ---> onRenderTracked', 'color: green;')})onRenderTriggered(() => {console.log('%cHook inside setup ---> onRenderTriggered', 'color: green;')})onActivated(() => {console.log('%cHook inside setup ---> onActivated', 'color: green;')})onDeactivated(() => {console.log('%cHook inside setup ---> onDeactivated', 'color: green;')})return {};},beforeCreate() {console.log('选项式 API ---> beforeCreate');},created() {console.log('选项式 API ---> created');},beforeMount() {console.log('选项式 API ---> beforeMount')},mounted() {console.log('选项式 API ---> mounted')},beforeUpdate() {console.log('beforeUpdate')},updated() {console.log('选项式 API ---> updated')},beforeUnmount() {console.log('选项式 API ---> beforeUnmount')},unmounted() {console.log('选项式 API ---> unmounted')},errorCaptured() {console.log('选项式 API ---> errorCaptured')},renderTracked() {console.log('选项式 API ---> renderTracked')},renderTriggered() {console.log('选项式 API ---> renderTriggered')},activated() {console.log('选项式 API ---> activated')},deactivated() {console.log('选项式 API ---> deactivated')},});
</script>

setup、ref、toRef、toRefs

  • setup —> props
<!-- 父组件 -->
<template><Demo data-name="ProsperLee" :data-age="25"/><hr><Child data-name="Lee" :data-age="25"/>
</template><script setup lang="ts">
import Demo from './components/Demo.vue';
import Child from './components/Child.vue';
</script><!--子组件1-->
<template><label><span>【ref】</span><button @click="getRefData">ref</button><br><input type="text" v-model="dataName">&nbsp;<span>{{ dataName }}</span></label><hr><label><span>【toRef】</span><button @click="getToRefData">toRef</button><br><input type="text" v-model="dataAge">&nbsp;<span>{{ dataAge }}</span></label>
</template><script lang="ts">
import {defineComponent, ref, toRef} from "vue";export default defineComponent({name: 'Demo',props: {'data-name': {type: String,default: ''},'data-age': {type: Number,default: 0}},setup(props: any, context) {// 响应数据可以修改const dataName = ref(props["dataName"]);console.log('ref ---> dataName', dataName);const getRefData = () => console.log(dataName.value);// 只读数据不可修改// [Vue warn] Set operation on key "dataAge" failed: target is readonly.const dataAge = toRef(props, 'dataAge');console.log('toRef ---> dataAge', dataName);const getToRefData = () => console.log(dataAge.value);return {dataName,getRefData,dataAge,getToRefData,}},
})
</script><!--子组件2-->
<template><label><span>【toRefs】</span><button @click="getToRefsData">toRefs</button><br><input type="text" v-model="dataName">&nbsp;<input type="text" v-model="dataAge">&nbsp;<span>{{ dataName }}-{{ dataAge }} {{ data }}</span></label>
</template><script lang="ts">
import {defineComponent, toRefs} from "vue";export default defineComponent({name: 'Child',props: {'data-name': {type: String,default: ''},'data-age': {type: Number,default: 0}},setup(props: any, context) {// 只读数据不可修改(将响应式对象转化为普通对象，每个对象都是ref)// [Vue warn] Set operation on key "dataName" failed: target is readonly.// [Vue warn] Set operation on key "dataAge" failed: target is readonly.const data = toRefs(props);console.log('toRefs ---> data', data);const getToRefsData = () => console.log(data.dataName.value, data.dataAge.value);return {data,...data,getToRefsData,}},
})
</script>
  • setup —> context

<template><p>{{ data }}</p><button @click="evFun">emit</button>
</template><script lang="ts">
import {defineComponent} from "vue";export default defineComponent({name: 'Demo',setup(props: any, context) {// Attribute (非响应式对象，等同于 $attrs)const data = context.attrs;// 插槽 (非响应式对象，等同于 $slots)console.log(context.slots)// 触发事件 (方法，等同于 $emit)const evFun = () => context.emit('eventName', 'ProsperLee');// 暴露公共 property (函数)console.log(context.expose)return {data,evFun,}},
})
</script>

Mixin

  • 全局引用
const mixin = {data() {const msg = ref('Hello');return {msg}},methods: {sayHi() {console.log('Hi');}},created() {(this as any).sayHi();}
}createApp(App).mixin(mixin).mount('#app')
  • 局部引入
import {ref} from "vue";export default {data() {const msg = ref('Hello');return {msg}},methods: {sayHi() {console.log('Hi');}},created() {(this as any).sayHi();}
}// 组件1
import {defineComponent} from "vue";
import Demo from './components/Demo.vue';
import mixin from "./mixins";export default defineComponent({name: 'App',components: {Demo},mixins: [mixin],
})// 组件2
import {defineComponent} from "vue";
import mixin from "../mixins";export default defineComponent({name: 'Demo',mixins: [mixin],
})

Teleport

修改DOM所属父标签的位置

  • teleport

<div style="position:absolute;top: 100px;left: 100px;">
<span>Prosper</span>
<teleport to="body"><span>Lee</span>
</teleport>
</div>
  • 在同一目标上使用多个 teleport

<div id="modals"></div>
<teleport to="#modals"><span>Prosper</span></teleport>
<teleport to=".modals"><span>Lee</span></teleport>

customRef

自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。


<template><input type="text" v-model="text">{{ text }}
</template><script setup lang="ts">
import {customRef} from "vue";const useDebouncedRef = (value: string, delay = 200) => {let timeout: number;return customRef((track, trigger) => {return {get() {track();return value;},set(newValue: string) {clearTimeout(timeout)timeout = setTimeout(() => {value = newValuetrigger();}, delay)}}})
}
const text = useDebouncedRef('hello');
</script>

readonly、shallowReadonly


<template><p>深度只读</p><input type="text" v-model="data1.name"><input type="text" v-model="data1.data.msg"><p>{{ data1 }}</p><p>浅度只读</p><input type="text" v-model="data2.name"><input type="text" v-model="data2.data.msg"><p>{{ data2 }}</p>
</template><script setup lang="ts">
import {reactive, readonly, shallowReadonly} from "vue";const obj = reactive({name: 'Lee',data: {msg: 'Hello Lee!!!'}
})
// 深度只读
const data1 = readonly(obj);
// 浅度只读
const data2 = shallowReadonly(obj);
</script>

shallowReactive、shallowRef


<template><p>浅度响应数据</p><button @click="update">修改数据</button><input type="text" v-model="data.name"><input type="text" v-model="data.data.msg"><p>{{ data }}</p>
</template><script setup lang="ts">
import {shallowReactive} from "vue";// 创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换 (暴露原始值)。
const data = shallowReactive({name: 'Lee', data: {msg: 'Hello Lee!!!'}});
</script>


<template><p>浅度响应数据</p><button @click="update">修改数据</button><input type="text" v-model="data.name"><input type="text" v-model="data.data.msg"><p>{{ data }}</p>
</template><script setup lang="ts">
import {shallowRef} from "vue";// 创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的
const data = shallowRef({name: 'Lee', data: {msg: 'Hello Lee!!!'}});
</script>

toRaw、markRaw

<template><p>【toRaw】返回 reactive 或 readonly 代理的原始对象</p><input type="text" v-model="data1.name"><input type="text" v-model="data1.data.msg">{{ data1 }}<p>【markRaw】标记一个对象，使其永远不会转换为 proxy。返回对象本身</p><input type="text" v-model="data2.name"><input type="text" v-model="data2.data.msg">{{ data2 }}
</template><script setup lang="ts">
import { reactive, toRaw, markRaw } from "vue";const obj = reactive<any>({ name: "Lee", data: { msg: "Hello Lee!!!" } });const data1 = toRaw(obj);const data2 = reactive<any>({name: "Lee", data: markRaw({ msg: "Hello Lee!!!" })});
</script>

路由

$ npm install vue-router@4

<template><router-link to="/">Home</router-link><router-link to="/news">News</router-link><router-link to="/about">About</router-link><router-view></router-view>
</template>

import { createRouter, createWebHashHistory } from 'vue-router';const routes = [{ path: '/', component: () => import('../components/Home.vue') },{ path: '/news', component: () => import('../components/News.vue') },{ path: '/about', component: () => import('../components/About.vue') },
]const router = createRouter({routes,history: createWebHashHistory()
})router.beforeEach((to, from, next) => {console.log(to, from);next();
})export default router;

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')

vuex

$ npm install vuex@next --save

<template><button @click="add">Count : {{ $store.state.count }}</button>
</template><script setup lang="ts">
import store from "./store";const add = () => {store.commit("increment");
};
</script>

import { createStore } from 'vuex';const store = createStore({state() {return {count: 0}},mutations: {increment(state: any) {state.count++}}
})export default store;

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'createApp(App).use(router).use(store).mount('#app')

Vue（十六）：Vue3+ts 入门相关推荐

  1. Vue3通透教程【十六】TS自动编译

    文章目录

  2. 第十六课.Pytorch-geometric入门(一)

    目录 PyG安装 图结构基础 基准数据集 Mini-Batches 构建GCN PyG安装 Pytorch-geometric即PyG,是一个基于pytorch的图神经网络框架.其官方链接为:PyG ...

  3. 使用Vite创建Vue3+TS项目并整合Element Plus框架等一条龙服务

    记录一下使用Vite创建Vue3+TS项目以及整合Element Plus框架,还有Less.Pinia.Vue-router.monaco-editor等插件或组件. 一.使用Vite创建Vue3+ ...

  4. Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城（SSM前后端分离项目）十六（商品排序，Thymeleaf快速入门，商品详情页的展示）

    Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息 这是用来做排序的,默认按照综合排序 ...

  5. GPS从入门到放弃（二十六） --- RTKLIB函数解析

    GPS从入门到放弃(二十六) - RTKLIB函数解析 为了贴合这个系列的标题"从入门到放弃",在入门之后现在就要放弃此方向了.虽然感觉遗憾,暂时也没有办法.在此附上此系列最后一篇 ...

  6. VUE3/TS/TSX入门手册指北

    VUE3入门手册 vue3入门 首先 查看 官方文档:https://cn.vuejs.org/guide/quick-start.html 如果有vue2基础,速成课程:https://www.zh ...

  7. UWP开发入门（十六）——常见的内存泄漏的原因

    原文:UWP开发入门(十六)--常见的内存泄漏的原因 本篇借鉴了同事翔哥的劳动成果,在巨人的肩膀上把稿子又念了一遍. 内存泄漏的概念我这里就不说了,之前<UWP开发入门(十三)--用Diagno ...

  8. [系统安全] 四十六.Powershell恶意代码检测系列 (1)Powershell基础入门及管道和变量的用法

    您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...

  9. Linux Shell脚本入门教程系列之（十六） Shell输入输出重定向

    本文是Linux Shell系列教程的第(十六)篇,更多Linux Shell教程请看:Linux Shell系列教程 Shell中的输出和输入的重定向是在使用中经常用到的一个功能,非常实用,今天就为 ...

最新文章

  1. 黄聪： bootstrap 多模态框实现
  2. 纪念一下第一次在开源项目上commit：好神奇啊！
  3. cocostudio 实现换行功能的label (文本区) lua
  4. .写一个方法 void printScore(int score)，输出相应的等级。score代表分数,等级格式如下：
  5. linux命令返回值的妙用
  6. CentOS永久修改主机名
  7. xxx系统的6大质量属性战术
  8. 《Web编程技术》学习笔记（一）
  9. 如何把avi转换为mp4？视频转换用嗨格式视频转换器
  10. 2的17次方java中表示什么,2的17次方(11的余数是多少)
  11. 使用Mockito创建Mcok和Spy
  12. linux增加swap空间的方法
  13. VMI - 供应商管理库存
  14. 如何使用vim来进行编辑文档和脚本
  15. Excel如何把同一列的内容拆分为两列？
  16. Docker使用docker-compose配合Makefile部署Nginx 挂载文件目录 实现视频图片html等静态资源的代理
  17. css 选取第一个标签元素
  18. matlab为long term visual tracking数据集生成groundtruth.txt
  19. SAP MM 无价值物料管理的一种实现思路
  20. MyEclipse Building Workspace问题

热门文章

  1. CSS3 vertical-align属性解决图片留白问题
  2. 分析了233部职场剧告诉你：国产职场剧为什么这么烂
  3. Windows触控手势
  4. DOS的建文件夹，移动图片，多级文件夹建立
  5. 链游新玩法：传奇4的感悟
  6. PowerBuilder 部署iis报错：IIS is not acessblee Please check the server address and port number.
  7. 创客匠人知识付费系统为教培机构拓宽变现渠道
  8. IntelliJ IDEA 项目相关的几个重要概念介绍
  9. 亚马逊运营知识：ASIN文案编写技巧
  10. picker多选 vant_Vant Picker 选择器