【1 Vue基础 - 模板语法-绑定】

news2024/11/27 3:43:14

1 VSCode代码片段

链接: link

在这里插入图片描述

2 Mustache双大括号语法

插入内容
在这里插入图片描述

<body>

  <div id="app">

    <!-- 1.基本使用 -->
    <h2>{{ message }}</h2>
    <h2>当前计数: {{ counter }} </h2>

    <!-- 2.表达式 -->
    <h2>计数双倍: {{ counter * 2 }}</h2>
    <h2>展示的信息: {{ info.split(" ") }}</h2>

    <!-- 3.三元运算符 -->
    <h2>{{ age >= 18? "成年人": "未成年人" }}</h2>

    <!-- 4.调用methods中函数 -->
    <h2>{{ formatDate(time) }}</h2>

    <!-- 5.注意: 这里不能定义语句 -->
    <!-- <h2>{{ const name = "why" }}</h2> -->

  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello Vue",
          counter: 100,
          info: "my name is why",
          age: 22,
          time: 123
        }
      },

      methods: {
        formatDate: function(date) {
          return "2022-10-10-" + date
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>

3 v-bind指令的绑定属性

插入属性值
在这里插入图片描述

<body>

  <div id="app">
    <div>
      <button @click="switchImage">切换图片</button>
    </div>

    <!-- 1.绑定img的src属性 -->
    <img v-bind:src="showImgUrl" alt="">
    <!-- 语法糖: v-bind -> : -->
    <img :src="showImgUrl" alt="">

    <!-- 2.绑定a的href属性 -->
    <a :href="href">百度一下</a>

  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          imgUrl1: "http://p1.music.126.net/agGc1qkogHtJQzjjyS-kAA==/109951167643767467.jpg",
          imgUrl2: "http://p1.music.126.net/_Q2zGH5wNR9xmY1aY7VmUw==/109951167643791745.jpg",

          showImgUrl: "http://p1.music.126.net/_Q2zGH5wNR9xmY1aY7VmUw==/109951167643791745.jpg",
          href: "http://www.baidu.com"
        }
      },

      methods: {
        switchImage: function() {
          this.showImgUrl = this.showImgUrl === this.imgUrl1 ? this.imgUrl2: this.imgUrl1
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>

4 v-bind绑定class

在这里插入图片描述

对象语法

{data中的类的标识符:bool值}

<body>

  <div id="app">
    <!-- 1.基本绑定class -->
    <h2 :class="classes">Hello World</h2>
    
    <!-- 2.1.对象语法的基本使用(掌握) -->
    <button :class="{ active: isActive }" @click="btnClick">我是按钮</button>

    <!-- 2.2.对象语法的多个键值对 -->
    <button :class="{ active: isActive, why: true, kobe: false }" @click="btnClick">我是按钮</button>
    
    <!-- 2.3.动态绑定的class是可以和普通的class同时的使用 -->
    <button class="abc cba" :class="{ active: isActive, why: true, kobe: false }" @click="btnClick">我是按钮</button>
    
    <!-- 2.4.动态绑定的class是可以和普通的class同时的使用 -->
    <button class="abc cba" :class="getDynamicClasses()" @click="btnClick">我是按钮</button>

    <!-- 3.动态class可以写数组语法(了解) -->
    <h2 :class="['abc', 'cba']">Hello Array</h2>
    <h2 :class="['abc', className]">Hello Array</h2>
    <h2 :class="['abc', className, isActive? 'active': '']">Hello Array</h2>
    <h2 :class="['abc', className, { active: isActive }]">Hello Array</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          classes: "abc cba nba",
          isActive: false,
          className: "why"
        }
      },

      methods: {
        btnClick: function() {
          this.isActive = !this.isActive
        },

        getDynamicClasses: function() {
          return { active: this.isActive, why: true, kobe: false }
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>

5 绑定style

在这里插入图片描述

<body>

  <div id="app">
    <!-- 1.普通的html写法 -->
    <h2 style="color: red; font-size: 30px;">哈哈哈哈</h2>

    <!-- 2.style中的某些值, 来自data中 -->
    <!-- 2.1.动态绑定style, 在后面跟上 对象类型 (重要)-->
    <h2 v-bind:style="{ color: fontColor, fontSize: fontSize + 'px' }">哈哈哈哈</h2>
    <!-- 2.2.动态的绑定属性, 这个属性是一个对象 -->
    <h2 :style="objStyle">呵呵呵呵</h2>

    <!-- 3.style的数组语法 -->
    <h2 :style="[objStyle, { backgroundColor: 'purple' }]">嘿嘿嘿嘿</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          fontColor: "blue",
          fontSize: 30,
          objStyle: {
            fontSize: '50px',
            color: "green"
          }
        }
      },
    })

    // 2.挂载app
    app.mount("#app")

  </script>
</body>

6 绑定一个对象

将一个对象的所有属性，绑定到元素上的所有属性，

<body>

  <div id="app">
    <h2 :name="name" :age="age" :height="height">Hello World</h2>

    <!-- 等价写法 v-bind绑定对象: 给组件传递参数 -->
    <h2 v-bind="infos">Hello Bind</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          infos: { name: "why", age: 18, height: 1.88, address: "广州市" },

          name: "why",
          age: 18,
          height: 1.88
        }
      },
    })
    // 2.挂载app
    app.mount("#app")
  </script>
</body>

7 绑定事件

v-on的使用：
缩写：@

<body>

  <div id="app">
    <!-- 1.基本的写法 -->
    <div class="box" v-on:click="divClick"></div>

    <!-- 2.语法糖写法(重点掌握) -->
    <div class="box" @click="divClick"></div>

    <!-- 3.绑定的方法位置, 也可以写成一个表达式(不常用, 不推荐) -->
    <h2>{{ counter }}</h2>
    <button @click="increment">+1</button>
    <button @click="counter++">+1</button>

    <!-- 4.绑定其他方法(掌握) -->
    <div class="box" @mousemove="divMousemove"></div>

    <!-- 5.元素绑定多个事件(掌握) -->
    <div class="box" @click="divClick" @mousemove="divMousemove"></div>
    <!-- <div class="box" v-on="{ click: divClick, mousemove: divMousemove }"></div> -->
    <!-- <div class="box" @="{ click: divClick, mousemove: divMousemove }"></div> -->
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          counter: 0
        }
      },
      methods: {
        divClick() {
          console.log("divClick")
        },
        increment() {
          this.counter++
        },
        divMousemove() {
          console.log("divMousemove")
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>

v-on参数传递

<body>

  <div id="app">
    <!-- 1.默认传递event对象 -->
    <button @click="btn1Click">按钮1</button>

    <!-- 2.只有自己的参数 -->
    <button @click="btn2Click('why', age)">按钮2</button>

    <!-- 3.自己的参数和event对象 -->
    <!-- 在模板中想要明确的获取event对象: $event -->
    <button @click="btn3Click('why', age, $event)">按钮3</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello Vue",
          age: 18
        }
      },
      methods: {
        // 1.默认参数: event对象
        // 总结: 如果在绑定事件的时候, 没有传递任何的参数, 那么event对象会被默认传递进来
        btn1Click(event) {
          console.log("btn1Click:", event)
        },

        // 2.明确参数:
        btn2Click(name, age) {
          console.log("btn2Click:", name, age)
        },

        // 3.明确参数+event对象
        btn3Click(name, age, event) {
          console.log("btn3Click:", name, age, event)
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>

v-on的修饰符,补充特定条件

.stop .阻止事件冒泡触发.
.prevent 阻止默认行为

在这里插入图片描述

8 条件渲染

在这里插入图片描述

<body>

  <div id="app">
    <h1 v-if="score > 90">优秀</h1>
    <h2 v-else-if="score > 80">良好</h2>
    <h3 v-else-if="score >= 60">及格</h3>
    <h4 v-else>不及格</h4>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          score: 40
        }
      },
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>

9 template元素

在这里插入图片描述

10 v-for 列表渲染

在这里插入图片描述
在这里插入图片描述

<body>

  <div id="app">
    <!-- 1.电影列表进行渲染 -->
    <h2>电影列表</h2>
    <ul>
      <li v-for="movie in movies">{{ movie }}</li>
    </ul>

    <!-- 2.电影列表同时有索引 -->
    <ul>
      <li v-for="(movie, index) in movies">{{index + 1}} - {{ movie }}</li>
    </ul>

    <!-- 3.遍历数组复杂数据 -->
    <h2>商品列表</h2>
    <div class="item" v-for="item in products">
      <h3 class="title">商品: {{item.name}}</h3>
      <span>价格: {{item.price}}</span>
      <p>秒杀: {{item.desc}}</p>
    </div>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          // 1.movies
          movies: ["星际穿越", "少年派", "大话西游", "哆啦A梦"],

          // 2.数组: 存放的是对象
          products: [
            { id: 110, name: "Macbook", price: 9.9, desc: "9.9秒杀, 快来抢购!" },
            { id: 111, name: "iPhone", price: 8.8, desc: "9.9秒杀, 快来抢购!" },
            { id: 112, name: "小米电脑", price: 9.9, desc: "9.9秒杀, 快来抢购!" },
          ]
        }
      },
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>

v-for支持的类型

在这里插入图片描述

数组更新检测

在这里插入图片描述

11 双向数据绑定 v-model表单

在这里插入图片描述

v-model的原理

值绑定+事件绑定
在这里插入图片描述

v-model绑定textarea 文本框

在这里插入图片描述

v-model绑定checkbox

在这里插入图片描述

v-model绑定radio

在这里插入图片描述

v-model绑定select

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/551427.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

研发项目工时统计工具哪个好？9大工时管理系统盘点

研发项目工时统计工具哪个好？9大工时管理系统盘点

工时管理是项目型企业的重要需求&#xff0c;特别是在人力成本占比较高的行业&#xff0c;如软件开发、设计咨询、会计律师等。工时管理可以帮助企业核算项目人工成本&#xff0c;控制成本投入&#xff0c;提高项目利润&#xff0c;客观考核员工绩效&#xff0c;优化资源分配等…
阅读更多...
C++类和对象入门(中)

C++类和对象入门(中)

C类和对象入门 中 1. 类的6个默认成员函数2. 构造函数2.1 概念2.2 特性 3.初始化列表4.析构函数4.2 特性 5. 拷贝构造函数5.1 特性 6.运算符重载6.1 赋值运算符重载6.2前置和后置重载 7. 自实现日期类 1. 类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空…
阅读更多...
golang 服务中 context 超时处理的思考

golang 服务中 context 超时处理的思考

文章目录 前言起因&#xff1a;日志告警引发的思考什么是contextcontext的作用context超时之后继续执行 or 中断 最后 前言 公司运行的服务代码中&#xff0c;随处可见各种各样的日志信息&#xff0c;其中大多数是用来记录各种异常的日志&#xff0c;一方面&#xff0c;当出现…
阅读更多...
煤矿电子封条实施方案 yolov7

煤矿电子封条实施方案 yolov7

煤矿电子封条实施方案采用YOLOv7网络模型算法技术&#xff0c;煤矿电子封条实施算法模型过将全国各省矿山实时监测数据&#xff0c;实现对全国各矿山及时有效的处理及分析。YOLOv7 的发展方向与当前主流的实时目标检测器不同&#xff0c;研究团队希望它能够同时支持移动 GPU 和…
阅读更多...
Arthas实现热更新代码

Arthas实现热更新代码

目录 1.Arthas简介 2.准备Demo 3.启动Arthas 4.Arthas命令 5.使用retransform命令热更新代码 1.Arthas简介 Arthas 是一款线上监控诊断产品&#xff0c;通过全局视角实时查看应用 load、内存、gc、线程的状态信息&#xff0c;并能在不修改应用代码的情况下&#xff0c;对…
阅读更多...
Python中的模块2

Python中的模块2

为了加快导入模块的速度&#xff0c;Python会缓存之前使用过的模块。 1 保存缓存文件的路径 Python会将之前编译过的模块保存在与该模块同一目录中的“__pycache__”文件夹中。 2 缓存文件名 缓存文件会以“模块名.版本号.pyc”格式命名。图1为使用yang_module.py模块后得到…
阅读更多...
2023年NOC大赛创客智慧编程赛项图形化复赛模拟题一，包含答案解析

2023年NOC大赛创客智慧编程赛项图形化复赛模拟题一，包含答案解析

2023年NOC大赛创客智慧编程赛项图形化复赛模拟题一，包含答案解析 本次题目来源：NOC 大赛创客智慧编程赛项图形化复赛模拟题(一) 第一题: 制作一个生日贺卡小程序. 1.点击绿旗后蛋糕出现在 (0，-80) 的位置，大小为 100，造型为 cake-b2.当碰到鼠标指针时，将造型切换为 ca…
阅读更多...
【EasyAR实战项目】图像识别+模型交互（全网首发，保姆级教程）

【EasyAR实战项目】图像识别+模型交互（全网首发，保姆级教程）

话不多说&#xff0c;先看实现效果 开发准备 以下为作者开发的环境&#xff0c;当然也可以使用更高的版本&#xff0c;尤其是EasyAR的版本可以选择更高的&#xff0c;因为这玩意儿版本迭代的太快了&#xff0c;而且更高版本所支持的手机型号更新&#xff0c;兼容性更强。 1 U…
阅读更多...
SpringBoot实现限流注解

SpringBoot实现限流注解

SpringBoot实现限流注解 在高并发系统中&#xff0c;保护系统的三种方式分别为&#xff1a;缓存&#xff0c;降级和限流。 限流的目的是通过对并发访问请求进行限速或者一个时间窗口内的的请求数量进行限速来保护系统&#xff0c;一旦达到限制速率则可以拒绝服务、排队或等待…
阅读更多...
MySQL---存储引擎

MySQL---存储引擎

1. 存储引擎 数据库存储引擎是数据库底层软件组织&#xff0c;数据库管理系统使用数据引擎进行创建、查询、更新和删 除数据。 不同的存储引擎提供不同的存储机制、索引技巧、锁定水平等功能。不同的数据库管理系统都支持 多种不同的数据引擎。MySQL的核心就是存储引擎。 …
阅读更多...
IDEA创建项目的操作步骤以及在虚拟机里面创建Scala的项目简单介绍

IDEA创建项目的操作步骤以及在虚拟机里面创建Scala的项目简单介绍

文章目录 前言 一、Idea创建项目的操作 1、选择本地的Scala插件包 2、创建项目的操作 3、输入新建的项目名称 4、在文件file里面选择new一个新的module文件 5、输入项目的名称&#xff0c;点击下一步 6、创建一个Scala文件夹 7、选择Mark directory as 8、单击文件里…
阅读更多...
【5.21】六、自动化测试—概述

【5.21】六、自动化测试—概述

目录 6.1 自动化测试概述 6.1.1 什么是自动化测试 6.1.2 自动化测试的基本流程 6.1.3 自动化测试实施策略 6.1.4 自动化测试的优势和劣势 测试中的许多操作都是重复性的、非智力性的和非创造性的&#xff0c;但要求工作准确细致&#xff0c;此时计算机最适合代替人工去完成…
阅读更多...
SpringBoot2.6.3集成ElasticSearch7.13.4详解，上下两篇，上篇集群配置，下篇集成配置（上）

SpringBoot2.6.3集成ElasticSearch7.13.4详解，上下两篇，上篇集群配置，下篇集成配置（上）

一、集群配置准备 &#xff08;1&#xff09;方式一&#xff0c;从网盘下载ElasticSearch7.13.4 链接: https://pan.baidu.com/s/1vwUu1kbpCc5exkfOPgb29g 提取码: thn5 &#xff08;2&#xff09;方式二&#xff0c;从官网下载 https://www.elastic.co/cn/downloads/past-…
阅读更多...
【C++学习】C++11——lambda表达式 | 可变参数模板 | 包装器

【C++学习】C++11——lambda表达式 | 可变参数模板 | 包装器

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《C学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; lambda表达式 | 可变参数模板 | 包装器 &#x1f3c0;lambda表达式&#x1f94e;lambda表达式语法&am…
阅读更多...
汇编十一、汇编实现外部中断

汇编十一、汇编实现外部中断

1、实现目的 (1)实现8颗LED灯呈流水灯依次被点亮&#xff1b;静态数码管通过按键按下&#xff0c;显示数值发生改变&#xff0c;通过按键依次显示0-9。 (2)按键检测采用外部中断检测。 2、原理图及硬件连接 2.1、LED灯 (1)51单片机P1端口接八个共阴极LED灯&#xff0c;即I…
阅读更多...
【python之django1.11框架二】django ORM 操作MySQL的基本操作

【python之django1.11框架二】django ORM 操作MySQL的基本操作

1. django 连接数据库(MySQL) # setting.py 文件 # 默认用的是sqkite3 DATABASES {default: {ENGINE: django.db.backends.sqlite3,NAME: os.path.join(BASE_DIR, db.sqlite3),} }# django链接MySQL 1.第一步配置文件中配置 DATABASES {default: {ENGINE: django.db.backend…
阅读更多...
RocketMQ 消息发送、消息类别

RocketMQ 消息发送、消息类别

一、消息发送 1.1 单生产者单消费者消息发送&#xff08;OneToOne&#xff09; 1、新建maven项目recketmqtest 2、导入RocketMQ客户端坐标 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-client</artifactId><…
阅读更多...
chatgpt赋能Python-pythonbug

chatgpt赋能Python-pythonbug

Python Bug: 了解并避免Python编程中的错误 在编程中遇到错误是件非常常见的事情&#xff0c;Python编程也不例外。在Python中&#xff0c;被称为“bug”的错误主要分为两种&#xff0c;编译错误和运行时错误。本文将向您介绍如何识别、调试和避免Python编程中的错误&#xff…
阅读更多...
Windi CSS 原子css 下一代工类 CSS 框架

Windi CSS 原子css 下一代工类 CSS 框架

最近由于项目原因接触到了windi Css 发现这个东西真是绝绝子啊,不用在代码里写一行style,完全以类的形式去写样式,它里面包含了几乎所有的css样式&#xff0c;可以让我们不需要再去繁琐的写css样式&#xff0c;原来几行的css现在只需要短短的几个字符。他的许多新特性给我们带来…
阅读更多...
《算法竞赛进阶指南》(持续更新ing)

《算法竞赛进阶指南》(持续更新ing)

算法竞赛进阶指南 位运算 AcWing 89. a^b #include<iostream> using namespace std;int main(void) {long long a,b,p;cin>>a>>b>>p;long long ans1%p;while(b){if(b&1)//判断b当前二进制位是否为1{ansans*a%p;}aa*a%p;//每跨越一个二进制位&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023