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

Vue一款流行的JavaScript前端框架

news 2026/2/8 6:32:59

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 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高效地开发用户界面。无论是简单还是复杂的界面&#xff0c;Vue 都可以胜任。 Vue所关注的核心是MVC…...

编程日记 2024/8/19 2:35:14

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…...

编程日记 2024/8/19 2:34:06

linux高级编程——文件IO（常用函数大全）

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

编程日记 2024/8/19 2:31:02

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…...

编程日记 2024/8/19 2:30:01

Jetpack 各种框架简介

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

编程日记 2024/8/19 2:29:00

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

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

编程日记 2024/8/19 2:24:55

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

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

编程日记 2024/8/19 2:22:52

【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;…...

编程日记 2024/8/19 2:21:51

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

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

编程日记 2024/8/19 2:20:49

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

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

编程日记 2024/8/19 2:18:48

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

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

编程日记 2024/8/19 2:17:46

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 # 从节点…...

编程日记 2024/8/19 2:16:44

输出重定向

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

编程日记 2024/8/19 2:14:42

ubuntu20.04挂载机械硬盘

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

编程日记 2024/8/19 2:13:40

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

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

编程日记 2024/8/19 2:08:34

【数据结构】二叉树（二）遍历

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

编程日记 2024/8/19 2:06:32

NGINX 常用内置变量

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

编程日记 2024/8/19 2:02:27

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>…...

编程日记 2024/8/19 2:01:25

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

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

编程日记 2024/8/19 2:00:25

Docker 日志管理

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

编程日记 2024/8/19 1:59:24

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2026/2/8 4:37:15

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/7 9:51:41

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2026/1/22 14:22:27

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

编程新知 2026/1/23 7:37:12

数据结构：递归的种类（Types of Recursion）

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

编程新知 2026/2/7 2:25:07

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

编程新知 2026/1/26 19:02:17