-
什么是状态管理模式
所属栏目:[教程] 日期:2023-04-19 热度:5839
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
什么是状态管理模式
让我们从一个简单的 Vue 计数应用[详细] -
VueRouter 重定向到路由地址
所属栏目:[教程] 日期:2023-04-19 热度:508
重定向也是通过 routes 配置来完成,可以配置路由重定向到具体路由地址、具名路由或者动态返回重定向目标。
重定向到路由地址
通过属性 redirect 指定重定向的路由地址:
const router = new VueRouter({[详细] -
VueRouter 默认视图
所属栏目:[教程] 日期:2023-04-19 热度:7293
在之前的小节中,我们学习了如何使用 <router-view/> 来承载路由分发的内容。我们并没有给 <router-view/> 指定一个 name 属性,实际上他有一个默认的属性 default,我们以一个简单的实例来验证这一点:
<!DOCTYP[详细] -
VueRouter编程式导航跳转命名路由
所属栏目:[教程] 日期:2023-04-19 热度:2818
如何使用 VueRouter 命名路由。包括如何定义命名路由、如何使用路由名实现路由跳转。本节的学习内容相对简单,并对小节中的案例自己实现一遍就可以熟练掌握了。
定义路由名
在之前的小节中,我们学习了如何定义[详细] -
VueRouter 编程式导航
所属栏目:[教程] 日期:2023-04-19 热度:5294
在之前的小节中,我们的路由跳转是通过标签 <router-link> 来完成的。但有时候,我们可能需要通过一个普通的 onClick 事件来完成跳转。router.push 就可以帮我们实现这一点。
基本用法
让我们来看一个简单的示例[详细] -
VueRouter 配置嵌套路由
所属栏目:[教程] 日期:2023-04-18 热度:2330
实际项目中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:
/article/vue /article/react
+------------------+ [详细] -
VueRouter 基础使用
所属栏目:[教程] 日期:2023-04-18 热度:8424
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
VueRouter 是 SPA(单页应用)的路径管理器,它允许我们通过不同的 URL 访问不同的内容。
NPM 或 Yarn[详细] -
Vue 渲染函数介绍
所属栏目:[教程] 日期:2023-04-18 热度:4022
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。
让我们用一个简单的例子来学习,这个例子里 rend[详细] -
Vue 插件浅析
所属栏目:[教程] 日期:2023-04-18 热度:676
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制,一般有下面几种:
添加全局方法或者属性。如: vue-custom-element。
添加全局资源:指令 / 过滤器 / 过渡等。如 vue-touch。
通过全局混入来添[详细] -
Vue 定义过滤器
所属栏目:[教程] 日期:2023-04-18 热度:8504
Vue 过滤器有全局注册和局部注册两种方式。全局注册的过滤器可以在项目中的所有组件中使用,局部注册的过滤器只能在当前组件内部使用。
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。过滤器应该被添加在[详细] -
Vue 注册自定义指令
所属栏目:[教程] 日期:2023-04-18 热度:9093
Vue 自定义指令和组件一样存在着全局注册和局部注册两种方式。全局注册的自定义指令可以在项目中的所有组件中使用,局部注册的指令只能在当前组件内部使用。接下来我们分步介绍全局指令和局部指令的注册方式。
全[详细] -
Vue 混入 Mixins介绍
所属栏目:[教程] 日期:2023-04-18 热度:8914
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被 “混合” 进入该组件本身的选项。
我们在[详细] -
Vue动态组件如何使用
所属栏目:[教程] 日期:2023-04-18 热度:4007
动态组件是让多个组件使用同一个挂载点,并动态切换。动态组件是 Vue 的一个高级用法,但其实它的使用非常简单。keep-alive 是 vue 的内置组件,能在组件切换过程中将状态保存在内存中,防止重复渲染 DOM。
动态组[详细] -
Vue 组件间通信分析
所属栏目:[教程] 日期:2023-04-18 热度:4563
组件是 vue 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。我们需要使用特定的方式来实现组件间的数据通信,接下来让我们一个个介绍这几种类别的组件通信是如何实现[详细]
-
Vue 插槽的使用
所属栏目:[教程] 日期:2023-04-18 热度:6466
Vue 实现了一套内容分发的 API,将 元素作为承载分发内容的出口。
<slot>元素作为承载分发内容的出口,可以理解为一个占位符,或者说是子组件暴露的一个让父组件传入自定义内容的接口。插槽内可以包含任何模板代码[详细] -
Vue生命周期流程
所属栏目:[教程] 日期:2023-04-18 热度:3716
每个 Vue 实例在被创建时都要经过一系列的初始化过程 —— 例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了[详细]
-
Vue 过渡
所属栏目:[教程] 日期:2023-04-18 热度:9580
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。
包括以下工具:
1、在 CSS 过渡和动画中自动应用 class;
2、配合使用第三方 CSS 动画库,如 Animate.css;
3、在过渡钩子函数中使用 Jav[详细] -
Vue 数据双向绑定
所属栏目:[教程] 日期:2023-04-18 热度:3702
用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端[详细]
-
Vue 事件处理方法
所属栏目:[教程] 日期:2023-04-18 热度:4945
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
使用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
监听点击事件,并在触发时运行一些 JavaScript 代码
<!DOCTYPE [详细] -
Vue侦听属性
所属栏目:[教程] 日期:2023-04-18 热度:5959
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。
侦听器 watch 是 Vue 提供的一种用来观察和响应 Vue 实例上的数据变化的属性。当被侦听的数据发生变化时,会触发对应的侦听函数。[详细] -
Vue 动态样式绑定分析
所属栏目:[教程] 日期:2023-04-18 热度:3786
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 clas[详细]
-
Vue常用指令介绍
所属栏目:[教程] 日期:2023-04-18 热度:9969
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用[详细]
-
创建 Vue 实例
所属栏目:[教程] 日期:2023-04-18 热度:9321
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。
Vue 实例是通过 Vue 函数传入对应 options 参数创建出的一个实例对象。
创建 Vue 实例
Vue 实例的创建是通过 new Vue(options) 来实现的,[详细] -
VueRouter 路由重定向
所属栏目:[教程] 日期:2023-04-18 热度:199
重定向也是通过 routes 配置来完成,可以配置路由重定向到具体路由地址、具名路由或者动态返回重定向目标。
重定向到路由地址
通过属性 redirect 指定重定向的路由地址:
const router = new VueRouter({[详细] -
Vant 主题定制方法
所属栏目:[教程] 日期:2023-04-18 热度:4882
Vant 提供了一套默认主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换主题色或者其他样式,可以使用下面提供的方法。
示例工程
我们提供了一个基于 Vue Cli 3 的示例工程,仓库地址为 Vant[详细]