![](https://img-blog.csdnimg.cn/direct/cc85ad7135654c67b0ea2b3353467d1f.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 90
Vue2(选项式API)与Vue3(组合式API)
编程的一拳超人
清醒,知趣,明得失,知进退。
展开
-
基于Vue2与3版本的Element UI与Element Plus入门
Element UI 和 Element Plus 都支持自定义主题。你可以通过修改 SCSS 变量来定制主题,也可以使用在线主题生成工具来生成。原创 2024-05-22 08:45:53 · 513 阅读 · 0 评论 -
07-Vue编程式导航
程式导航,除了使用 `` 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。导航到不同的位置:**注意:在 Vue 实例中,你可以通过 `$router` 访问路由实例。因此你可以调用 `this.$router.push`。**想要导航到不同的 URL,可以使用 `router.push` 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退原创 2024-05-21 15:32:24 · 425 阅读 · 0 评论 -
06-Vue路由守卫
导航守卫(路由钩子函数)正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。全局前置守卫,你可以使用 `router.beforeEach` 注册一个全局前置守卫:原创 2024-05-21 15:28:54 · 1003 阅读 · 0 评论 -
05-Vue路由
我们接着上一篇文章04-Vue:ref获取页面节点–很简单来讲。用 Vue + Vue Router 创建单页应用非常简单:通过 Vue.js,我们已经用组件组成了我们的应用。当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子:首先使用导入npm包。原创 2024-05-21 15:26:08 · 902 阅读 · 0 评论 -
04-Vue:ref获取页面节点--很简单
在Vue中,通过 ref 属性获取DOM元素,我们当然可以使用JS原生的做法(document.getElementById)或者 jQuery 来获取DOM,但是这种做法却在无形中操作了DOM,在Vue框架中并不推荐这种做法。我们可以通过`ref`属性获取DOM元素。`ref`的英文单词是**reference**,表示**引用**。我们平时可以经常看到控制台会报错**referenceError**的错误,就和引用类型的数据有关。原创 2024-05-21 15:22:48 · 714 阅读 · 0 评论 -
03-02-Vue组件之间的传值
我们接着上一篇文章03-01-Vue组件的定义和注册来讲。父组件子组件互相传值原创 2024-05-21 15:18:23 · 918 阅读 · 0 评论 -
03-01-Vue组件的定义和注册
组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。### 模块化和组件化的区别- 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一- 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用原创 2024-05-21 15:12:18 · 280 阅读 · 0 评论 -
02-Vue实例的生命周期函数
我们接着上一篇文章01-05来讲。vue实例的生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期。生命周期钩子:就是生命周期事件的别名而已。生命周期钩子 = 生命周期函数 = 生命周期事件。原创 2024-05-21 15:10:08 · 925 阅读 · 0 评论 -
01-05.Vue自定义过滤器
Vue.js 允许我们自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache **插值表达式**、 **v-bind表达式**。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示。### 过滤器的基本使用比如说,我要将data中msg 后面添加字符串。可以这样做:(1)在差值表达式中这样调用:原创 2024-05-21 15:02:50 · 831 阅读 · 0 评论 -
01-04.Vue的使用示例:列表功能
完整的代码如下:代码分析:数据是存放在data的list中的,将data中的数据通过遍历给表格。上方代码运行的效果:如果list中没有数据,那么表格中就会只显示表头,这样显然不太好看。为此,我们需要增加一个判断:当数据为空时,显示提示。如下:代码解释:指的是让当前这个横跨4个单元格的位置。如下:具体实现步骤如下:(1)用户填写的数据单独存放在data属性里,并采用进行双向绑定。(2)用户把数据填好后,点击add按钮。此时需要增加一个点击事件的方法,将data中的数据放到list中(同时,清空文本框中的内原创 2024-05-21 14:58:44 · 701 阅读 · 0 评论 -
01-03.Vue:v-on的事件修饰符
`v-on` 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下:`.stop` 阻止冒泡。本质是调用 event.stopPropagation()。- `.prevent` 阻止默认事件(默认行为)。本质是调用 event.preventDefault()。- `.capture` 添加事件监听器时,使用捕获的方式(也就是说,事件采用捕获的方式,而不是采用冒泡的方式)。- `.self` 只有当事件在该元素本身(比如不是子元素)触发时,才会触发回调。- `.once` 事原创 2024-05-21 14:54:17 · 1105 阅读 · 0 评论 -
01-02.Vue的常用指令(二)
本文主要内容:v-model、v-for、v-if、v-show:重点:**双向数据绑定,只能用于表单元素,或者用于自定义组件**。之前的文章里,我们通过v-bind,给``标签绑定了`data`对象里的`name`属性。当`data`里的`name`的值发生改变时,``标签里的内容会自动更新。可我现在要做的是:我在``标签里修改内容,要求`data`里的`name`的值自动更新。从而实现双向数据绑定。该怎么做呢?这就可以利用`v-model`这个属性。原创 2024-05-21 14:50:59 · 1403 阅读 · 0 评论 -
01-01.Vue的插值表达式和常用指令(一)
在Vue的实例中,如果想要获取data里的属性、methods里面的方法,都要通过。原创 2024-05-21 14:44:34 · 725 阅读 · 0 评论 -
00-Vue的介绍和vue-cli
2013年底作为尤雨溪个人实验项目开始开发2014年2月公开发布。2014年11月发布0.11版本2016年10月发布2.0版本。Vue 本身并不是一个框架,Vue结合周边生态构成一个灵活的、渐进式的框架。Vue 以及大型 Vue 项目所需的周边技术,构成了生态。原创 2024-05-18 19:04:05 · 841 阅读 · 0 评论