继续来体验一波数据驱动结合绑定方法的实践案例. 这里以最常见的反转字符串为栗子来体验面向数据编程.

v-on

用来绑定事件的, 然后将方法名写在 methods 中即可.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Document</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    Vue.createApp({

      data () {

        return {

          content: "hello, world!"

        }

      },

      // 处理数据的方案都放 methods 中

      methods: {

        btnClick () {

          // 反转字符串

          this.content = this.content.split('').reverse().join('')

        }

      },

      template: `

        <div>

          {{content}}

          <button @click="btnClick">反转</button>

        </div>

        `

    }).mount('#root')

  </script>

</body>

</html>

v-if

条件成立则Dom生效, 不会保留位置哦.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Document</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    Vue.createApp({

      data () {

        return { show: true }

      },

      methods: {

        btnClick () {

          this.show = !this.show

        }

      },

      template: `

        <div>

          <span v-if="show">hello, world</span>

          <button @click="btnClick">显示/隐藏</button>

        </div>

        `

    }).mount('#root')

  </script>

</body>

</html>

简单的指令和方法体验就到这里啦, 确实还是很好理解的.

vue3 学习-初识体验-常见指令v-on和v-if的更多相关文章

  1. Java学习-035-JavaWeb_004 -- JSP include 指令

    inclue 指令是将不同的文件插入到 JSP 网页中,这些文件可以是文本文件.HTML文件.JSP 文件,指令语法如下: <%@include file="相对路径"%&g ...

  2. Java学习-034-JavaWeb_003 -- JSP page 指令

    前文对 JSP 的基础知识进行了初步的讲解,此文主要讲述 JSP page 指令. page 指令用于定义页面的多种属性,例如:脚本语言.编码方式.导入的 Java 包等,page 执行的语法如下: ...

  3. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  4. JVM学习笔记——字节码指令

    JVM学习笔记——字节码指令 字节码 0与 1是计算机仅能识别的信号,经过0和1的不同组合产生了数字之上的操作.另外,通过不同的组合亦产生了各种字符.同样,可以通过不同的组合产生不同的机器指令.在不同 ...

  5. 在Windows环境中开始Docker的学习和体验

    研究docker有一段时间了,当然我主要的使用环境还是在Linux中,确实很方便. 但也有不少朋友希望使用Windows来工作学习,这里介绍一下在Windows中如何快速开始Docker的学习和体验吧 ...

  6. JSP常见指令

    JSP常见指令 标签: jspincludeservletjavaappletarchive 2011-11-07 20:07 13193人阅读 评论(3) 收藏 举报 版权声明:本文为博主原创文章, ...

  7. AngularJS1.X学习笔记8-自定义指令（上）

    AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...

  8. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  9. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  10. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

随机推荐

  1. 运行中的Docker容器获取 .NET项目的Dump文件

    进入容器的 shell docker exec -it 容器名称或 id /bin/bash 使用cd命令进入NETSDK所在文件夹 cd /usr/share/dotnet/shared/Micro ...

  2. 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎，没有生成长度限制，DeepSeek本体的替代品，可本地部署+知识库，注册即可有750w的token使用

    最近火山引擎推出了自家联网版的DeepSeekR1,并且加入了联网的功能,不用担心DeepSeek本体的服务器繁忙了,可以说直接是DeepSeek本体的替代品.现在注册即送30块体验价(相当于750w ...

  3. manim边学边做--标准相机

    在Manim动画制作库中,Camera类是负责管理屏幕显示内容的核心类,其功能涵盖场景设置.对象渲染.坐标转换等多个关键方面. Camera类作为Manim中渲染流程的核心,在动画制作中主要作用包括: ...

  4. Jenkins - [02] 安装部署

    题记部分 一.Jenkins是什么   Jenkins,原名Hudson,2011年改为现在的名字,它是一个开源的实现持续集成的软件工具. 官网:https://www.jenkins.io/ 官网: ...

  5. NCS开发学习笔记-基础篇-第 1 课 – 安装 nRF Connect SDK 开发环境

    练习1 -安装 nRF Connect SDK 开发环境 需要安装的软件 Git python J-Link nrfutil nRF Command Line Tools VScode Chinese ...

  6. ABAQUS弹塑性分析

    1. 弹塑性分析的主要问题 1.1 elastic-plastic deform behavior abaqus 默认的塑性表现行为是金属材料经典塑性理论,采用mises屈服面定义各向同性屈服. 一般 ...

  7. 【Unit1】表达式化简（层次化设计）-作业总结

    三次作业围绕表达式化简展开,逐次递进.主体思路为:递归下降解析表达式保存至类中,依据相关模式化简,依照规范输出字符串. 1.第一次作业 1.1 题目概述 表达式 = 项 + 项 + ... 项 = 因 ...

  8. FastAPI 错误处理与自定义错误消息完全指南：构建健壮的 API 应用 🛠️

    title: FastAPI 错误处理与自定义错误消息完全指南:构建健壮的 API 应用 ️ date: 2025/3/12 updated: 2025/3/12 author: cmdragon e ...

  9. 基于PHPstream扩展手动实现一个redis客户端

    描述 redis是一个经典的key-value缓存数据库,采用C/S架构.当我们安装成功以后,你就知道它有个服务端,启动后默认监听6379端口,然后提供一个客户端工具redis-cli. 我们可以使用 ...

  10. python正则表达式笔记1

    最近工作中经常用到正则表达式处理数据,慢慢发现了正则表达式的强大功能,尤其在数据处理工作中,记录下来分享给大家. 一. 正则表达式语法介绍 正则表达式(或 RE)指定了一组与之匹配的字符串:模块内的函 ...