Vue_Study入门三

本文涉及的产品
实时计算 Flink 版,5000CU*H 3个月
检索分析服务 Elasticsearch 版,2核4GB开发者规格 1个月
实时数仓Hologres,5000CU*H 100GB 3个月
简介: Get新知识: vue 表单域修饰符vue 提供了 number trim 和 lazy 三种表单修饰符,其中number 修饰符是将表单标签中的数据转换成数值,默认情况下是 字符串类型的数据,不适合作为计算,转换后更适合计算。trim 修饰符可以去除数据的两端的空格,其中的空格去除不了,需要注意。lazy 修饰符则是将标签默认的 input 事件转换成 change 事件。(input ...

Get新知识:

vue 表单域修饰符

vue 提供了 number trim 和 lazy 三种表单修饰符,其中number 修饰符是将表单标签中的数据转换成数值,默认情况下是 字符串类型的数据,不适合作为计算,转换后更适合计算。trim 修饰符可以去除数据的两端的空格,其中的空格去除不了,需要注意。lazy 修饰符则是将标签默认的 input 事件转换成 change 事件。(input 事件是当输入框内的数据发送变化时就触发事件,change 事件则是当焦点离开输入框时触发。)

vue 自定义指令

当vue 内置指令满足不了需求时就需要自定义指令,

简单示例:
image.png

使用时,只需要注意前面加上v- 就和普通的指令使用无异。

带有参数的自定义指令定义
image.png
使用时 需要注意传参即可,

局部指令:
定义在vue 实例化中的自定义指令,使用范围有限制,之前的方式定义的自定义指令都是全局的指令,局部的指令仅限于当前组件中使用。

directive: {
   
   
            color: {
   
   
                bind: function(el, binding){
   
   
                    el.style.backgroundColor = binding.value.color;
                    console.log(binding.value.color);
                }
            },
            focus: {
   
   
                inserter: function(){
   
   
                    el.focus();
                }
            }
        }

定义方式跟之前的区别不大,只是使用范围的存在不同。

vue 计算属性

在一些情况下,需要对数据进行各种逻辑计算操作,如果全部直接在模板中书写逻辑,代码复杂度提升可读性降低,为了模板的简洁性,使用计算属性。
在vue 的实例化对象中,computed 属性添加配置。
image.png

和方法非常相似,和定义一个方法基本一致。在方法中书写数据处理的逻辑。
和方法的区别:计算属性存在缓存,方法不存在缓存,每次调用函数都是重行执行一次。当计算属性处理的数据没有变化,则会一直使用之前的计算缓存,直到数据变化。

vue 侦听器

侦听器 类似数据库的触发器,当数据发生变化时执行侦听器所绑定的方法,一般应用在 数据变化时执行异步操作或开销较大的操作。

目录
相关文章
|
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