带参数的动态路由
路由参数匹配 在components文件夹下创建一个UserPage.vue的文件用以编写用户中心组件，直接通过解析路由中的参数来显示当前用户的昵称和编号 123456789<template> <h1>姓名：{{$route.params.username}}</h1> <h2>id：{{$route.params.id}}</h2></template><script> export default { };</script> 如上所示，在组件内部可以使用$route属性获取全局路由对象，而路由定义的参数可以在此对象的params属性中获取 在根目录下的main.js 中编写： 123456789101112131415161718192021222324import { createApp } from 'vue&#x...
过渡动画
基本用法 Vue过渡动画的核心原理依然是采用CSS类来实现的，只是Vue帮助我们在组件的不同生命周期自动切换不同的CSS类。 Vue中默认提供了一个名为transition的内置组件，可以用其来包装要展示过渡动画的组件。 transition组件的name属性用来设置要执行的动画名称，Vue中约定了一系列CSS类名规则来定义各个过渡过程中的组件状态。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 <style> .ani-enter-from { width: 0px; height: 0px; background-color: red; } .ani-enter-active { animation: keyframe-in 3s; } .ani-ent...
Teleport的使用
Teleport可以把组件的某一部分 DOM 渲染到 Vue 组件树之外的任意指定位置，而逻辑（状态、事件）仍保留在原组件内部。 这个特性非常适用于模态框、弹出框等需要在页面特定位置显示的组件。 1234567891011121314151617181920212223242526272829303132333435363738<div id="Application"> <div style="position: absolute; width: 50px;"> <my-alert></my-alert> </div></div><script>const App = Vue.createApp({})App.component("my-alert", { template: ` <div> <button @click="show = true&quo...
Mixin技术
基本用法 通过Mixin技术，组件的复用性可以得到进一步的提高： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546<body> <div id="Application"> <my-com1 title="组件1"></my-com1> <my-com2 title="组件2"></my-com2> <my-com3 title="组件3"></my-com3> </div> <script> const App = Vue.createApp({}); const com1 = { props: ['title'], template: ` &l...
数据注入
所谓数据注入，是指父组件可以向其所有子组件提供数据，不论在层级结构上此子组件的层级有多深。 实现数据注入需要使用组件的provide与inject两个配置项，提供数据的父组件需要设置provide配置项来提供数据，子组件需要设置inject配置项来获取数据。 123456789101112131415161718192021222324252627282930313233343536373839404142434445<body> <div id="Application"> <my-list :count="5"> </my-list> </div> <script> const App = Vue.createApp({}) const listCom = { props:{ count: Num...
组件的高级配置(应用的全局配置选项)
当调用Vue.createApp方法后，会创建一个Vue应用实例，对于此应用实例，其内部封装了一个config对象，我们可以通过这个对象的一些全局选项来对其进行配置。常用的配置项有异常与警告捕获配置和全局属性配置。 异常和警告，使用自定义的函数来对抛出的异常和警告进行处理： 1234567891011const App = Vue.createApp({})App.config.errorHandler = (err, vm, info) => { // 捕获运行中产生的异常 // err参数是错误对象,info为具体的错误信息}App.config.warnHandler = (msg, vm, trace) => { // 捕获运行中产生的警告 // msg是警告信息,trace是组件的关系回溯} 通过globalProperties全局属性对象进行配置： 12345678910111213const App = Vue.createApp({})/...
自定义组件的插槽
插槽是指HTML起始标签与结束标签中间的部分，通常在使用div标签时，其内部的插槽位置既可以放置要显示的文案，又可以嵌套放置其他标签，例如： 1234<div>文案部分</div><div> <button>按钮</button></div> 插槽的核心作用是将组件内部的元素抽离到外部进行实现，在进行自定义组件的设计时，良好的插槽逻辑可以使组件的使用更加灵活。 基本用法12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...
组件中数据与事件的传递
基本用法 当我们创建好了Vue应用实例后，使用mount方法可以将其绑定到指定的HTML元素上。应用实例可以使用component方法来定义组件，定义好组件后，可以直接在HTML文档中进行使用。 自定义警告提示框： 123456789101112131415161718192021<script> const App = Vue.createApp({}) const alertComponent = { data() { return { msg: "警告框提示", count: 0 } }, methods: { click() { alert(this.msg + this.count++) } }, template: `<div><button @click="click&quo...
TRAE meetup @Guangzhou
开场 1.40 p.m.到达会场，领取物资，签名，并找位置坐下后，暖场活动就开始了 暖场活动大概持续20分钟，内容是每个人给自己的职业想3个标签（不剧透），然后让一位在台下的观众猜一下，猜对了各奖励一个抱枕 2.00 p.m. 活动正式开始，活动主线为4场讲座+茶歇 如何与AI（高潜实习生）协作 协作方法论： 明确任务边界，把模糊的需求转化为清晰的PRD 提供结构化的输入，以及必要的上下文信息 建立质量兜底制度，随时准备好接手补位 Context Engineering(上下文工程)高质量的输出，源于高质量的上下文输入 茶歇 合照
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment