vue+elementUI学习

布满荆棘的人生 2023-02-14 15:39 29阅读 0赞

1. vue监听键盘回车事件:@keyup.enter.native=“search(1)”

vue监听键盘回车事件，可写成

  1. <input v-on:keyup.enter="submit">
  3. <input @keyup.enter="submit">

但是使用了封装组件，比如elementUI，这时候按键修饰符需要加上.native:

  1. <el-input v-model="account" placeholder="请输入账号" @keyup.enter.native="search()"></el-input>

2. v-model 用在input元素上和用在组件上

用在input元素上

  1. input的oninput事件：当用户向 中尝试输入时触发：
    <input type="text" oninput="myFunction()">

    该事件类似于 onchange 事件，不同在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于keygen 和 select元素。

  2. 下面两行代码等价，在给 <input/>元素添加 v-model属性时，默认会把 value 作为元素的属性，把 input 事件作为实时传递 value 的触发事件

用在组件上

给组件添加 v-model 属性时，默认会把value 作为组件的属性，把 input作为给组件绑定事件时的事件名。
可做到输入框子组件输入值时，可相应更新父组件的值。

参考资料：https://www.jianshu.com/p/4147d3ed2e60

计算属性、监听属性、methods的区别：

  • 计算属性computed

    1. computed 是基于它的依赖进行缓存的，只有在它的相关依赖发生变化才会重新计算求值。页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数。
    2. 函数里面的变量都会被监听，只要里面的某一个值变动，便会将整个函数执行一遍。
    3. . 计算后的属性可不在 data 中定义，如果定义会报错，因为对应的computed作为计算属性定义并 return 对应的结果给这个变量,变量不可被重复定义和赋值.
    4. computed擅长处理的场景：一个数据受多个数据影响

  • 监听属性watch

    1. watch 监听 data 中定义的变量变化，若是监听的值里面也有很多变量，也会全部监听
    2. 无缓存性，页面重新渲染时值不变化也会执行
    3. watch擅长处理的场景：一个数据影响多个数据

  • methods:

    1. methods中就是普通的方法，通过调用执行,不会监听属性变化
    2. 重新渲染页面值不变化也会执行
监听下拉事件，下拉框联动
表格中的树形下拉菜单
下拉菜单选中后带出值
输入框只能输入数字验证
下拉框默认值
附件上传组件

发表评论

表情：
评论列表 （有 0 条评论，29人围观）

还没有评论，来说两句吧...

相关阅读

    相关 怎么学习深度学习和机器学习

    学习深度学习和机器学习是一个很有趣的过程，有很多方法可以帮助您加深对这些技术的理解。 一种常见的方法是通过课程学习。您可以在大学或在线课程平台上找到许多机器学习和深度学习课程

    电玩女神电玩女神/ 0 赞/ 141 阅读

    相关 【机器学习】迁移学习

    迁移学习：给定一个有标记的源域和一个无标记的目标域。这两个领域的数据分布不同。迁移学习的目的就是要借助源域的知识，来学习目标域的知识(标签)。或是指基于源域数据和目标域数据、源

    浅浅的花香味﹌浅浅的花香味﹌/ 0 赞/ 160 阅读

    相关 学习java_学习Java

    分阶段进阶教学+阶段考评 让学习无死角 因为考虑学员基础水平参差不齐，所以动力节点的课程安排对学员进行科学细致的划分，整个教学安排共分两大部分即：基础部分和就业部分，基础部分

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 449 阅读

    相关 强化学习：Q-学习

    这篇教程通过简单且易于理解的实例介绍了Q-学习的概念知识，例子描述了一个智能体通过非监督学习的方法对未知的环境进行学习。 假设我们的楼层内共有5个房间，房间之间通过一道门相

    迈不过友情╰迈不过友情╰/ 0 赞/ 436 阅读