当前位置: 首页 > news >正文

codepen使用

文章目录

  • 注册账号
    • 第一个项目-起步
      • 双向绑定
      • 渲染列表
    • 处理用户输入
      • 综合

注册账号

可以使用github账号或谷歌账号登陆,或用邮箱注册

第一个项目-起步

创建项目
在这里插入图片描述

在这里插入图片描述

http://cdn.jsdelivr.net/vue/1.0.17/vue.min.js

查看示例效果
在这里插入图片描述

双向绑定

指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据。
在这里插入图片描述
input标签中的内容修改后对应message中的内容也被修改,反之同理。

渲染列表

使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 todo in todos形式的特殊语法,其中 todos是源数据的数组,而 todo是迭代项的别名
在这里插入图片描述

处理用户输入

使用 v-on 指令 (简写为 @) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。用法:v-on:click=“handler” 或 @click=“handler”。
事件处理器 (handler) 的值可以是:
1.内联事件处理器:事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
2.方法事件处理器:一个指向组件上定义的方法的属性名或是路径。
在这里插入图片描述
功能:点击后上面的单词会翻转

综合

在这里插入图片描述
实现功能:在文本框输入内容,按enter键后,下面会更新一行;点击某行右边的x按钮,该行内容会被删除

http://www.dtcms.com/a/289150.html

相关文章:

  • FFmpeg 图片处理
  • 数据结构 | 栈:构建高效数据处理的基石
  • 【高等数学】第四章 不定积分——第三节 分部积分法
  • 【深度学习新浪潮】什么是robotaxi?
  • 【设计模式C#】享元模式(用于解决多次创建对象而导致的性能问题)
  • MPLS转发
  • windows C#-本地函数
  • Docker Compose 配置
  • docker compose 编排容器 mysql Springboot应用
  • 使用pytorch创建模型时,nn.BatchNorm1d(128)的作用是什么?
  • gradle关于dependency-management的使用
  • SpringBoot 整合 Langchain4j 实现会话记忆存储深度解析
  • OpenCV 入门知识:图片展示、摄像头捕获、控制鼠标及其 Trackbar(滑动条)生成!
  • 【LeetCode刷题指南】--反转链表,链表的中间结点,合并两个有序链表
  • Day25| 491.递增子序列、46.全排列
  • SQL Server(2022)安装教程及使用_sqlserver下载安装图文
  • redis-plus-plus安装与使用
  • [BUG]关于UE5.6编译时出现“Microsoft.MakeFile.Targets(44,5): Error MSB3073”问题的解决
  • 30天打牢数模基础-SVM讲解
  • Facebook 开源多季节性时间序列数据预测工具:Prophet 快速入门 Quick Start
  • UE5多人MOBA+GAS 26、为角色添加每秒回血回蓝(番外:添加到UI上)
  • Go并发聊天室:从零构建实战
  • Mysql(事务)
  • 30个常用的Linux命令汇总和实战场景示例
  • 30天打牢数模基础-粒子群算法讲解
  • 详解Mysql索引合并
  • Jetpack - ViewModel、LiveData、DataBinding(数据绑定、双向数据绑定)
  • langchain调用本地ollama语言模型和嵌入模型
  • 梯度提升之原理
  • COGNEX康耐视IS5403-01智能相机加Navitar 18R00 LR1010WM52镜头