Vue.js学习笔记(三)

最新推荐文章于 2023-12-26 20:00:20 发布

chengyu_wang

最新推荐文章于 2023-12-26 20:00:20 发布

阅读量487

点赞数

分类专栏： javascript学习笔记

本文链接：https://blog.csdn.net/qq_17347575/article/details/71024375

版权

本文详细介绍了Vue.js的学习，从列表渲染的v-for指令，到事件处理器的v-on使用，包括事件修饰符的掌握，条件渲染的v-show，动态绑定v-bind的应用，以及一个简单的DEMO展示，帮助读者深入理解Vue的核心概念。

摘要由CSDN通过智能技术生成

通过一个简单的实例加深对Vue的学习

列表渲染

v-for指令

根据一组数组的选项列表进行渲染

语法:
- value,key in items
- value,key of items
对数组进行操作,使用Vue提供的一组方法,会触发视图更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

事件处理器

v-on指令

用来监听DOM事件触发的代码

语法:
- v-on:eventName = “eventHandle”
- @eventName=”eventHandle”
事件处理函数
写在methods中统一管理

事件对象
- 在事件处理函数中获取
- 内联事件处理函数执行,传入事件对象

事件修饰符

事件处理函数只有纯粹的逻辑,不处理DOM事件的细节
如:阻止冒泡,取消默认行为,判断按键

修饰符的位置
v-on:eventName.修饰符
修饰符
1. .stop
2. .prevent
3. .capture
4. .self
5. .once
按键修饰符
1. .enter
2. .tab
3. .delete
4. .esc
5. .space
6. .up
7. .down
8. .left
9. .right
10. .ctrl
11. .alt
12. .shift
13. .meta
14. .键值

条件渲染

v-show指令

根据表达式的值,用来显示/隐藏元素

语法:
v-show=”表达式”

元素会被渲染在页面中,只根据表达式的值进行css切换

动态绑定

v-bind指令
元素属性可以使用v-bind绑定

简单的DEMO

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>My Plan</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    h2 {
        line-height: 80px;

最低0.47元/天解锁文章

chengyu_wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js学习笔记(三)

通过一个简单的实例加深对Vue的学习列表渲染v-for指令根据一组数组的选项列表进行渲染语法:value,key in itemsvalue,key of items对数组进行操作,使用Vue提供的一组方法,会触发视图更新push()pop()shift()unshift()splice()sort()reverse()事件处理器v-on指令用来监听DOM事件触发的代码语法:v-
复制链接

扫一扫

专栏目录