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

初学vue.js

news 2026/2/8 19:19:05

准备Vue.js环境

① 下载环境：

javaScript语言的程序包：外部js文件
对于Vue来说，导入Vue的外部js文件就能够使用Vue框架了。
Vue框架的js文件获取:
官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
②导入环境
在工程目录下创建script目录用来存放vue.js文件

将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中
③ 在html文件当中导入Vue.js文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body><script src="/pro03-vue/script/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"></script>
</html>

Vue.js基本语法：声明式渲染

①HTML代码

<!-- 使用{{}}格式，指定要被渲染的数据 --><div id="app">{{message}}</div>

②vue代码

// 1.创建一个JSON对象，作为new Vue时要使用的参数
var argumentJson = {// el用于指定Vue对象要关联的HTML元素。el就是element的缩写// 通过id属性值指定HTML元素时，语法格式是：#id"el":"#app",// data属性设置了Vue对象中保存的数据"data":{"message":"Hello Vue!"}
};// 2.创建Vue对象，传入上面准备好的参数
var app = new Vue(argumentJson);

运行结果：
在这里插入图片描述

绑定元素属性

v-bind:HTML标签的原始属性名
①HTML代码

<div id="app"><!-- v-bind:value表示将value属性交给Vue来进行管理，也就是绑定到Vue对象 --><!-- vueValue是一个用来渲染属性值的表达式，相当于标签体中加{{}}的表达式 --><input type="text" v-bind:value="vueValue" /><!-- 同样的表达式，在标签体内通过{{}}告诉Vue这里需要渲染； --><!-- 在HTML标签的属性中，通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 --><p>{{vueValue}}</p>
</div>

这里的v-bind:value 可以简写成 :value

②Vue代码

// 创建Vue对象，挂载#app这个div标签
var app = new Vue({"el":"#app","data":{"vueValue":"太阳当空照"}
});

运行结果：在这里插入图片描述

双向数据绑定

①HTML代码

<div id="app"><!-- v-bind:属性名 效果是从Vue对象渲染到页面 --><!-- v-model:属性名 效果不仅是从Vue对象渲染到页面，而且能够在页面上数据修改后反向修改Vue对象中的数据属性 --><input type="text" v-model:value="vueValue" /><p>{{vueValue}}</p>
</div>

②Vue代码

// 创建Vue对象，挂载#app这个div标签
var app = new Vue({"el":"#app","data":{"vueValue":"太阳当空照"}
});

文本框里面的字母改变这个下面会跟着改变，已经与文本框里的绑定了。
在这里插入图片描述
①注意：:value可以省略

<input type="text" v-model="vueValue" />

②.trim修饰符
实际开发中，要考虑到用户在输入数据时，有可能会包含前后空格。而这些前后的空格对我们程序运行来说都是干扰因素，要去掉。在v-model后面加上.trim修饰符即可实现。

<input type="text" v-model.trim="vueValue" />

Vue会帮助我们在文本框失去焦点时自动去除前后空格。

条件渲染

根据Vue对象中，数据属性的值来判断是否对HTML页面内容进行渲染。
1、v-if

①HTML代码

	<div id="app"><h3>if</h3><div v-if="flag"  style="background: red; height:100px;width:100px "></div><div v-if="!flag" style="background: blue; height:100px;width:100px"></div></div>

②Vue代码

var app = new Vue({"el":"#app","data":{"flag":true}});

输出结果展示红色的方块。
在这里插入图片描述

2、v-if和v-else
①HTML代码

<div id="app02"><h3>if/else</h3><div v-if="flag"  style="background: red; height:100px;width:100px "></div><div v-else="flag" style="background: blue; height:100px;width:100px"></div>
</div>

②Vue代码

var app02 = new Vue({"el":"#app02","data":{"flag":true}});

在这里插入图片描述

注意：中见有其他节点会影响，else 之后的节点。
3、v-show
①HTML代码

<div id="app03"><h3>v-show</h3><div v-show="flag"  style="background: red; height:100px;width:100px "></div>
</div>

②Vue代码

var app03 = new Vue({"el":"#app03","data":{"flag":true}});

注意：这个属性是在后面添加了隐藏属性
在这里插入图片描述

列表渲染

1、迭代一个简单的数组

<div id="app01"><ul><!-- 使用v-for语法遍历数组 --><!-- v-for的值是语法格式是：引用数组元素的变量名 in Vue对象中的数组属性名 --><!-- 在文本标签体中使用{{引用数组元素的变量名}}渲染每一个数组元素 --><li v-for="fruit in fruitList">{{fruit}}</li></ul>
</div>

②Vue代码

var app01 = new Vue({"el":"#app01","data":{"fruitList": ["apple","banana","orange","grape","dragonfruit"]}
});

在这里插入图片描述

2、迭代一个对象数组
①HTML代码

<div id="app"><table><tr><th>编号</th><th>姓名</th><th>年龄</th><th>专业</th></tr><tr v-for="employee in employeeList"><td>{{employee.empId}}</td><td>{{employee.empName}}</td><td>{{employee.empAge}}</td><td>{{employee.empSubject}}</td></tr></table>
</div>

②Vue代码

var app = new Vue({"el":"#app","data":{"employeeList":[{"empId":11,"empName":"tom","empAge":111,"empSubject":"java"},{"empId":22,"empName":"jerry","empAge":222,"empSubject":"php"},{"empId":33,"empName":"bob","empAge":333,"empSubject":"python"}]}
});

在这里插入图片描述

事件驱动

1、demo：字符串顺序反转
①HTML代码

<div id="app"><p>{{message}}</p><!-- v-on:事件类型="事件响应函数的函数名" --><button v-on:click="reverseMessage">Click me,reverse message</button>
</div>

②Vue代码

var app = new Vue({"el":"#app","data":{"message":"Hello Vue!"				},"methods":{"reverseMessage":function(){this.message = this.message.split("").reverse().join("");}}
});

在这里插入图片描述

2、demo：获取鼠标移动时的坐标信息
①HTML代码

<div id="app"><div id="area" v-on:mousemove="recordPosition" style="background:aqua;width: 400px;height: 500px;"></div><p id="showPosition">{{position}}</p>
</div>

②Vue代码

var app = new Vue({"el":"#app","data":{"position":"暂时没有获取到鼠标的位置信息"},"methods":{"recordPosition":function(event){this.position = event.clientX + " " + event.clientY;}}
});

在这里插入图片描述
v-on的简化写法
正常写法：

<button v-on:click="sayHello">SayHello</button>

简化以后：

<button @click="sayHello">SayHello</button>

侦听属性

1、提出需求

<div id="app"><p>尊姓：{{firstName}}</p><p>大名：{{lastName}}</p>尊姓：<input type="text" v-model="firstName" /><br/>大名：<input type="text" v-model="lastName" /><br/><p>全名：{{fullName}}</p>
</div>

在上面代码的基础上，我们希望firstName或lastName属性发生变化时，修改fullName属性。此时需要对firstName或lastName属性进行『侦听』。

具体来说，所谓『侦听』就是对message属性进行监控，当firstName或lastName属性的值发生变化时，调用我们准备好的函数。
2、Vue代码
在watch属性中声明对firstName和lastName属性进行『侦听』的函数：

var app = new Vue({"el":"#app","data":{"firstName":"jim","lastName":"green","fullName":"jim green"},"watch":{"firstName":function(inputValue){this.fullName = inputValue + " " + this.lastName;},"lastName":function(inputValue){this.fullName = this.firstName + " " + inputValue;}}
});

练习

1、功能效果演示
在这里插入图片描述
第一步：显示表格
①HTML标签

<table id="appTable"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>专业</th></tr><tr v-for="employee in employeeList"><td>{{employee.empId}}</td><td>{{employee.empName}}</td><td>{{employee.empAge}}</td><td>{{employee.empSubject}}</td></tr>
</table>

②Vue代码

var appTable = new Vue({"el": "#appTable","data": {"employeeList": [{"empId": 1,"empName": "tom","empAge": 11,"empSubject": "java"},{"empId": 2,"empName": "jerry","empAge": 22,"empSubject": "php"},{"empId": 3,"empName": "peter","empAge": 33,"empSubject": "python"}]}
});

第二步：显示四个文本框
①HTML标签

<!-- 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据，所以要放在同一个app中 -->
<div id="appDiv"><!-- 第一部分：四个文本框 -->编号：<input type="text" v-model="empId" /><br/>姓名：<input type="text" v-model="empName" /><br/>年龄：<input type="text" v-model="empAge" /><br/>专业：<input type="text" v-model="empSubject" /><br/><!-- 第二部分：显示收集到的文本框数据的p标签 --><!-- 第三部分：按钮 --></div>

②Vue代码

var appDiv = new Vue({"el":"#appDiv","data":{// 初始值设置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""}
});

第三步：创建一个p标签
HTML标签：

<!-- 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据，所以要放在同一个app中 -->
<div id="appDiv"><!-- 第一部分：四个文本框 -->编号：<input type="text" v-model="empId" placeholder="请输入编号" /><br/>姓名：<input type="text" v-model="empName" placeholder="请输入姓名" /><br/>年龄：<input type="text" v-model="empAge" placeholder="请输入年龄" /><br/>专业：<input type="text" v-model="empSubject" placeholder="请输入专业" /><br/><!-- 第二部分：显示收集到的文本框数据的p标签 --><p>{{empId}} {{empName}} {{empAge}} {{empSubject}}</p><!-- 第三部分：按钮 --></div>

第四步：点击添加记录按钮
第一小步：给按钮设置事件驱动
[1]HTML标签

<!-- 四个文本框、显示收集到的文本框数据的p标签、按钮这三个部分需要共享数据，所以要放在同一个app中 -->
<div id="appDiv"><!-- 第一部分：四个文本框 -->编号：<input type="text" v-model="empId" placeholder="请输入编号" /><br/>姓名：<input type="text" v-model="empName" placeholder="请输入姓名" /><br/>年龄：<input type="text" v-model="empAge" placeholder="请输入年龄" /><br/>专业：<input type="text" v-model="empSubject" placeholder="请输入专业" /><br/><!-- 第二部分：显示收集到的文本框数据的p标签 --><p>{{empId}} {{empName}} {{empAge}} {{empSubject}}</p><!-- 第三部分：按钮 --><button type="button" v-on:click="addRecord">添加记录</button></div>

[2]Vue代码

var appDiv = new Vue({"el":"#appDiv","data":{// 初始值设置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""},"methods":{"addRecord":function(){console.log("我点击了那个按钮……");}}
});

②第二小步：打印一下文本框输入的数据

var appDiv = new Vue({"el":"#appDiv","data":{// 初始值设置空字符串即可"empId":"","empName":"","empAge":"","empSubject":""},"methods":{"addRecord":function(){console.log("我点击了那个按钮……");console.log(this.empId);console.log(this.empName);console.log(this.empAge);console.log(this.empSubject);}}
});

③第三小步：将收集到的数据添加到表格中

"addRecord":function(){// 确认单击事件是否绑定成功console.log("我点击了那个按钮……");// 确认是否能够正确收集到文本框数据console.log(this.empId);console.log(this.empName);console.log(this.empAge);console.log(this.empSubject);// 将收集到的文本框数据封装为一个对象var employee = {"empId":this.empId,"empName":this.empName,"empAge":this.empAge,"empSubject":this.empSubject};// 将上面的对象压入表格数据的employeeList数组appTable.employeeList.push(employee);
}

在这里插入图片描述

初学vue.js

准备Vue.js环境 ① 下载环境： javaScript语言的程序包：外部js文件对于Vue来说，导入Vue的外部js文件就能够使用Vue框架了。 Vue框架的js文件获取: 官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js ②导入环境…...

编程日记 2023/9/26 5:25:15

React的thunk中间件

Thunk 是一种中间件，它可以在 Redux 中处理异步操作。Thunk 中间件允许你在 action 中返回一个函数，而不仅仅是一个普通的 action 对象。这个返回的函数可以接收 dispatch 和 getState 作为参数，并且可以在函数内部进行异步操作。当使用 Thun…...

编程日记 2023/9/26 5:24:14

数组初学者向导：使用Python从零开始制作经典战舰游戏

引言战舰游戏，一个广受欢迎的经典游戏，为玩家提供了策略与猜测的完美结合。这个游戏的核心思想是通过猜测敌方船只的位置并尝试击沉它们来赢得比赛。在这篇文章中，我们将使用Python语言和数组来构建这款游戏，让你更加了解数组的…...

编程日记 2023/9/26 5:22:12

【STM32】IAP升级预备知识

IAP（In Application Programming）简介 Flash够大的情况下，上电后的程序通过修改 MSP 的方式，可以在一块Flash上存在多个功能差异的程序。 IAP是为了在执行正常功能前，为了升级功能，提前运行的一段程序。这…...

编程日记 2023/9/26 5:21:11

asp.net网站的建立及运行

点击创建新项目在输入框中输入asp.net，并选择图中的点击下一步点击创建然后，右键，添加，新建项选择web窗体点击添加点击视图，工具箱选择一个label，记住这个id 空白处右键，查看代码添…...

编程日记 2023/9/26 5:20:11

怎么把webm转换成mp4？

怎么把webm转换成mp4？与MP4这位视频格式大哥相比，Webm这种视频格式还有很多小伙伴对它不太熟悉，因为大家平时也是偶尔才能接触到，属于不常用的视频格式。Webm是一种开放、免费的媒体文件格式，尽管如今它的应用范围比以…...

编程日记 2023/9/26 5:19:10

RabbitMQ 消息应答

每日一句物是人非事事休，欲语泪先流。概述为了保证消息在发送过程中不丢失，RabbitMQ引入了消息应答机制，消费者在接收到消息并且处理该消息后，告诉RabbitMQ它已经处理了，RabbitMQ可以把消息删除了。自动应答消息发送后立即被认为已经传送成功，这种模式需要在…...

编程日记 2023/9/26 5:16:07

【C++】C++ 类中的 this 指针用法 ③ ( 全局函数与成员函数相互转化 | 有参构造函数设置默认参数值 | 返回匿名对象与返回引用 )

文章目录一、全局函数与成员函数相互转化1、成员函数转为全局函数 - 多了一个参数2、全局函数转为成员函数 - 通过 this 指针隐藏操作数二、有参构造函数设置默认参数值三、返回匿名对象与返回引用四、完整代码示例一、全局函数与成员函数相互转化 1、成员函数转为全局…...

编程日记 2023/9/26 5:15:06

游戏遇到的问题

天涯明月刀就是天刀的假全屏，很多天刀玩家可能玩其他游戏比较少或者对电脑了解不多，不在意帧数，但是肯定还是有一部分玩家发现了这个问题，就是“我使命召唤12都能跑到60帧的机器跑个破天刀40帧甚至30帧?”问题何在呢&#xff1…...

编程日记 2023/9/26 5:14:05

高性能系统的性能优化技巧：从专家的经验中学习 | 开源日报 No.40

binhnguyennus/awesome-scalability Stars: 48.3k License: MIT 这个项目是一个阅读列表，用于说明可扩展、可靠和高性能大规模系统的模式。该项目通过知名工程师的文章和可信参考资料来解释概念，并从为数以百万计甚至十亿用户提供服务的经过实战验证的系…...

编程日记 2023/9/26 5:13:04

Linux系统编程——进程间通信的学习

学习参考博文： 进程间的五种通信方式介绍Linux 信号介绍 Linux系统编程学习相关博文 Linux系统编程——文件编程的学习Linux系统编程——进程的学习Linux系统编程——线程的学习Linux系统编程——网络编程的学习 Linux系统编程——进程间通信的学习一、概述1. 无…...

编程日记 2023/9/26 5:12:03

人工智能AI 全栈体系（六）

第一章神经网络是如何实现的这些年神经网络的发展越来越复杂，应用领域越来越广，性能也越来越好，但是训练方法还是依靠 BP 算法。也有一些对 BP 算法的改进算法，但是大体思路基本是一样的，只是对 BP 算法个别地方的一…...

编程日记 2023/9/26 5:11:02

NPDP是什么？考了有用吗？

1）NPDP是什么？ NPDP，全称为New Product Development Professional，即新产品开发专业人员。NPDP认证是由世界产品开发协会（PDMA）推出的一项专业认证。它旨在评估和认可个人在新产品开发领域的专业知识和技能…...

编程日记 2023/9/26 5:09:00

关于安卓SVGA浅尝（二）加载数据

关于安卓SVGA浅尝（二）加载数据相关链接 SVGA官网 SVGA-github说明文档背景项目开发，都会和动画打交道，动画的方案选取，就有很多选择。如Json动画，svga动画，gif等等。各有各的优势。目前项…...

编程日记 2023/9/26 5:06:59

使用matlab产生二维动态曲线视频文件具体举例

使用matlab产生二维动态曲线视频文件举例在进行有些函数变化过程时候，需要用到直观的动态显示，本博文将举例说明利用Matlab编程进行二维动态曲线的生成视频文件。一、问题描述利用matlab编程实现 y 1 s i n ( t ) , y 2 c o s ( t ) , y 3 s i …...

编程日记 2023/9/26 5:05:57

Selenium自动化测试框架常见异常分析及解决方法

01 pycharm中导入selenium报错现象: pycharm中输入from selenium import webdriver, selenium标红原因1: pycharm使用的虚拟环境中没有安装selenium, 解决方法: 在pycharm中通过设置或terminal面板重新安装selenium 原因2: 当前项目下有selenium.py,和系统包名冲突导致, …...

编程日记 2023/9/26 5:04:57

[TI] [Textual Inversion] An image is worth an word

自己的理解： 根据几个图像，找出来一个关键字可以代表它们，然后我们可以再用这个关键字去生成新的东西。提出关键字 1 Introduction word->token->embedding Textual Inversion过程需要： ① a fixed, pre-trained text…...

编程日记 2023/9/26 5:02:55

remote: The project you were looking for could not be found

git拉取公司项目时报错： remote: The project you were looking for could not be found 发生这个问题的原因，在于git账号可能并未真正登录。我们可以通过打开电脑的凭据管理器，查看git当前的登录是否正常。参考链接：参考...

编程日记 2023/9/26 5:01:54

https跳过SSL认证时是不是就是不加密的,相当于http?

https跳过SSL认证时是不是就是不加密的,相当于http?，其实不是，HTTPS跳过SSL认证并不相当于HTTP，也不意味着没有加密。请注意以下几点： HTTPS（Hypertext Transfer Protocol Secure）本质上是在HTTP的基础上…...

编程日记 2023/9/26 4:59:51

linux下链接

linux下链接用法 ln链接格式与介绍 linux下链接用法一、链接的使用格式二、链接的介绍一、链接的使用格式链接： 格式： ln 源文件链接文件硬链接 ln -s 源文件链接文件软连接硬链接文件占磁盘空间但是删除源文件不会影响硬链接文件软链接文件不…...

编程日记 2023/9/26 4:58:51

conda相比python好处

Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...

编程新知 2026/1/23 12:42:28

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】：开启编程世界的奇妙冒险嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...

编程新知 2025/10/31 20:37:10

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。步骤如下： 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载，下载地址：https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2026/1/31 9:18:40

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...

编程新知 2026/1/29 2:22:39

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪） 原创笔记：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 上一篇：《数据结构第4章数组和广义表》…...

编程新知 2026/2/4 20:23:50

密码学基础——SM4算法

博客主页：christine-rr-CSDN博客专栏主页：密码学 📌 【今日更新】📌 对称密码算法——SM4 目录一、国密SM系列算法概述二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换编辑…...

编程新知 2026/2/6 22:39:10

大数据治理的常见方式

大数据治理的常见方式大数据治理是确保数据质量、安全性和可用性的系统性方法，以下是几种常见的治理方式： 1. 数据质量管理核心方法： 数据校验：建立数据校验规则（格式、范围、一致性等）数据清洗&…...

编程新知 2025/10/6 12:34:16

怎么开发一个网络协议模块（C语言框架）之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...

编程新知 2025/8/28 4:17:05

李沐--动手学深度学习--GRU

1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...

编程新知 2026/2/5 23:40:45

准备Vue.js环境

Vue.js基本语法：声明式渲染

绑定元素属性

双向数据绑定

条件渲染

列表渲染

事件驱动

侦听属性

练习

相关文章：