Vue_Study入门四

本文涉及的产品
实时计算 Flink 版,5000CU*H 3个月
检索分析服务 Elasticsearch 版,2核4GB开发者规格 1个月
实时数仓Hologres,5000CU*H 100GB 3个月
简介: Get新知识: vue 过滤器vue 的过滤器可以实现对数据进行指定格式处理后返回数据,实现过滤的效果。过滤器的定义也分全局过滤器 和 局部过滤器,定义方式也和自定义指令的定义的形式类似,一般情况如下全局过滤器:局部过滤器:过滤器的使用。可以使用在 插值表达式 和 属性绑定中,并且支持级联过滤。 vue 生命周期vue 的生命周期一由 挂载, 更新,销毁 三个周期组成。以下是在 vue 生...

Get新知识:

vue 过滤器

vue 的过滤器可以实现对数据进行指定格式处理后返回数据,实现过滤的效果。过滤器的定义也分全局过滤器 和 局部过滤器,定义方式也和自定义指令的定义的形式类似,一般情况如下
全局过滤器:
image.png

局部过滤器:
image.png

过滤器的使用。可以使用在 插值表达式 和 属性绑定中,并且支持级联过滤。
image.png

vue 生命周期

vue 的生命周期一由 挂载, 更新,销毁 三个周期组成。
以下是在 vue 生命周期中可以调用的钩子函数,一般常用的是created,mounted 函数,created是在浏览器渲染前 即dom还未形成时执行的函数,一般用于此时请求后台接口数据。mounted 函数是在浏览器渲染完成,dom已经形成时执行的函数,一般用于将数据填充到页面。
image.png

vue 组件注册

组件化思想,将一个复杂的问题分解成多个容易处理的小问题,再由多个小问题的解释组装成大问题最终解。
组件化开发 是 vue 开发的基本概念之一,一个完整的页面可以分成很多个组件,每个组件都用于实现页面的一个功能块,而每一个组件又可以进一步细分,在后期分组件维护管理,使得维护管理变得更加容易。这就是组件化开发,

组件注册对象:
一般可以通过vue.component 方法来注册全局组件,也可以通过 先构造组件构造器 通过vue.extend 方法来构造,然后 再调用 vue.component 方法注册组件。

vue 组件注册注意事项:
使用范围上是 一定需要挂载在 某个 vue 实例下,但组件分为全局组件 和 局部组件,全局组件 可以 在任意vue 实例下挂载,局部组件只能在对应的vue 实例下 挂载。
全局组件 使用 vue.component 方法来注册
image.png

局部组件在 vue对象 下的component 属性下注册
image.png

组件的命名,一般分为 短横线 和 驼峰命名两种方式,以及命名的注意点:
image.png

目录
相关文章
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
20天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
22天前
|
JavaScript API 开发者
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
52 1
|
8天前
|
JavaScript 前端开发 C#
从入门到放弃,我们为何从 Blazor 回到 Vue
【10月更文挑战第29天】在前端开发中,许多开发者从尝试新技术 Blazor 最终回到熟悉的 Vue。主要原因包括:1) Blazor 学习曲线陡峭,Vue 上手容易;2) Vue 开发工具成熟,开发效率高;3) Vue 性能优异,优化简单;4) Vue 社区庞大,生态丰富;5) 项目需求和团队协作更适配 Vue。选择技术栈需综合考虑多方面因素。
|
29天前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
47 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
29天前
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
84 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
|
3月前
|
缓存 监控 JavaScript
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
该文章是《vue从安装到熟练 2022流畅无痛版》系列的第一季入门篇,介绍了Vue的基本概念、环境配置、项目创建与运行,并通过修改HelloWorld.vue和App.vue文件内容展示了如何在页面上显示"Hello World",最后还提供了Vue官方文档链接和介绍了Vue的常用内置指令和模板语法等基础知识。
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
|
3月前
|
JavaScript 前端开发
vue入门
vue入门
28 2
vue入门
|
6月前
|
JavaScript 开发者 UED
Vue入门到关门之第三方框架elementui
ElementUI是一个基于Vue.js的组件库,包含丰富的UI组件如按钮、表格,强调易用性、响应式设计和可自定义主题。适用于快速构建现代化Web应用。官网:[Element.eleme.cn](https://element.eleme.cn/#/zh-CN)。安装使用时,需在项目中导入ElementUI和其样式文件。
56 0
|
3月前
|
JavaScript 前端开发 API
Vue3入门
Vue3入门
30 0