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

Vue一款流行的JavaScript前端框架

1.Vue简介

        Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

  • Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。
  • 通俗的来讲,vue就是一个已经搭建好的空屋,与单纯使用jQuery这种库比,可以更好地实现代码复用,减少工作量;
  • 与Angular.js这种家具电器一应俱全的框架相比又不会一件件挑选,把自己不喜欢再一件件的扔了,甚至required 必须用且耗费空间的!
  • 简而言之,vue做了必须的事,又不会做职责之外的事。 

 2.Vue的使用

        在webstorm中创建工程(这里先用html文件循序渐进的体验一下Vue)

        2.1 引入vue.js文件

<script src="../js/vue.js"></script>

        2.2在body中创建一个div标签

<body><div id="test">{{msg}}</div>
</body>

        2.3创建一个<script>标签

 <script type="text/javascript">var test=new Vue({//把当前vue对象挂载到指定的标签元素上,使其vue生效。el: "#test", data:{msg:"一个真正的man",}})</script>

        2.4运行结果

3.Vue的常用指令

      3.1 v-model

描述:数据双向绑定,这个指令多用于需要绑定值和修改值的操作,比如输入框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title><script src="js/vue.js"></script></head>
<body>
<div id="app"><p>{{value}}</p><input type="text" v-model="value">
</div><script>let config = {el: '#app',data: {value: '球王徐坤'}}let vm = new Vue(config)
</script>
</body>
</html>

3.2 v-show和v-if的区别

v-showv-if最根本的区别在于显示和隐藏元素的方式。

  • v-show是采用样式的方式控制元素的显示和隐藏,也就是我们常用的display: none,此时虽然元素是隐藏状态,但在html代码中还是存在的。
  • v-if则是通过直接控制元素代码的方式在控制显示和隐藏。也就是说当元素隐藏的时候,该元素本身在html是不存在的。所以v-if的显示和隐藏。

3.3 v-no基础

   描述:绑定事件,监听dom上的事件,并绑定回调函数

语法:v-on:事件名="回调函数" or @事件名="回调函数"。事件绑定指令的表达式一般是回调函数,当绑定的事件被触发就会执行绑定的函数。

3.4v-text 和v-html

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="test"><span>{{msg}}</span><hr><span v-text="msg">唱</span><hr><!--v-text:无法解析html标签  v-html可以解析html标签--><span v-html="msg">跳</span>
</div>
</body>
<script>let test=new Vue({el:"#test",data:{msg:"<font color='green'>rap</font>",}})
</script>
</html>

3.5 v-for

循环数据

<div v-for="item in items" :key="item.cid">{{ item.text }}
</div>
<div v-for="(item, temp) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, age, index) in object"></div>
<div v-for="item in items">{{ item.text }}
</div>

 3.6 v-bind

描述:绑定dom属性,绑定表达式与dom属性

语法:v-bind:属性="表达式" or :属性="表达式"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/vue.js"></script>
</head>
<body><div id="test"><input :type="type" :disabled="disabled" /></div>
</body>
<script>let test=new Vue({el:"#test",data:{type: 'number',disabled: true}})
</script>
</html>

 

 

相关文章:

Vue一款流行的JavaScript前端框架

1.Vue简介 Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高效地开发用户界面。无论是简单还是复杂的界面&#xff0c;Vue 都可以胜任。 Vue所关注的核心是MVC…...

GPT-SoVITS

文章目录 model archS1 ModelS2 model model arch S1 model: AR model–ssl tokensS2 model: VITS&#xff0c;ssl 已经是mel 长度线性相关&#xff0c;MRTE(ssl_codes_embs, text, global_mel_emb)模块&#xff0c;将文本加强相关&#xff0c;学到一个参考结果 S1 Model cla…...

linux高级编程——文件IO(常用函数大全)

1.相关介绍及常用函数 Linux高级编程中的目录IO操作是文件系统编程的一个重要组成部分&#xff0c;主要涉及到目录的打开、读取、遍历和关闭等操作。以下是一些基本的目录IO操作和相关的系统调用函数 1.1 opendir函数 打开目录&#xff1a;使用opendir函数打开一个目录&#…...

matplotlib画图

Matplotlib 先写一个最简单的&#xff1a; import matplotlib.pyplot as plt plt.plot([1,4],[2,8]) #plot画折线图plt.show() 确定两个点画一条线 import matplotlib.pyplot as plt x[1,23,4,56,7,6] #x轴数据 y[22,44,56,67,43,2] #y轴数据 s[22,43,33,44,43,7] plt.p…...

Jetpack 各种框架简介

Jetpack是Google推出的一套为Android开发提供极大便利的组件、工具和指导集&#xff0c;旨在帮助开发者快速构建高质量的应用&#xff0c;并遵循最佳实践。 Jetpack不仅是一个提高开发效率的工具集&#xff0c;还是Android开发的未来方向。它通过整合各种组件和工具&#xff0…...

海康VisionMaster使用学习笔记5-开机自启动

开机自启动 在实际应用中&#xff0c;用户会希望机台上电开机后&#xff0c;软件能自启动避免现场人员误操作&#xff0c;减少机台重新上电时的操作步骤以提升效率。 设置 打开VM,点击设置,软件设置->开机自启动->勾选开机自启动->确定 默认运行界面 启动时以设定的…...

驾驭数据之序:SQL序列的奥秘与实现

标题&#xff1a;驾驭数据之序&#xff1a;SQL序列的奥秘与实现 摘要 在数据库管理中&#xff0c;保证数据的有序性和唯一性是至关重要的。SQL序列&#xff08;Sequence&#xff09;作为一种强大的数据库对象&#xff0c;为我们提供了一种在不同数据库系统中生成连续数字的手…...

【LeetCode】148. 排序链表

排序链表 题目描述&#xff1a; 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4]示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输出&#xff1a;…...

阿里云-java调用短信服务,第三方接口的开启(傻瓜式教程)

第一步&#xff1a;在浏览器中&#xff0c;搜索阿里云 第二步&#xff1a;打开aly的主页 第三步&#xff1a;在最上方的导航栏中&#xff0c;找到云市场&#xff0c;注意不要点击&#xff0c;会自动有触发悬浮框出现&#xff0c;在悬浮框中找到 短信 第四步&#xff1a;点击 短…...

以node / link文件表征的道路网络-----基于南京公路公开数据做路径规划(下)------dijkstra算法的一些简单花样

在不改变dijkstra算法本身的情况下&#xff0c;完全可以从数据源的角度出发&#xff0c;解决我们的一些简单需求&#xff1a; 比较初级且粗暴的玩法&#xff0c;可以是强行赋予一些link极端的路段长度。 对于我们坚决不希望车辆行驶的道路、禁行区、或是危险区&#xff0c;就…...

计算机操作员中级理论知识试题

计算机操作员中级理论知识试题 一、单项选择题 在ASCII编码中,无法显示或打印的字符是()。 A.字符$,%,# B.运算符号*,.,/ C.空格 D.ASCII编码值在0-30间的控制符号将十进制数31.625转换成十六进制数是() A.115.10 B.If.a C.37.5 D.If.10在计算机中,同统一指挥和控制计…...

Redis主从同步配置

1&#xff1a; 安装Redis 参考 linux ubuntu安装redis_ubuntu离线安装redis7.2.5-CSDN博客 2:创建目录 到达redis 根目录 cd /usr/redis/# 创建主从工作目录 mkdir -p replication/6379 # master 节点 mkdir -p replication/6378 # 从节点 mkdir -p replication/6377 # 从节点…...

输出重定向

输出重定向是指将程序的输出&#xff08;标准输出、错误输出等&#xff09;重定向到指定的位置&#xff0c;而不是默认的输出设备&#xff08;通常是终端/控制台&#xff09;。在 Unix/Linux 系统中&#xff0c;输出重定向通过使用符号 >、>>、2> 等来实现。 常见…...

ubuntu20.04挂载机械硬盘

环境说明 1.基于清华源地址下载的ubuntu20.04制作的系统盘&#xff0c;然后安装在PC上&#xff08;固态硬盘&#xff09; 2.机械硬盘无法看见 目的 挂载机械硬盘&#xff0c;开机就能自动启动/挂载 参考链接 https://blog.csdn.net/qq_35624642/article/details/137713143…...

Python轻量级 NoSQL 数据库之tinydb使用详解

概要 在现代应用开发中,使用数据库来存储和管理数据是非常常见的需求。对于简单的数据存储需求,关系型数据库可能显得过于复杂。TinyDB 是一个纯 Python 实现的轻量级 NoSQL 数据库,专为嵌入式场景设计,适用于小型项目、原型开发和教学等场景。本文将详细介绍 TinyDB 库,…...

【数据结构】二叉树(二)遍历

上篇已经了解对二叉树有了大概了解&#xff0c;本篇学习二叉树的前序、中序、后序及层序遍历的递归与非递归共7种遍历方法&#xff0c;快收藏吧~ 目录 1、前序遍历 递归方式&#xff1a; 迭代方式&#xff1a; 2、中序遍历 递归方式&#xff1a; 迭代方式&#xff1a; …...

NGINX 常用内置变量

目录 $remote_addr 变量 $args 变量 $is_args 变量 $document_root 变量 $document_uri 变量 $host 变量 $limit_rate 变量 $remote_port 变量 $remote_port --显示客户端端口 $request_method 变量 --返回请求方式 $request_filename 变量 --返回请求实际路径 $request_uri…...

Windows采用VS2019实现Open3D的C++应用

1、参考链接 https://blog.csdn.net/qq_31254435/article/details/137799739 但是&#xff0c;我的方法和上述链接不大一样&#xff0c;我是采用VS2019进行编译的&#xff0c;方便在Windows平台上验证各种算法。 2、创建一个VS2019的C Console工程 #include <iostream>…...

冒泡排序、选择排序、插入排序,三种简单排序算法的区别?

1、冒泡排序 冒泡排序是从下标 1 遍历到 n&#xff0c;每当遇到大于下一个的&#xff0c;就和上一个交换位置&#xff0c;这样最大的就移动到了 n 的位置&#xff0c;然后从头再从 1 遍历到 n-1&#xff0c;把第二大的移动到 n-1 的位置&#xff0c;依此类推&#xff0c;每次从…...

Docker 日志管理

一、ELK -Filebeat Elasticsearch 数据的存储和检索 常用端口&#xff1a; 9100&#xff1a;elasticsearch-head提供web访问 9200&#xff1a;elasticsearch与其他程序连接或发送消息 9300&#xff1a;elasticsearch集群状态 Logstash 有三个组件构成input&#xff0c;fi…...

JavaScript初级——基础知识

一、JS的HelloWord 1、JS的代码需要编写到script标签中 2、JS的执行是根据语句从上到下一次执行的。 二、JS的编写位置 1、可以将js代码编写到标签的onclick属性中&#xff0c;当我们点击按钮时&#xff0c;js代码才会执行。 2、可以将js代码写在超链接的href属性中&#xff0…...

0817(持久层框架:JDBC,MyBatis)

三层架构&#xff08;表现层&#xff0c;业务层&#xff0c;持久层&#xff09; java中框架的概述&#xff08;表现层、业务层、持久层的关系&#xff09;_控制层业务层持久层的关系-CSDN博客 框架&#xff1a;框架一般处在低层应用平台&#xff08;如J2EE&#xff09;和高层…...

在亚马逊云科技上安全、合规地创建AI大模型训练基础设施并开发AI应用服务

项目简介&#xff1a; 小李哥将继续每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿AI技术解决方案&#xff0c;帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS AI最佳实践&#xff0c;并应用到自己的日常工作里。 本次介绍的是如何在亚马逊云科技利用Servi…...

无人机模拟训练室技术详解

无人机模拟训练室作为现代无人机技术培训的重要组成部分&#xff0c;集成了高精度模拟技术、先进的数据处理能力及高度交互的操作界面&#xff0c;为无人机操作员提供了一个安全、高效、接近实战的训练环境。以下是对无人机模拟训练室技术的详细解析&#xff0c;涵盖系统基础概…...

【Spring框架】

一、引言二、Spring核心概念三、Spring入门示例四、进一步了解Spring的依赖注入五、Spring的面向切面编程&#xff08;AOP&#xff09;六、总结 一、引言 Spring框架自2003年发布以来&#xff0c;凭借其轻量级、易于扩展的特性&#xff0c;在Java企业级应用开发领域得到了广泛…...

uniapp 日常业务 随便写写 源码

现成的组件 直接用 <template><view style"margin: 10rpx;"><view class"tea-header"><text class"tea-title">礼尚往来</text><view class"tea-view-all"><text>查看全部</text>&l…...

【软件测试】单元测试20套练习题

&#xff08;一&#xff09;概述 使用Java语言编写应用程序&#xff0c;设计测试数据&#xff0c;完成指定要求的白盒测试&#xff0c;对测试数据及相应测试结果进行界面截图&#xff0c;将代码以及相关截图粘贴到白盒测试报告中。 &#xff08;二&#xff09;题目要求...

8.16 day bug

bug1 题目没看仔细 额外知识 在 Bash shell 中&#xff0c;! 符号用于历史扩展功能。当你在命令行中输入 ! 后跟一些文本时&#xff0c;Bash 会尝试从你的命令历史中查找与该文本相匹配的命令。这是一种快速重用之前执行过的命令的方法。 如何使用历史扩展 基本用法: !strin…...

《Nginx核心技术》第11章:实现MySQL数据库的负载均衡

作者&#xff1a;冰河 星球&#xff1a;http://m6z.cn/6aeFbs 博客&#xff1a;https://binghe.gitcode.host 文章汇总&#xff1a;https://binghe.gitcode.host/md/all/all.html 星球项目地址&#xff1a;https://binghe.gitcode.host/md/zsxq/introduce.html 沉淀&#xff0c…...

使用 Gnosis Safe 创建多签名钱包

创建多签名钱包可以通过多个步骤完成,具体取决于你使用的平台或工具。下面我将介绍使用 Gnosis Safe 创建多签名钱包的过程,因为它是目前以太坊生态中最受欢迎且功能强大的多签名钱包之一。 目录 使用 Gnosis Safe 创建多签名钱包1. 准备工作2. 访问 Gnosis Safe3. 创建多签名…...

LeetCode 算法:前 K 个高频元素 c++

原题链接&#x1f517;&#xff1a;前 K 个高频元素 难度&#xff1a;中等⭐️⭐️ 题目 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例 1: 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2] 示例 2…...

MySQL的SQL语句更新某个字段的值在原来值的基础上随机增加100~600

要在 MySQL 中更新某个字段的值&#xff0c;使其在原有值的基础上随机增加一个 100 到 600 之间的值&#xff0c;你可以使用 RAND() 函数来生成随机数&#xff0c;并结合其他 SQL 函数进行计算。以下是一个 SQL 更新语句的示例&#xff1a; UPDATE your_table_name SET your…...

LeetCode --- 410周赛

题目列表 3248. 矩阵中的蛇 3249. 统计好节点的数目 3250. 单调数组对的数目 I 3251. 单调数组对的数目 II 一、矩阵中的蛇 只要按照题目要求模拟即可&#xff0c;代码如下 class Solution { public:int finalPositionOfSnake(int n, vector<string>& commands…...

最佳的iPhone解锁软件和应用程序

在探讨最佳的iPhone解锁软件和应用程序时&#xff0c;我们需要考虑多个方面&#xff0c;包括软件的解锁能力、易用性、安全性、兼容性以及用户评价等。以下是对当前市场上几款优秀iPhone解锁软件和应用程序的详细分析&#xff0c;旨在为用户提供全面而深入的指导。 一、奇客iO…...

初等函数和它的表达式

常量函数&#xff0c;幂函数&#xff0c;指数函数&#xff0c;对数函数&#xff0c;三角函数和反三角函数成为基本初等函数。基本初等函数经过有限四则运算和符合运算得到的函数称为初等函数。 1. 常量函数 表达式&#xff1a; &#xff08;其中 c 是常数&#xff09;参数的意…...

Android 12系统源码_多屏幕(二)模拟辅助设备功能开关实现原理

前言 上一篇我们通过为Android系统开启模拟辅助设备功能开关&#xff0c;最终实现了将一个Activity显示到多个屏幕的效果。 本篇文章我们具体来分析一下当我们开启模拟辅助设备功能开关的时候&#xff0c;Android系统做了什么哪些操作。 一、模拟辅助设备功能开关应用位置 …...

【Go语言初探】(二)、项目文件结构和GOPATH设置

一、go语言项目文件结构 由go/bin、go/src和go/pkg三个子文件夹组成&#xff0c;见下图&#xff1a; 实际项目&#xff1a; 二、gopath路径变量设置 在项目中创建main.go文件后&#xff0c;IDE会提示设置GOPATH路径&#xff1a; 点击“configure GOPATH”&#xff0c;设置GOP…...

三种简单排序:插入排序、冒泡排序与选择排序 【算法 05】

三种简单排序&#xff1a;插入排序、冒泡排序与选择排序 在编程中&#xff0c;排序算法是基础且重要的知识点。虽然在实际开发中&#xff0c;我们可能会直接使用标准库中的排序函数&#xff08;如C的std::sort&#xff09;&#xff0c;但了解并实现这些基础排序算法对于理解算法…...

Python -- GUI图形界面编程—GUI编程实例 博主也在持续学习中[ 持续更新中!!! 欢迎白嫖 也求粉啊啊啊~ ]

本文介绍了GUI的图形界面编程&#xff08;相关视频是哔站上的应该搜这个题目就能找到&#xff09;&#xff0c;文章还是很基础的&#xff0c;反正我是小白从0开始&#xff0c;主要的结构tinkter库、重要组件简介&#xff08;这个不用死记硬背 用的时候再说&#xff09;、Label&…...

Vue2和Vue3中的diff算法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、diff算法是什么&#xff1f;二、vue2中的diff算法三、vue3中的diff算法总结 前言 一、diff算法是什么&#xff1f; diff算法很早就存在了&#xff0c;一开…...

springboot使用aop或Jackson进行数据脱敏

1.aop 启动类加EnableAspectJAutoProxy 自定义注解&#xff0c;在实体类中使用表示被脱敏字段 建立aop切面类 可能这里gpt会建议你用Pointcut("execution(public * com.xx.aop..*.get*(..))")这种方式拦截&#xff0c;这种我试了&#xff0c;拦截不住。猜测在mvc返…...

【Solidity】基础介绍

数据类型 值类型 值类型的变量在赋值或作为函数参数传递时会被复制。 布尔类型&#xff1a;bool整数类型&#xff1a; 无符号&#xff1a;uint8、uint16、…、uint256 (uint256 可简写为 uint)有符号&#xff1a;int8、int16、…、int256 (int256可简写为 int) 地址类型&…...

【SpringBoot3】双向实时通讯 websocket

文章目录 一、Websocket使用步骤二、示例1&#xff1a;继承抽象类 AbstractWebSocketHandler后端代码前端代码 三、示例2&#xff1a;使用注解ServerEndpoint后端代码前端代码 四、前端代码封装 一、Websocket使用步骤 在Spring Boot中使用WebSocket是一个常见的需求&#xff…...

搭建内网开发环境(一)|基于docker快速部署开发环境

引言 最近因需要搭建一套简易版的纯内网的开发环境&#xff0c;服务器采用 centos8.0&#xff0c;容器化技术采用 docker 使用 docker-compose 进行容器编排。 该系列教程分为两大类&#xff1a; 软件安装和使用&#xff0c;这类是开发环境常用的软件部署和使用&#xff0c;涉…...

MATLAB R2023b配置Fortran编译器

MATLAB R2023b配置Fortran编译器 引言1. 安装Visual Studio 20192. 安装Intel API20243. 配置xml文件文件4. 设置环境变量5. MATLAB编译Fortran 引言 当我们需要用到MATLAB编译Fortran代码后进行调用计算时&#xff0c;整个配置流程较繁琐。下面以MATLAB R2023b为例&#xff0…...

2024新型数字政府综合解决方案(七)

新型数字政府综合解决方案通过集成人工智能、大数据、区块链和云计算技术&#xff0c;创建了一个高度智能化和互联互通的政府服务平台&#xff0c;旨在全面提升行政效率、服务质量和透明度。该平台实现了跨部门的数据整合与实时共享&#xff0c;利用人工智能进行智能决策支持和…...

搭建高可用k8s集群

高可用 Kubernetes V1.28.10 安装 文章目录 1. 环境介绍2. 准备工作2.1 修改主机名称2.2 修改hosts文件2.3 关闭防火墙和SLinux2.4 配置SSH免密访问2.4.1 主机名称: k8s-master-01 操作 2.5 配置yum源2.6 禁用Swarp分区2.7 同步时间2.8 配置内核转发及网桥过滤2.9 安装 IPVS 3…...

完美解决html2canvas + jsPDF导出pdf分页内容截断问题

代码地址&#xff1a;https://github.com/HFQ12333/export-pdf.git html2canvas jspdf方案是前端实现页面打印的一种常用方案&#xff0c;但是在实践过程中&#xff0c;遇到的最大问题就是分页截断的问题&#xff1a;当页面元素超过一页A4纸的时候&#xff0c;连续的页面就会…...

14 地址映射

14 地址映射 1、地址划分2、相关函数2.1 ioremap/iounmap2.2 mmap地址映射 3、总结 1、地址划分 明确&#xff1a;在linux系统中,不管是应用程序还是驱动程序&#xff0c;都不允许直接访问外设的物理地址,要想访问必须将物理地址映射到用户虚拟地址或者内核虚拟地址&#xff0…...

Java Resilience4j-RateLimiter学习

一. 介绍 Resilience4j-RateLimiter 是 Resilience4j 中的一个限流模块&#xff0c;我们对 Resilience4j 的 CircuitBreaker、Retry 已经有了一定的了解&#xff0c;现在来学习 RateLimiter 限流器&#xff1b; 引入依赖&#xff1b; <dependency><groupId>io.g…...