- VueRouter_路由元信息有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, childre... VueRouter_路由元信息有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, childre...
- VueRouter_导航守卫导航：路由正在发生变化。导航守卫主要用来通过跳转或取消的方式守卫导航。导航守卫被分成三种：全局的、单个路由独享的、组件内的。 全局守卫是指路由实例上直接操作的钩子函数，触发路由就会触发这些钩子函数。vue-router全局有三个守卫router.beforeEach ：全局前置守卫，进入路由之前router.beforeResolve ：全局解析守卫，在befo... VueRouter_导航守卫导航：路由正在发生变化。导航守卫主要用来通过跳转或取消的方式守卫导航。导航守卫被分成三种：全局的、单个路由独享的、组件内的。 全局守卫是指路由实例上直接操作的钩子函数，触发路由就会触发这些钩子函数。vue-router全局有三个守卫router.beforeEach ：全局前置守卫，进入路由之前router.beforeResolve ：全局解析守卫，在befo...
- 过渡效果在交互体验中的重要性不言而喻。以往我们使用jQuery添加或移除元素的类，搭配CSS中定义好的样式，再引用一些JavaScript库之后，可以做出非常复杂、惊艳的动态效果，不过这一套方法仍略显烦琐。Vue.js内置了一套过渡系统，可以在元素从 DOM中插入或移除时自动应用过渡效果。Vue.,js会在适当的时机触发CSS 过渡或动画，用户也可以提供相应的JavaScript钩子函数在... 过渡效果在交互体验中的重要性不言而喻。以往我们使用jQuery添加或移除元素的类，搭配CSS中定义好的样式，再引用一些JavaScript库之后，可以做出非常复杂、惊艳的动态效果，不过这一套方法仍略显烦琐。Vue.js内置了一套过渡系统，可以在元素从 DOM中插入或移除时自动应用过渡效果。Vue.,js会在适当的时机触发CSS 过渡或动画，用户也可以提供相应的JavaScript钩子函数在...
- v-model是vue的标志性语法之一。你知道为了让我们写着爽，尤老祖做了哪些脏活儿吗？不看不知道，一看就知道。 v-model是vue的标志性语法之一。你知道为了让我们写着爽，尤老祖做了哪些脏活儿吗？不看不知道，一看就知道。
- VueRouter_编程式的导航通过在 Vue 根实例的 router 配置传入 router 实例，$router、 $route 两个属性会被注入到每个子组件。 $router路由实例对象。除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例 方法，通过编写代码来实现。 $router.push想要导航到不同的 URL，则使用 rou... VueRouter_编程式的导航通过在 Vue 根实例的 router 配置传入 router 实例，$router、 $route 两个属性会被注入到每个子组件。 $router路由实例对象。除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例 方法，通过编写代码来实现。 $router.push想要导航到不同的 URL，则使用 rou...
- 关于class和style我们并不陌生，这个在学习css的时候就是家常便饭了，操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们，只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还... 关于class和style我们并不陌生，这个在学习css的时候就是家常便饭了，操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们，只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还...
- hash模式vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 history 模式如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 在路由配置中设置：VueRouter({... hash模式vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 history 模式如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 在路由配置中设置：VueRouter({...
- VueRouter_基础 什么是路由？路由是根据不同的url地址展现不同的内容或页面。 早期的路由都是后端直接根据url来重载页面实现的，即后端控制路由。 后来页面越来越复杂，服务器压力越来越大，随着ajax（异步刷新技术）的出现，页面的实现非重载就能刷新数据，让前端也可以控制url自行管理，前端路由由此而生。Vue路由是指根据url分配到对应的处理程序；作用就是解析URL，调用对应的控制... VueRouter_基础 什么是路由？路由是根据不同的url地址展现不同的内容或页面。 早期的路由都是后端直接根据url来重载页面实现的，即后端控制路由。 后来页面越来越复杂，服务器压力越来越大，随着ajax（异步刷新技术）的出现，页面的实现非重载就能刷新数据，让前端也可以控制url自行管理，前端路由由此而生。Vue路由是指根据url分配到对应的处理程序；作用就是解析URL，调用对应的控制...
- 过渡_多元素过渡当切换展示的元素标签名相同时，需要给每一个元素设置不同的key值，否则Vue为了效率只会替换相同标签内部的内容。<transition> <div v-if="show" key="world">hello world</div> <div v-else key="shanshan">hello shanshan</div></transition>在一些场景中，可以通... 过渡_多元素过渡当切换展示的元素标签名相同时，需要给每一个元素设置不同的key值，否则Vue为了效率只会替换相同标签内部的内容。<transition> <div v-if="show" key="world">hello world</div> <div v-else key="shanshan">hello shanshan</div></transition>在一些场景中，可以通...
- 同时使用过渡和动画可使用 type 属性，来声明需要 Vue 监听的类型，type值可为 animation 或 transition 。当不设置type时，默认会取 transitioned 和 animationed 两者更长的为结束时刻。 显性的过渡时间在一些情况下，Vue可以自动得出过渡效果的完成时机，从而对dom进行处理。但是有些时候，我们会设置一系列的过渡效果，例如嵌套元素也有... 同时使用过渡和动画可使用 type 属性，来声明需要 Vue 监听的类型，type值可为 animation 或 transition 。当不设置type时，默认会取 transitioned 和 animationed 两者更长的为结束时刻。 显性的过渡时间在一些情况下，Vue可以自动得出过渡效果的完成时机，从而对dom进行处理。但是有些时候，我们会设置一系列的过渡效果，例如嵌套元素也有...
- 过渡_单元素过渡Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 单元素/组件的过渡Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点 过渡的类名在进入/离开的过渡中，会有 6 个 class 切换。v-enter： 定义进入过渡的开始... 过渡_单元素过渡Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 单元素/组件的过渡Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点 过渡的类名在进入/离开的过渡中，会有 6 个 class 切换。v-enter： 定义进入过渡的开始...
- 创建 Vue 应用vue的安装有多种方式，本文只讨论基础知识，其他安装方式请自行查阅官网https://v3.cn.vuejs.org/guide/installation.html本文使用CDN。创建一个名为的文件夹 vue3-baseindex.html 在“vue3-base”里面app.js 在“vue3-base”里面 创建 HTML 文件创建应用程序文件夹和文件后，打开inde... 创建 Vue 应用vue的安装有多种方式，本文只讨论基础知识，其他安装方式请自行查阅官网https://v3.cn.vuejs.org/guide/installation.html本文使用CDN。创建一个名为的文件夹 vue3-baseindex.html 在“vue3-base”里面app.js 在“vue3-base”里面 创建 HTML 文件创建应用程序文件夹和文件后，打开inde...
- JSX在Vue中使用JSX语法。可以让我们回到更接近模板的语法上。render () { return ( <h1>这是一个标题</h1> )} 插值<div>{ this.value }</div> 指令在JSX中，一些指令并不存在，所以我们可以换一种方式来处理。 v-text<div domPropsTextContent="<p>i am a p</p>"></div> v... JSX在Vue中使用JSX语法。可以让我们回到更接近模板的语法上。render () { return ( <h1>这是一个标题</h1> )} 插值<div>{ this.value }</div> 指令在JSX中，一些指令并不存在，所以我们可以换一种方式来处理。 v-text<div domPropsTextContent="<p>i am a p</p>"></div> v...
- createElement参数createElement接收的参数：createElement(标签名(必需), 与模板中属性对应的数据对象(可选), 子级虚拟节点(可选)); 深入数据对象{ // 与 `v-bind:class` 的 API 相同，接受一个字符串、对象或字符串和对象组成的数组 class: { foo: true, bar: false }, // ... createElement参数createElement接收的参数：createElement(标签名(必需), 与模板中属性对应的数据对象(可选), 子级虚拟节点(可选)); 深入数据对象{ // 与 `v-bind:class` 的 API 相同，接受一个字符串、对象或字符串和对象组成的数组 class: { foo: true, bar: false }, // ...
- 渲染函数 基础当我们需要使用JavaScript的编程能力时，可以利用渲染函数。渲染函数比模板更接近于编译器。例如，我们想要生成一些标题：<h1>Hello world!</h1>如果，我们按照之前的方式，那么模板内将会十分冗余。如果此时利用渲染函数，那么代码写起来将会简洁很多。props: { level: { type: Number, required: true }... 渲染函数 基础当我们需要使用JavaScript的编程能力时，可以利用渲染函数。渲染函数比模板更接近于编译器。例如，我们想要生成一些标题：<h1>Hello world!</h1>如果，我们按照之前的方式，那么模板内将会十分冗余。如果此时利用渲染函数，那么代码写起来将会简洁很多。props: { level: { type: Number, required: true }...
上滑加载中
推荐直播
-
华为云码道Agent集成与鸿蒙实战2026/08/11 周二 19:00-21:00
王一男-华为云码道产品规划专家；李炎-华为云码道产品专家；彭江敏-华为云鸿蒙端云一体化开发专家
本次直播带你解读华为云码道7月份产品新特性、新功能。更有专家演示码道Agent Space × 钉钉机器集成实战，从0到1打通消息通道；码道鸿蒙端云一体化实战，快速搭建员工签到系统。
回顾中 -
华为云开发者AI素养直播课·第五期2026/09/04 周五 16:00-18:00
林华鼎-华为云AI开发者运营负责人；蒋春阳-华为云AI开发者案例开发专家
本期直播内容： AI工具体验营 · 第5-8课连讲。Agent-Team 多智能体协作完成毕业设计实践
回顾中 -
华为云开发者AI素养ClassRoom·第六期2026/09/08 周二 19:00-20:00
樊渊-2026华为软件挑战赛冠军
高手来了：看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签