【Vue框架】基础语法练习（1）
其实更多知识点已经在Vue.js官网十分清楚了，大家也可以去官网进行更细节的学习
https://cn.vuejs.org/
说明：目前最新是Vue3版本的，但是Vue2已经深得人心，所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API，而Vue2是选项式API。还有就是目前并没有使用npm、pnpm、yarn等构建工具创建Vue，而是使用全局构建版的 Vue
<script src="https://unpkg.com/vue@3"></script>目录
其实更多知识点已经在Vue.js官网十分清楚了，大家也可以去官网进行更细节的学习
1、基本用法
2、内容渲染
2.1 组合式
2.2 选项式
3、响应式
3.1 组合式
3.2 选项式
4、计算属性
5、属性绑定
6、JS表达式
7、条件渲染
8、事件绑定
9、列表渲染
10、双向绑定
11、双向绑定案例
1、基本用法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app">{{msg}}<h1>{{web.title}}</h1><h1>{{web.url}}</h1></div>
</body>
<script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive}=Vue //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const web=Vue.reactive({ //创建一个响应式的数据对象web，里面包含title和url两个属性title:"HNUCM",url:"www.hnucm.edu.cn"})//返回数据return{msg:"success",web}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script><script>//什么是解构：从一个数组或者对戏那个中把值提取出来赋给新的变量//数组解构const number=[1,2,3]const [one,two,three]=numberconsole.log(one,two,three)//对象解构const person={name:"fanhuling",age:20}const {name,age}=personconsole.log(name,age)//函数参数解构function introduce({name,age}){console.log(`My name is ${name},I am ${age} years old`)}introduce(person)</script></html>
2、内容渲染
2.1 组合式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><!-- 文本插值表达式 --><p>{{username}}</p><p>{{age}}</p><p>{{desc}}</p><!-- v-html指令 ：显示HTML内容 --><p v-html="desc"></p></div>
</body><script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive}=Vue //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const username="fanhuiling"const age=20const desc='<a href ="www.baidu.com">百度一下</a>'//返回数据return{username,age,desc}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script></html>2.2 选项式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><!-- 文本插值表达式 --><p>{{username}}</p><p>{{age}}</p><p>{{desc}}</p><!-- v-html指令 ：显示HTML内容 --><p v-html="desc"></p></div>
</body>
<script>const vm={data:function(){return{username:"fanhuiling",age:20,desc:'<a href="www.baidu.com">百度一下</a>'}}}const app=Vue.createApp(vm)app.mount('#app')
</script></html>
3、响应式
3.1 组合式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><button @click="incretement">增加</button><p>{{count}}</p><p>{{state.counter}}</p></div>
</body>
<script>const {createApp,reactive,ref}=Vue//ref 适用于基本类型（字符串、数字、布尔值）//reactive 适用于对象、数组等复合类型createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const count=ref(0)const state=ref({counter:0})//将ref 改为reactive后，counter会和count一起增加//箭头函数const incretement = ()=>{count.value++;state.counter++;}return{count,incretement,state}}}).mount('#app')//将Vue 应用程序挂载到app元素上</script></html>
3.2 选项式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><button onclick="incretement">增加</button><p>{{count}}</p></div>
</body>
<script>const vm={data:function(){//const count=Vue.ref(0)return{count:1} },methods: {incretement(){this.count++;} }}const app=Vue.createApp(vm)app.mount('#app')
</script></html>
4、计算属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><h1>{{add()}}</h1><h1>{{add()}}</h1><h1>{{sum}}</h1><h1>{{sum}}</h1></div>
</body>
<script>const {createApp,reactive,ref,computed}=Vue//ref 适用于基本类型（字符串、数字、布尔值）//reactive 适用于对象、数组等复合类型createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const data = reactive({x:10,y:20})//无缓存的方法const add=()=>{console.log("add")return data.x+data.y;}//有缓存的方法//计算属性：根据依赖响应式数据变化来决定是否重新计算const sum=computed(()=>{console.log("sum")return data.x+data.y})return {data,add,sum}}}).mount('#app')//将Vue 应用程序挂载到app元素上</script></html>
5、属性绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><div :style="{width:h,height:h,backgroundColor:bgc}"></div></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const w=ref('500px');const h=ref('500px');const bgc=ref('red');// 返回数据return {w,h,bgc}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html> 
6、JS表达式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><p>{{number+1}}</p><p>{{ok ?'True':'False'}}</p><!-- 翻转字符串：先以，分割为数组，数组翻转，然后在结合 --><p>{{msg.split('').reverse().join('')}}</p> <p :id="'list-'+id"></p><p>{{user.name}}</p></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const number=0;const ok=ref(true);const msg="ABC"const id=3const user={name:"fanhuiling"}return {number,ok,msg,id,user}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>
7、条件渲染
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><button @click="flag=!flag">开关</button><!-- v-if 当为false时，会从真实dom删除 --><p v-if="flag">请求成功，被v-if控制</p> <p v-show="flag">请求成功，被v-show控制</p><p v-if= "type === A">类型A</p><p v-else-if="type === B">类型B</p><p v-else>不是A和B</p></div>
</body><script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive,ref}=Vue //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const flag=ref(true)const type=ref("C")return{flag,type}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script></html>
8、事件绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><p>count的值为：{{count}}</p><button v-on:click="addCount">+1</button><button @click="addCount">+1</button></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const count=ref(0)const addCount=()=>{count.value++;}// 返回数据return {count,addCount}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>
9、列表渲染
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><!-- 添加数据 --><input type="text" v-model="name"/><button @click="addUser"> 添加</button><ul><li v-for="user in userlist">姓名：{{user.name}}</li><li v-for="user,index in userlist" :key="user.id"><input type="checkbox"/>索引：{{index}}姓名：{{user.name}}</li></ul></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const userlist=reactive([{id:1,name:"Tom"},{id:2,name:"Jerry"},{id:3,name:"mary"}])const nextId=ref(4)const name=ref('')const addUser=()=>{userlist.unshift({id:nextId.value,name:name.value})name.value="";nextId.value++;}// 返回数据return {userlist,nextId,name,addUser}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>
10、双向绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><input v-model="msg" placeholder="输入文本"/><p>{{msg}}</p></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const msg=ref(测试)// 返回数据return {msg}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html> 
11、双向绑定案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><h3>文本框：{{data.text}}</h3><h3>单选框：{{data.radio}}</h3><h3>复选框：{{data.checkbox}}</h3><h3>下拉框：{{data.select}}</h3><h3>记住密码：{{data.remember}}</h3><!-- 单向数据绑定时，数据发生变化视图会自动更新，但是手动修改input的值，数据不会自动更新 -->单向数据绑定：<input type="text" :value="data.text"/><br><!-- 双向数据绑定，当数据发生变化时，视图会自动更新，手动修改input的值，数据也会自更新 -->双向数据绑定：<input type="text" v-model="data.text"/><br><br><br><input type="radio" v-model="data.radio" value="1">听音乐<input type="radio" v-model="data.radio" value="2">写代码<br><br><input type="checkbox" v-model="data.checkbox" value="a">听音乐<input type="checkbox" v-model="data.checkbox" value="b">写代码<input type="checkbox" v-model="data.checkbox" value="c">刷B站<br><br><select v-model="select"><option value="" >请选择</option><option value="A" >听音乐</option><option value="B" >写代码</option><option value="C" >刷B站</option></select><br><br><input type="checkbox" v-model="data.remember">记住密码</div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const data=reactive({text:'fanhuiling' ,//文本框radio:"",checkbox:[],select:"",remember:false //单个复选框--功能是记住密码})// 返回数据return {data}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>
相关文章：
【Vue框架】基础语法练习（1）
其实更多知识点已经在Vue.js官网十分清楚了，大家也可以去官网进行更细节的学习 https://cn.vuejs.org/ 说明：目前最新是Vue3版本的，但是Vue2已经深得人心，所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API…...
开源一款基于 JAVA 的仓库管理系统,支持三方物流和厂内物流,包含 PDA 和 WEB 端的源码
大家好，我是一颗甜苞谷，今天分享一款基于 JAVA 的仓库管理系统,支持三方物流和厂内物流,包含 PDA 和 WEB 端的源码。 前言 在当前的物流仓储行业，企业面临着信息化升级的迫切需求，但往往受限于高昂的软件采购和维护成本。现有的…...
开源一套基于若依的wms仓库管理系统，支持lodop和网页打印入库单、出库单的源码
大家好，我是一颗甜苞谷，今天分享一款基于若依的wms仓库管理系统，支持lodop和网页打印入库单、出库单的源码。 前言 在当今快速发展的商业环境中，库存管理对于企业来说至关重要。然而，许多企业仍然依赖于传统的、手动…...
HTML+JavaScript案例分享： 打造经典俄罗斯方块，详解实现全过程
在本文中，我们将深入探讨如何使用 JavaScript 实现经典的俄罗斯方块游戏。俄罗斯方块是一款广为人知的益智游戏，通过操纵各种形状的方块，使其在游戏区域内排列整齐，以消除完整的行来获得分数。 效果图如下： 一、游戏界面与布局 我们首先使用 HTML 和 CSS 来创建游戏的界面…...
【网页布局技术】项目五 使用CSS设置导航栏
《CSSDIV网页样式与布局案例教程》 徐琴 目录 任务一 制作简单纵向导航栏支撑知识点1．合理利用display:block属性2．利用margin-bottom设置间隔效果3．利用border设置特殊边框 任务二 制作简单横向导航栏任务三 制作带图片效果的横向导航栏任务…...
自学网络安全，网络安全入门学习路线，收藏这篇就够了
在当今高度数字化的时代，网络安全已经成为了一个至关重要的领域。随着网络威胁的不断演变和增长，对于专业网络安全人才的需求也在急剧上升。对于那些对网络安全充满热情并且渴望自学成才的人来说，制定一个系统、全面且高效的学习路线和规划是…...
React Query已过时？新一代请求工具横空出世
大家好！今天我想和你们聊聊一个让我兴奋不已的话题 —— 分页列表请求策略。你们知道吗？这个策略真的帮了我大忙！它不仅让我的代码更简洁，还大大提升了用户体验。说实话，每次用到这个功能，我都忍不住赞叹。…...
视频怎么进行格式转换？6款视频转换MP4格式的免费软件！
在数字时代，视频格式的多样性为我们提供了丰富的观看和编辑选择，但同时也带来了格式不兼容的困扰：MOV、AVI、WMV、MKV……这些格式多多少少都会遇到因不兼容而无法播放或下载分享的场景。当你想要将视频文件从一种格式转换为另一种格式&#…...
智能文档处理平台：免费体验智能化医疗信息提取
前提：医疗行业信息碎片化问题普遍，手工数据录入效率低且易错，导致数据管理难度大。本系统可帮助医疗机构在信息管理上迈向智能化，优化流程并提升效率。 系统概述： 思通数科推出的智能文档处理系统，专为解…...
Java 中 InputStream 的使用：try-with-resources 与传统方式的比较
在 Java 中，处理输入输出流时，确保资源的正确管理至关重要。特别是 InputStream 这样的流，一旦使用完成，必须正确关闭以释放资源。本文将对两种常见的资源管理方式进行比较：try-with-resources 语句和传统的 try-catch…...
【MATLAB源码-第271期】基于matlab的雷达发射回波模拟，包括匹配滤波，加窗旁瓣控制，以及MTD处理。
操作环境： MATLAB 2022a 1、算法描述 雷达系统是一种广泛应用于目标探测和跟踪的技术，其核心在于发射电磁波并分析返回信号。本文将探讨雷达发射波形、回波信号的模拟、匹配滤波的过程、加窗控制旁瓣的策略以及慢时间MTD处理的整体系统框架。 一、雷…...
Linux系统编程——信号量
一、信号量的定义和原理 1、概念 原子操作：不可中断的一个或者一系列的操作，即一件事要么做要么不做。临界资源：不同进程能够看到的一份公共资源，一次只能被一个进程使用。PV操作：由于信号量只能进行两种操作等待和发…...
Oracle索引问题汇总
一、oracle 数据库TIMESTAMP 时间字段，设置索引后，通过该字段进行排序，索引排序不生效问题 1. 记录下在工作中遇到的一次索引问题 问题描述： 数据库：oracle； 日志记录表中的一个创建时间（create…...
基于QT用工厂模式实现串口通信与网络通信激光器的控制
配置文件网络配置：ＩＰ＋Ｐｏｒｔ 串口配置：端口号＋波特率 首先，我们需要创建一个配置文件 config.ini，内容如下： [SerialLaser] portName = COM1 baudRate = 9600[NetworkLaser] ipAddress = 192.168.1.1 port = 1234两类激光器的实现： #include <QCoreApplicat…...
【代码随想录Day58】图论Part09
dijkstra（堆优化版）精讲 题目链接/文章讲解：代码随想录 import java.util.*;class Edge {int to; // 邻接顶点int val; // 边的权重Edge(int to, int val) {this.to to;this.val val;} }class Pair<U, V> {public final U first; …...
_或者%关键字模糊匹配查出所有数据
1、问题 sql模糊匹配，如果页面输入_或者%，可以查出所有数据。 (1) SELECT * FROM test WHERE sfsc N and zdzwm like %%% (2) SELECT * FROM test WHERE sfsc N and zdzwm like %_% 2、解决方案 （1）mysql数据库 加转义字…...
【Python】转换得到图片的rgb565格式数据
使用方法：首先在代码同级目录创建input_images文件夹，然后将需要转换的图片放进去。 然后根据你的需要，修改代码最下面的crop_size、resize以及file_name。 最后点击运行，即可得到图片的rgb565格式数据 from PIL import Image, I…...
隨筆 20241024 Kafka中的ISR列表：分区副本的族谱
在分布式系统中，数据的一致性和可靠性至关重要。Apache Kafka作为一个强大的流处理平台，利用其分区和副本机制来确保这些特性。在Kafka中，ISR（In-Sync Replicas）列表是一个关键概念，它用来追踪与领导者副本…...
【python】爬虫
下载与批量下载 import requests #第三方库，没有下载的下载一下 pip install requests#爬虫下载图片 resrequests.get("url") print(res.content)#二进制字节流#写文件 with open("beauty.jpg","wb")as f:f.write(res.content)#批量…...
大语言模型数据类型与环境安装(llama3模型)
文章目录 前言一、代码获取一、环境安装二、大语言模型数据类型1、基本文本指令数据类型2、数学指令数据类型3、几何图形指令数据类型4、多模态指令数据类型5、翻译指令数据类型三、vscode配置四、相关知识内容1、理解softmax内容2、torch相关函数nn.Embedding函数torch.nn.fun…...
Python 3.7 + XGBoost 多分类实战：从数据清洗到SHAP模型解释的保姆级教程
Python 3.7 XGBoost 多分类实战：从数据清洗到SHAP模型解释的保姆级教程在机器学习领域，XGBoost因其出色的性能和可解释性成为众多数据科学家的首选工具。本文将带您完整走过多分类任务的全流程，从原始数据到可解释的预测模型，每个…...
D3KeyHelper：暗黑3玩家的智能按键助手，告别重复操作疲劳
D3KeyHelper：暗黑3玩家的智能按键助手，告别重复操作疲劳 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面，可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 你是否曾在《暗黑破坏…...
从社交关系到分子结构：图解GCN（图卷积网络）到底在‘看’什么？
从社交关系到分子结构：图解GCN（图卷积网络）到底在‘看’什么？想象一下，你刚搬到一个新社区，想快速了解周围的邻居。最直接的方式是什么？不是挨家挨户敲门，而是通过社区活动认识几位关…...
别再死磕USB HID了！用ESP32的Arduino框架手把手教你实现蓝牙鼠标键盘（附完整代码）
ESP32蓝牙HID实战：零基础打造自定义键盘鼠标 手里那块吃灰的ESP32开发板终于能派上用场了！上周我用它做了个无线演示控制器，在会议室里走着就能翻PPT，同事们都问是怎么实现的。其实秘诀就在于ESP32的蓝牙HID功能——不需要任何USB…...
3分钟搞定专业短视频！Pixelle-Video终极AI创作指南
3分钟搞定专业短视频！Pixelle-Video终极AI创作指南 【免费下载链接】Pixelle-Video 🚀 AI 全自动短视频引擎 | AI Fully Automated Short Video Engine 项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video 还在为视频制作发愁吗&am…...
Unlock-Music：浏览器中一键解锁加密音乐文件的完整指南
Unlock-Music：浏览器中一键解锁加密音乐文件的完整指南 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库： 1. https://github.com/unlock-music/unlock-music ；2. https://git.unlock-music.dev/um/web 项目地址: http…...
ZYNQ中断避坑指南：PL端信号线如何正确‘连线’到PS端处理函数？
ZYNQ中断系统深度解析：从硬件信号到软件响应的全链路实践 在嵌入式系统开发中，中断处理是实时响应的核心机制。对于ZYNQ这种集成了ARM处理器(PS)和可编程逻辑(PL)的异构计算平台，其中断系统既有传统处理器的特性，又具备FPGA灵活定…...
Arduino土壤湿度监测仪制作：从传感器原理到自动灌溉实现
1. 项目概述：用Arduino Uno和LCD屏打造你的土壤湿度监测仪作为一个喜欢在阳台种点番茄、辣椒的业余园丁，我经常为浇水这事儿头疼。浇多了怕烂根，浇少了又怕旱着，光靠手指插土里感觉，实在是不准。后来玩上了Arduino&…...
AI 如何改变软件工程：Martin Fowler 视角 + 实战洞见
AI 如何改变软件工程：Martin Fowler 视角 实战洞见 AI（尤其是 LLM）是软件工程自高级语言（从汇编到 C/Fortran）以来最大的转变。它引入了非确定性（Non-deterministic）编程，改变了从编…...
白嫖Codex！一行代码不花接入国产DeepSeek-v4-pro，从此告别ChatGPT月费
Codex 如何接入国产模型 DeepSeek-v4-pro 保姆级教程 使用 Claude Code、Codex 已经好几个月了，不得不感叹现在的 AI 工具真的太强大了。目前市面上很多 Claude Code 如何接入大模型的教程，但 Codex 却比较少，一方面因为 Codex 需要 ChatGPT …...