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

【Vue】Vue快速入门

news 2026/5/28 8:02:45

Vue快速入门

Vue.js的引入

要先有一个vue.js文件，可以在vue官网下载，将其复制到项目中并在html页面中进行引入：

在head标签内引入，src内是vue的路径

<!--    引入vue.js--><script language="JavaScript" src="xxxxxxxxx/vue.js"></script>

Vue的js语法要写在head标签下的下面这个标签内:

下面代码实现了一个简单的alert hello功能

<!--    Vue的js可以写在这里--><script language="JavaScript">function hello() {person.sayHello();}var person = new Object();person.pid="p001";person.pname="jim";person.sayHello = function(){alert("Hello World");}<!--        在窗口加载时触发下面方法-->window.onload=function(){// 存储一个个键值对，注意花括号在里面var vue = new Vue({});}</script>

Vue中对象的定义

可以向下面这样使用等式的方式直接进行定义与赋值

一个person对象的定义与赋值

        var person = new Object();person.pid="p001";person.pname="jim";person.sayHello = function(){alert("Hello World");}

也可以像下面这样定义：

        //对象定义的另一种方式，注意花括号后有分号,以逗号分割，最后一个属性不带逗号var person = {"pid" : "p001","pname" : "jim","sayHello" : function() {alert("Hello World");}};

Vue中文本的显示

在vue的语法中定义window.onload中定义var vue = new Vue({})并在其中进行定义：

<head><meta charset="UTF-8"><title>Title</title><script language="JavaScript" src="../script/vue.js"></script><script language="JavaScript">window.onload=function(){var vue = new Vue({"el" : "#div0",data : {msg : "hello!!!",uname : "请输入"}});}</script>
</head>
<body>
<div id="div0"><span>{{msg}}</span><input type="text" v-bind:value="uname" />
</div>
</body>

v-if、v-else、v-show可以控制标签的显示

<div id="div0"><input type="text" v-model:value="num" />
<!--    v-if实现简单的成立就显示v-else表示不成立就显示（否则的意思）成对出现，中间不能有任何语句
--><div v-if="num%2==0" style="width:200px;height:200px;background-color: chartreuse">&nbsp;</div>
<!--    这里不能有任何语句--><div v-else="num%2==0" style="width:200px;height:200px;background-color: coral">&nbsp;</div><!--    v-show也有v-if的效果，但其在语句不成立时会在后面添加display="none"即不显示语句而v-if则会直接将语句不生效（看起来和删除一样）
--><div v-show="num%2==0" style="width:200px;height:200px;background-color: cornflowerblue">&nbsp;</div>
</div>

v-on:click可以实现点击后方法的调用

    <script language="JavaScript">
<!--        在初始化窗口时的做法-->window.onload=function(){var vue = new Vue({"el" : "#div0",data : {msg : "hello world"},//vue中的方法写在这里methods : {// 将字符串反转的方法示例myReverse : function() {//将字符串全部拿出来，反转再拼接this.msg = this.msg.split("").reverse().join("");}}});}</script>
</head>
<body>
<div id="div0"><span>{{msg}}</span>
<!--    点击后调用myReverse方法--><input type="button" value="反转" v-on:click="myReverse" /><!--    也可以这么写--><input type="button" value="反转" @click="myReverse" />
</div>
</body>

侦听

侦听标签，当某个属性发生变化时，自动执行某个方法

//侦听，当其中的属性放生变化时，执行对应的方法
watch : {num1:function(newValue) {this.num3 = parseInt(this.num2) + parseInt(newValue);},num2:function(newValue) {this.num3 = parseInt(this.num1) + parseInt(newValue);}
}...<div id="div0"><input type="text" v-model="num1" size="2" />+<input type="text" v-model="num2" size="2" />=<span>{{num3}}</span>
</div>

对象加载时间的方法调用：

    <script language="JavaScript" src="../script/vue.js"></script><script language="JavaScript">
<!--        在初始化窗口时的做法-->window.onload=function(){var vue = new Vue({"el" : "#div0",data : {msg : "h1"},methods : {changeMsg : function() {this.msg = "hello world";}},/* vue对象创建之前 */beforeCreate:function(){console.log("beforeCreate:Vue对象创建之前..............");//vue对象创建之前，msg属性还没有创建console.log("msg:" + this.msg);},/* vue对象创建之后 */created:function() {console.log("Created:Vue对象创建之后..............");//vue对象创建之后，msg属性被创建并赋值了console.log("msg:" + this.msg);},/* 数据装载之前，意思是数据还没有显示在页面上时 */beforeMount:function() {console.log("Create:数据装载之前.....................");/* 获取span内部的数据 */console.log("msg:" + document.getElementById("span").innerText);},/* 数据装载之后 */mounted:function() {console.log("Mounted:数据装载之后。。。。。。。。。。。。。。。");console.log("msg:" + document.getElementById("span").innerText);},/** 以下两个时间的方法只有在数据被改变之后才会调用* *//* 数据更新之前 */beforeUpdate : function() {console.log("数据更新之前...............................");console.log("msg:" + this.msg);console.log("msg:" + document.getElementById("span").innerText);},/* 数据更新之后 */updated : function() {console.log("数据更新之后...............................");console.log("msg:" + this.msg);console.log("msg:" + document.getElementById("span").innerText);}});}</script>
</head>
<body>
<div id="div0"><span id="span">{{msg}}</span><input type="button" value="改变" @click="changeMsg" />
</div>
</body>

浏览器控制台的输出如下：

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:9330 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:22 beforeCreate:Vue对象创建之前..............
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:24 msg:undefined
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:29 Created:Vue对象创建之后..............
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:31 msg:h1
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:36 Create:数据装载之前.....................
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:38 msg:{{msg}}
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:43 Mounted:数据装载之后。。。。。。。。。。。。。。。
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:44 msg:h1
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:49 数据更新之前...............................
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:50 msg:hello world
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:51 msg:h1
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:56 数据更新之后...............................
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:57 msg:hello world
demo07.html?_ijt=g1hbsg8c7bsaafas74jk3juslf:58 msg:hello world

相关文章：

【Vue】Vue快速入门

Vue快速入门 Vue.js的引入 要先有一个vue.js文件&#xff0c;可以在vue官网下载&#xff0c;将其复制到项目中并在html页面中进行引入&#xff1a; 在head标签内引入&#xff0c;src内是vue的路径 <!-- 引入vue.js--><script language"JavaScript" s…...

编程日记 2023/6/1 8:39:34

二本菜鸡，颓废两年的自我救赎

大家好&#xff0c;我是帅地。 随着校招的结束&#xff0c;帅地的星球里也有不少小伙伴前来报喜&#xff0c;今天这篇&#xff0c;是星球一个颓废两年同学的自我救赎之路&#xff0c;我觉得他的经历和很多人一样&#xff0c;前两年可能就颓废了&#xff0c;后面才后知后觉&…...

编程日记 2023/5/11 1:07:01

Spring boot 常用注解

SpringBootApplication&#xff1a;用于启动Spring Boot应用程序的主类上&#xff0c;组合了Configuration、EnableAutoConfiguration和ComponentScan三个注解。 RestController &#xff1a;修饰类&#xff0c;使用RestController注解的Controller中的方法默认返回值都会以JS…...

编程日记 2023/5/11 1:01:59

mysql从零开始（05）----锁

全局锁 使用 # 启用全局锁 flush tables with read lock # 释放全局锁 unlock tables开启全局锁后&#xff0c;整个数据库就处于只读状态了&#xff0c;这种状态下&#xff0c;对数据的增删改操作、对表结构的更改操作都会被阻塞。 另外&#xff0c;当会话断开&#xff0c;全…...

编程日记 2023/5/11 0:56:58

《Linux 内核设计与实现》03. 进程管理

文章目录 进程描述符及任务结构分配进程描述符进程描述符的存放进程状态设置当前进程状态进程上下文进程家族树 进程创建线程在 Linux 中的实现创建线程内核线程 进程终结删除进程描述符孤儿进程 进程描述符及任务结构 内核把进程存放在任务队列&#xff08;task list&#xf…...

编程日记 2023/5/11 0:51:57

深入探究HDFS：高可靠、高可扩展、高吞吐量的分布式文件系统【上进小菜猪大数据系列】

上进小菜猪&#xff0c;沈工大软件工程专业&#xff0c;爱好敲代码&#xff0c;持续输出干货。 引言 在当今数据时代&#xff0c;数据的存储和处理已经成为了各行各业的一个关键问题。尤其是在大数据领域&#xff0c;海量数据的存储和处理已经成为了一个不可避免的问题。为了应…...

编程日记 2023/5/11 0:46:56

GIMP制作艺术字技巧

GIMP下载官网 https://www.gimp.org/downloads/ 我使用的版本 2.10.32 字体下载 https://ziyouziti.com/index-index-all.html 下载解压之后会有otf、ttf等字体文件&#xff0c;需要拷贝到gimp当前用户目录 C:\Users\用户名\AppData\Roaming\GIMP\2.10\fonts GIMP绘制字…...

编程日记 2023/5/31 18:59:38

Redis 布隆过滤器总结

Redis 布隆过滤器总结 适用场景 大数据判断是否存在来实现去重&#xff1a;这就可以实现出上述的去重功能&#xff0c;如果你的服务器内存足够大的话&#xff0c;那么使用 HashMap 可能是一个不错的解决方案&#xff0c;理论上时间复杂度可以达到 O(1) 的级别&#xff0c;但是…...

编程日记 2023/5/11 0:36:53

云基础设施安全：7个保护敏感数据的最佳实践

导语&#xff1a;云端安全防护进行时&#xff01; 您的组织可能会利用云计算的实际优势&#xff1a;灵活性、快速部署、成本效益、可扩展性和存储容量。但是&#xff0c;您是否投入了足够的精力来确保云基础设施的网络安全&#xff1f; 您应该这样做&#xff0c;因为数据泄露、…...

编程日记 2023/5/11 0:31:52

centos7安装nginx

1.配置环境 1).gcc yum install -y gcc2).安装第三方库 pcre-devel yum install -y pcre pcre-devel3).安装第三方库 zlib yum install -y zlib zlib-devel2.下载安装包并解压 nginx官网下载&#xff1a;http://nginx.org/en/download.html 或者 使用wget命令进行下载 wg…...

编程日记 2023/5/11 0:26:51

PyQt5 基础篇（一）-- 安装与环境配置

1 PyQt5 图形界面开发工具 Qt 库是跨平台的 C 库的集合&#xff0c;是最强大的 GUI 库之一&#xff0c;可以实现高级 API 来访问桌面和移动系统的各种服务。PyQt5 是一套 Python 绑定 Digia QT5 应用的框架。PyQt5 实现了一个 Python模块集&#xff0c;有 620 个类&#xff0c;…...

编程日记 2023/5/11 0:21:50

Java—JDK8新特性—函数式接口【内含思维导图】

目录 3.函数式接口 思维导图 3.1 什么是函数式接口 3.2 functionalinterface注解 源码分析 3.3 Lambda表达式和函数式接口关系 3.4 使用函数式接口 3.5 内置函数式接口 四大核的函数式接口区别 3.5.1 Supplier 函数式接口源码分析 3.5.2 Supplier 函数式接口使用 3.…...

编程日记 2023/5/11 0:16:49

【MySQL】外键约束和外键策略

一、什么是外键约束&#xff1f; 外键约束&#xff08;FOREIGN KEY&#xff0c;缩写FK&#xff09;是用来实现数据库表的参照完整性的。外键约束可以使两张表紧密的结合起来&#xff0c;特别是针对修改或者删除的级联操作时&#xff0c;会保证数据的完整性。 外键是指表…...

编程日记 2023/5/11 0:11:48

3. SQL底层执行原理详解

一条SQL在MySQL中是如何执行的 1. MySQL的内部组件结构1.1 Server层1.2 Store层 2. 连接器3. 分析器4. 优化器5. 执行器6. bin-log归档 本文是按照自己的理解进行笔记总结&#xff0c;如有不正确的地方&#xff0c;还望大佬多多指点纠正&#xff0c;勿喷。 1. MySQL的内部组件结…...

编程日记 2023/5/11 0:06:47

Bus动态刷新

Bus动态刷新全局广播配置实现 启动 EurekaMain7001ConfigcenterMain3344ConfigclientMain3355ConfigclicntMain3366 运维工程师 修改Gitee上配置文件内容&#xff0c;增加版本号发送POST请求curl -X POST "http://localhost:3344/actuator/bus-refresh" —次发送…...

编程日记 2023/5/30 2:43:11

逆波兰式的写法

一、什么是波兰式&#xff0c;逆波兰式和中缀表达式 6 *(37) -2 将运算数放在数值中间的运算式叫做中缀表达式 - * 6 3 7 2 将运算数放在数值前间的运算式叫做前缀表达式 6 3 7 * 2 - 将运算数放在数值后间的运算式叫做后缀表达式 二、生成逆波兰表达式 6 *(37) -2 生成…...

编程日记 2023/5/10 23:56:45

Linux系统日志介绍

Linux系统日志都是放在“/var/log”目录下面&#xff0c;各个日志文件的功能&#xff1a; /var/log/messages — 包括整体系统信息&#xff0c;其中也包含系统启动期间的日志。此外&#xff0c;mail&#xff0c;cron&#xff0c;daemon&#xff0c;kern和auth等内容也记录在va…...

编程日记 2023/5/10 23:51:44

第三十二章 React路由组件的简单使用

1、NavLink的使用 一个特殊版本的 Link&#xff0c;当它与当前 URL 匹配时&#xff0c;为其渲染元素添加样式属性 <NavLink className"list-group-item" to"/home">Home</NavLink> <NavLink className"list-group-item" to&quo…...

编程日记 2023/5/10 23:46:43

“裸奔”时代下，我们该如何保护网络隐私？

当我们在互联网上进行各种活动时&#xff0c;我们的个人信息和数据可能会被攻击者窃取或盗用。为了保护我们的隐私和数据安全&#xff0c;以下是一些实用的技巧和工具&#xff0c;可以帮助您应对网络攻击、数据泄露和隐私侵犯的问题&#xff1a; 使用强密码&#xff1a;使用独特…...

编程日记 2023/6/1 1:36:56

c#笔记-方法

方法 方法定义 方法可以将一组复杂的代码进行打包。 声明方法的语法是返回类型 方法名 括号 方法体。 void Hello1() {for (int i 0; i < 10; i){Console.WriteLine("Hello");} }调用方法 方法的主要特征就是他的括号。 调用方法的语法是方法名括号。 He…...

编程日记 2023/5/10 23:36:40

Godot PCK解包原理与专业逆向实践指南

1. 这不是“解压软件”&#xff0c;而是Godot游戏逆向工程的第一把手术刀你刚下载了一款用Godot引擎开发的独立游戏&#xff0c;想研究它的UI动效逻辑&#xff0c;或者复刻一段粒子特效&#xff0c;又或者只是单纯好奇——那个让你反复通关三次的像素风过场动画&#xff0c;图层…...

编程新知 2026/5/26 5:04:27

AI Agent在智能风控中的实战：多智能体欺诈检测与预警

AI Agent在智能风控中的实战：多智能体欺诈检测与预警 你有没有过明明是正常交易却被银行冻结账户的糟糕体验？或是听说过某电商平台上线新活动首日就被黑产团伙薅走数千万补贴的新闻？随着黑产欺诈向团伙化、专业化、动态化演进，传统依赖规则引擎、单模型机器学习的风控体系已…...

编程新知 2026/5/26 4:58:26

基于2D工程图几何特征与梯度提升模型的制造成本智能预测

1. 项目概述&#xff1a;从图纸到报价的智能革命在制造业&#xff0c;尤其是像汽车零部件这样的离散制造领域&#xff0c;报价速度直接决定了订单的生死。传统上&#xff0c;拿到一张新的2D工程图&#xff08;DWG格式&#xff09;&#xff0c;成本工程师需要花上几天甚至几周时…...

编程新知 2026/5/26 3:30:08

如何快速解锁艾尔登法环帧率限制：终极性能优化指南

如何快速解锁艾尔登法环帧率限制&#xff1a;终极性能优化指南 【免费下载链接】EldenRingFpsUnlockAndMore A small utility to remove frame rate limit, change FOV, add widescreen support and more for Elden Ring 项目地址: https://gitcode.com/gh_mirrors/el/EldenR…...

编程新知 2026/5/25 21:33:52

解决方法：庐山派K230接串口没识别到端口问题

一、插入usb转串口工具之前二、插入usb转串口工具之后三、解决方法说明&#xff1a;&#x1f50d; 核心原因&#xff1a;USB Serial 设备&#xff0c;没有被识别为 COM 口你现在看到的 USB Serial&#xff0c;说明开发板已经正常启动了&#xff0c;USB 也被电脑识别到了&#x…...

编程新知 2026/5/25 21:11:33

DIY四路自动音频源切换器：从信号检测到继电器隔离的完整设计

1. 项目概述与核心需求解析作为一个喜欢在工作室里捣鼓各种音频设备的玩家&#xff0c;我经常遇到一个挺烦人的问题&#xff1a;我的功放只有一组输入&#xff0c;但我想接的设备却有好几个——台式电脑、平板、蓝牙接收模块&#xff0c;还有一台树莓派。每次想切换音源&#x…...

编程新知 2026/5/25 20:59:15

别再死记硬背了！用UE材质里的点积、叉积，5分钟搞定模型表面动态光效

用UE材质玩转动态光效&#xff1a;点积、叉积实战指南第一次接触UE材质编辑器时&#xff0c;看到那些密密麻麻的数学节点总让人头皮发麻。特别是"点积"、"叉积"这些听起来就很高深的术语&#xff0c;很容易让美术背景的创作者望而却步。但你知道吗&#xf…...

编程新知 2026/5/25 20:44:26

【C语言】C 语言为什么叫 C 语言呢？

【C语言】C 语言为什么叫 C 语言呢&#xff1f;笔记改自于王道训练营资料 其实是因为先有高级语言ALGOL 60&#xff0c;简称 A 语言&#xff0c;后来经过简化&#xff0c;变为 BCPL 语言&#xff0c;简称 B 语言&#xff0c;而 C 语言是在 B 语言的基础之上发展而来的&#xff…...

编程新知 2026/5/25 20:44:11

3个实用场景教你轻松解锁网易云音乐NCM加密文件：ncmdumpGUI完整指南

3个实用场景教你轻松解锁网易云音乐NCM加密文件&#xff1a;ncmdumpGUI完整指南 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾经下载了网易云音乐的…...

编程新知 2026/5/25 17:59:42

不止于绘图：用GMT 6.4的`grdtrack`和`project`命令玩转地形剖面分析与可视化

不止于绘图&#xff1a;用GMT 6.4的grdtrack和project命令玩转地形剖面分析与可视化 当我们谈论地理空间分析时&#xff0c;很多人首先想到的是绘制精美的地图。但GMT&#xff08;Generic Mapping Tools&#xff09;的真正魅力在于它强大的地理计算能力。本文将带你超越基础绘图…...

编程新知 2026/5/25 17:50:35