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-show和v-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 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。 Vue所关注的核心是MVC…...
GPT-SoVITS
文章目录 model archS1 ModelS2 model model arch S1 model: AR model–ssl tokensS2 model: VITS，ssl 已经是mel 长度线性相关，MRTE(ssl_codes_embs, text, global_mel_emb)模块，将文本加强相关，学到一个参考结果 S1 Model cla…...
linux高级编程——文件IO（常用函数大全）
1.相关介绍及常用函数 Linux高级编程中的目录IO操作是文件系统编程的一个重要组成部分，主要涉及到目录的打开、读取、遍历和关闭等操作。以下是一些基本的目录IO操作和相关的系统调用函数 1.1 opendir函数 打开目录：使用opendir函数打开一个目录&#…...
matplotlib画图
Matplotlib 先写一个最简单的： 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开发提供极大便利的组件、工具和指导集，旨在帮助开发者快速构建高质量的应用，并遵循最佳实践。 Jetpack不仅是一个提高开发效率的工具集，还是Android开发的未来方向。它通过整合各种组件和工具࿰…...
海康VisionMaster使用学习笔记5-开机自启动
开机自启动 在实际应用中，用户会希望机台上电开机后，软件能自启动避免现场人员误操作，减少机台重新上电时的操作步骤以提升效率。 设置 打开VM,点击设置,软件设置->开机自启动->勾选开机自启动->确定 默认运行界面 启动时以设定的…...
驾驭数据之序：SQL序列的奥秘与实现
标题：驾驭数据之序：SQL序列的奥秘与实现 摘要 在数据库管理中，保证数据的有序性和唯一性是至关重要的。SQL序列（Sequence）作为一种强大的数据库对象，为我们提供了一种在不同数据库系统中生成连续数字的手…...
【LeetCode】148. 排序链表
排序链表 题目描述： 给你链表的头结点 head ，请将其按 升序 排列并返回 排序后的链表 。 示例 1： 输入：head [4,2,1,3] 输出：[1,2,3,4]示例 2： 输入：head [-1,5,3,4,0] 输出：…...
阿里云-java调用短信服务，第三方接口的开启（傻瓜式教程）
第一步：在浏览器中，搜索阿里云 第二步：打开aly的主页 第三步：在最上方的导航栏中，找到云市场，注意不要点击，会自动有触发悬浮框出现，在悬浮框中找到 短信 第四步：点击 短…...
以node / link文件表征的道路网络-----基于南京公路公开数据做路径规划（下）------dijkstra算法的一些简单花样
在不改变dijkstra算法本身的情况下，完全可以从数据源的角度出发，解决我们的一些简单需求： 比较初级且粗暴的玩法，可以是强行赋予一些link极端的路段长度。 对于我们坚决不希望车辆行驶的道路、禁行区、或是危险区，就…...
计算机操作员中级理论知识试题
计算机操作员中级理论知识试题 一、单项选择题 在ASCII编码中，无法显示或打印的字符是（）。 A.字符$，%，# B.运算符号*，.，/ C.空格 D.ASCII编码值在0-30间的控制符号将十进制数31.625转换成十六进制数是（） A.115.10 B.If.a C.37.5 D.If.10在计算机中，同统一指挥和控制计…...
Redis主从同步配置
1： 安装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 # 从节点…...
输出重定向
输出重定向是指将程序的输出（标准输出、错误输出等）重定向到指定的位置，而不是默认的输出设备（通常是终端/控制台）。在 Unix/Linux 系统中，输出重定向通过使用符号 >、>>、2> 等来实现。 常见…...
ubuntu20.04挂载机械硬盘
环境说明 1.基于清华源地址下载的ubuntu20.04制作的系统盘，然后安装在PC上（固态硬盘） 2.机械硬盘无法看见 目的 挂载机械硬盘，开机就能自动启动/挂载 参考链接 https://blog.csdn.net/qq_35624642/article/details/137713143…...
Python轻量级 NoSQL 数据库之tinydb使用详解
概要 在现代应用开发中，使用数据库来存储和管理数据是非常常见的需求。对于简单的数据存储需求，关系型数据库可能显得过于复杂。TinyDB 是一个纯 Python 实现的轻量级 NoSQL 数据库，专为嵌入式场景设计，适用于小型项目、原型开发和教学等场景。本文将详细介绍 TinyDB 库，…...
【数据结构】二叉树（二）遍历
上篇已经了解对二叉树有了大概了解，本篇学习二叉树的前序、中序、后序及层序遍历的递归与非递归共7种遍历方法，快收藏吧~ 目录 1、前序遍历 递归方式： 迭代方式： 2、中序遍历 递归方式： 迭代方式： …...
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 但是，我的方法和上述链接不大一样，我是采用VS2019进行编译的，方便在Windows平台上验证各种算法。 2、创建一个VS2019的C Console工程 #include <iostream>…...
冒泡排序、选择排序、插入排序，三种简单排序算法的区别？
1、冒泡排序 冒泡排序是从下标 1 遍历到 n，每当遇到大于下一个的，就和上一个交换位置，这样最大的就移动到了 n 的位置，然后从头再从 1 遍历到 n-1，把第二大的移动到 n-1 的位置，依此类推，每次从…...
Docker 日志管理
一、ELK -Filebeat Elasticsearch 数据的存储和检索 常用端口： 9100：elasticsearch-head提供web访问 9200：elasticsearch与其他程序连接或发送消息 9300：elasticsearch集群状态 Logstash 有三个组件构成input，fi…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了： 这一篇我们开始讲： 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下： 一、场景操作步骤 操作步…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
Robots.txt 文件
什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
【生成模型】视频生成论文调研
工作清单 上游应用方向：控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...