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

2、简单上手+el挂载点+v-xx(v-text、v-html、v-on、v-show、v-if、v-bind、v-for)

官网:

vue3:https://cn.vuejs.org/

vue2:https://v2.cn.vuejs.org/v2/guide/

简单上手:

流程:

  • 导入开发版本的Vue.js

  • <!--开发环境版本,包含了有帮助的命令行警告--> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--生产环境版本,优化了尺寸和速度--> 
    <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!--不推荐新手直接使用vue-cli,尤其是在你还不熟悉基于Node.js的构建工具时。-->
  • 创建Vue实例对象,设置el属性和data属性。

  • 使用简洁的模板语法把数据渲染到页面上

示例:

<div id="app"> {{ message }} 
</div> var app = new Vue({ 
el: '#app', data: { message: 'Hello Vue!'} 
})

el挂载点:

  • Vue实例的作用范围是什么呢?

Vue会管理el选项命中的元素及其内部的后代元素。

  • 是否可以设置其他的dom元素呢?

可以使用其他的双标签,不能使用HTML和BODY

v-text:

v-text 通过设置元素的 textContent 属性来工作,因此它将覆盖元素中所有现有的内容。更新元素的文本内容。

<span v-text="msg"></span> 
<!-- 和下面的一样 --> 
<span>{{msg}}</span>

v-html:

v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。更新元素的 innerHTML。

<div v-html="html"></div>

v-on:

给元素绑定事件监听器。

  • .{keyAlias} - 只在某些按键下触发处理函数。
  • .left - 只在鼠标左键事件触发处理函数。
  • .right - 只在鼠标右键事件触发处理函数。
  • .middle - 只在鼠标中键事件触发处理函数。
  • .passive - 通过 { passive: true } 附加一个 DOM 事件。

<!-- 方法处理函数 -->
<button v-on:click="doThis"></button><!-- 缩写,和上面是一样的 -->
<button @click="doThis"></button><!-- 动态事件 -->
<button v-on:[event]="doThis"></button><!-- 缩写,和上面是一样的 -->
<button @[event]="doThis"></button><!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" /><!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

v-show:

v-show 通过设置内联样式的 display CSS 属性来工作,当元素可见时将使用初始 display 值。当条件改变时,也会触发过渡效果。

v-if:

v-if 元素被触发,元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假,那么其内部的内容根本都不会被渲染。当同时使用时,v-ifv-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令。

表达式为true,元素存在于dom树中。表达式为false,从dom树中移除。

v-bind:

动态的绑定一个或多个 attribute,也可以是组件的 prop。

  • .camel - 将短横线命名的 attribute 转变为驼峰式命名。

  • .prop - 强制绑定为 DOM property。(3.2+)

  • .attr - 强制绑定为 DOM attribute。

  • 在处理绑定时,Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property,则 Vue 会将它作为 DOM property 赋值,而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型,但是你也可以显式用 .prop.attr 修饰符来强制绑定方式。

V-for:

<div v-for="item in items"> {{ item.text }} 
</div> 
<div v-for="(item, index) in items"></div> 
<div v-for="(value, key) in object"></div> 
<div v-for="(value, name, index) in object"></div>
  • v-for指令的作用是:根据数据生成列表结构

  • 数组经常和v-for结合使用

  • 语法是(item,index)in数据

  • item和index可以结合其他指令一起使用

  • 数组长度的更新会同步到页面上,是响应式的

相关文章:

2、简单上手+el挂载点+v-xx(v-text、v-html、v-on、v-show、v-if、v-bind、v-for)

官网&#xff1a; vue3&#xff1a;https://cn.vuejs.org/ vue2&#xff1a;https://v2.cn.vuejs.org/v2/guide/ 简单上手&#xff1a; 流程&#xff1a; 导入开发版本的Vue.js <!--开发环境版本&#xff0c;包含了有帮助的命令行警告--> <script src"https…...

C++初阶语法——命名空间

前言&#xff1a;C&#xff0c;即cplusplus&#xff0c;顾名思义&#xff0c;是C语言promax版本&#xff0c;C兼容C语言。 C的诞生是因为贝尔实验室的本贾尼等大佬认为C语言的语法坑实在太多&#xff0c;拥有许多不足之处&#xff08;比如命名冲突&#xff0c;&#xff09;&…...

Axwing.878 线性同余方程

题目 给定n组数据ai, bi , mi&#xff0c;对于每组数求出一个xi&#xff0c;使其满足ai * xibi (mod mi)&#xff0c;如果无解则输出impossible。 输入格式 第一行包含整数n。 接下来n行&#xff0c;每行包含一组数据ai , bi , mi。 输出格式 输出共n行&#xff0c;每组数…...

【Pytorch+torchvision】MNIST手写数字识别

深度学习入门项目&#xff0c;含代码详细解析 在本文中&#xff0c;我们将在PyTorch中构建一个简单的卷积神经网络&#xff0c;并使用MNIST数据集训练它识别手写数字。 MNIST包含70,000张手写数字图像: 60,000张用于培训&#xff0c;10,000张用于测试。图像是灰度&#xff08;即…...

spring boot 集成rocketmq

集成Spring Boot和RocketMQ 在现代的微服务架构中&#xff0c;消息队列已经成为一种常见的异步处理模式&#xff0c;它能解决服务间的同步调用、耦合度高、流量高峰等问题。RocketMQ是阿里巴巴开源的一款消息中间件&#xff0c;性能优秀&#xff0c;功能齐全&#xff0c;被广泛…...

redis Hash类型命令

Redis中的Hash类型有多个常用命令可用于对Hash键进行操作。以下是一些常见的Redis Hash类型命令&#xff1a; HSET&#xff1a;设置Hash字段的值。 它将指定字段与相应的值关联起来&#xff0c;如果字段已经存在&#xff0c;则更新其值&#xff0c;如果字段不存在&#xff0c…...

P1194 买礼物(最小生成树)(内附封面)

买礼物 题目描述 又到了一年一度的明明生日了&#xff0c;明明想要买 B B B 样东西&#xff0c;巧的是&#xff0c;这 B B B 样东西价格都是 A A A 元。 但是&#xff0c;商店老板说最近有促销活动&#xff0c;也就是&#xff1a; 如果你买了第 I I I 样东西&#xff0…...

oracle基础语法和备份恢复

Oracle总结 sql命令分类 1.DDL&#xff0c;数据定义语言&#xff0c;create创建/drop销毁 2.DCL&#xff0c;数据库控制语言&#xff0c;grant授权/revoke撤销 3.DML&#xff0c;数据操纵语言&#xff0c;insert/update/delete等sql语句 4.DQL&#xff0c;数据查询语言&am…...

【MATLAB第66期】#源码分享 | 基于MATLAB的PAWN全局敏感性分析模型(有条件参数和无条件参数)

【MATLAB第66期】#源码分享 | 基于MATLAB的PAWN全局敏感性分析模型&#xff08;有条件参数和无条件参数&#xff09; 文献参考 Pianosi, F., Wagener, T., 2015. A simple and efficient method for global sensitivity analysis based on cumulative distribution functions.…...

vue2过渡vue3技术差异点指南

基础点 reactive() 定义响应式变量(仅仅引用类型有效&#xff1a;对象数组map&#xff0c;set)&#xff1a;reactive(),类似于data中return的数据 例子&#xff1a; import { reactive } from vueexport default {setup() {const state reactive({ count: 0 })function in…...

两个多选框(select)之间值的左右上下移动

<!DOCTYPE html> <html> <head><meta charset"utf-8"><title>两个多选框(select)之间值的左右上下移动</title> </head> <script src"https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>&…...

【设计模式】——模板模式

什么是模板模式&#xff1f; 模板方法模式&#xff08;Template Method Pattern&#xff09;&#xff0c;又叫模板模式(Template Pattern)&#xff0c;在一个抽象类公开定义了执行它的方法的模板。它的子类可以按需要重写方法实现&#xff0c;但调用将以抽象类中定义的方式进行…...

工业机器视觉系统开发流程简介

需求分析和系统设计&#xff1a;与用户合作&#xff0c;明确系统的功能和性能需求&#xff0c;并设计系统的整体架构。 软、硬件选型&#xff1a;根据需求分析结果&#xff0c;选择适合的软、硬件设备&#xff0c;包括光学传感器、相机、光源、图像采集设备、处理器等。 软件…...

【Unity3D】Renderer Feature简介

1 3D 项目迁移到 URP 项目后出现的问题 3D 项目迁移至 URP 项目后&#xff0c;会出现很多渲染问题&#xff0c;如&#xff1a;材质显示异常、GL 渲染不显示、多 Pass 渲染异常、屏幕后处理异常等问题。下面将针对这些问题给出一些简单的解决方案。 URP 官方教程和 API 详见→Un…...

麻了!包含中科院TOP,共16本期刊被标记为“On Hold”状态!

近日&#xff0c;小编从科睿唯安旗下的“Master Journal List”官网查到&#xff0c;除了知名老牌期刊Chemosphere竟然被标记为“On Hold”状态&#xff0c;目前共有7本SCI期刊&#xff0c;1本SSCI期刊&#xff0c;8本ESCI期刊被标记为“On Hold”&#xff0c;究竟是怎么回事呢…...

2.Flink应用

2.1 数据流 DataStream&#xff1a;DataStream是Flink数据流的核心抽象&#xff0c;其上定义了对数据流的一系列操作DataStreamSource&#xff1a;DataStreamSource 是 DataStream 的 起 点 &#xff0c; DataStreamSource 在StreamExecutionEnvironment 中 创 建 &#xff0c;…...

Matlab进阶绘图第25期—三维密度散点图

三维密度散点图本质上是一种特征渲染的三维散点图&#xff0c;其颜色表示某一点所在区域的密度信息。 除了作图&#xff0c;三维密度散点图绘制的关键还在于密度的计算。 当然&#xff0c;不管是作图还是密度的计算&#xff0c;这些在《Matlab论文插图绘制模板》和《Matlab点…...

C++设计模式之桥接设计模式

文章目录 C桥接设计模式什么是桥接设计模式该模式有什么优缺点优点缺点 如何使用 C桥接设计模式 什么是桥接设计模式 桥接设计模式是一种结构型设计模式&#xff0c;它可以将抽象接口和实现分离开来&#xff0c;以便它们可以独立地变化和扩展。 该模式有什么优缺点 优点 灵…...

论文笔记:SUPERVISED CONTRASTIVE REGRESSION

2022arxiv的论文&#xff0c;没有中&#xff0c;但一作是P大图班本MIT博&#xff0c;可信度应该还是可以的 0 摘要 深度回归模型通常以端到端的方式进行学习&#xff0c;不明确尝试学习具有回归意识的表示。 它们的表示往往是分散的&#xff0c;未能捕捉回归任务的连续性质。…...

Java 多线程并发 CAS 技术详解

一、CAS概念和应用背景 CAS的作用和用途 CAS&#xff08;Compare and Swap&#xff09;是一种并发编程中常用的技术&#xff0c;用于解决多线程环境下的并发访问问题。CAS操作是一种原子操作&#xff0c;它可以提供线程安全性&#xff0c;避免了使用传统锁机制所带来的性能开…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...