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

vue.js入门

news 2026/2/8 10:27:11

一. 框架概述

二. vue常用命令

2.1 插值表达式

2.2 v-text

2.3 v-html

2.4 v-on

2.5 v-model

2.6 v-show

2.7 v-if

2.8 v-else

2.9 v-bind

2.10 v-for

三. vue生命周期函数

一. 框架概述

二. vue常用命令

2.1 插值表达式

2.2 v-text

2.3 v-html

2.4 v-on

2.5 v-model

2.6 v-show

2.7 v-if

2.8 v-else

2.9 v-bind

2.10 v-for

三. vue生命周期函数

四.前端项目结构

五.在HBuilder X中搭建vue-cli项目

1. 安装node.js前端环境

2. HBuilder X创建一个vue-cli项目

3. vue-cli项目结构

4. 如何运行前端项目

5. 创建组件

6. 组件路由(页面跳转)

6.1 创建router目录

6.2 使用路由

6.3 在main.js中配置路由

六. 解决npm下载依赖很慢

一. 框架概述

我们之前写的javaScript代码都是原生的,而框架是在基础语言之上,对其进行了封装,使我们只关心要操作的数据,而不关心如何从对象上得到数据,方便程序员进行开发,提高效率的,我们要介绍的vue.js就是前端的一种框架,它是对javaScript的一种封装

二. vue常用命令

2.1 插值表达式

写法:{{vue中的数据}}

作用:可以根据括号里vue中的数据获取到对应的值,只要vue中与它对应的数据发生改变,插值表达式中的值也会发生改变,一般用于设置文本内容,不影响标签中原本的值,但不能解析内容中的html标签

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue.js --><script src="js/v2.6.10/vue.min.js"></script></head><body>{{message}} 插入一个值,不影响标签中的其他内容{{message}}不能解析内容中html标签--><div id="app"><p>{{message}} aaaaa</p></div><script>/*创建一个vue对象*/var app = new Vue({el: '#app',data:{message: '<b>Hello Vue!</b>'}})</script></body>
</html>

2.2 v-text

作用:设置标签中的文本内容,默认格式会覆盖标签中原本的内容,用插值表达式不会覆盖标签中原本的内容,不能解析内容中的html标签

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue.js --><script src="js/v2.6.10/vue.min.js"></script></head><body><--{{message}} 插入一个值,不影响标签中的其他内容v-text="message" 会覆盖标签中其他内容--><div id="app"><p>{{message}} aaaaa</p><p v-text="message">aaaaa</p></div><script>/*创建一个vue对象*/var app = new Vue({el: '#app',data:{message: '<b>Hello Vue!</b>'}})</script></body>
</html>

2.3 v-html

作用:设置元素的innerHTML,可以解析内容中的标签,会覆盖标签中原本的内容

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue.js --><script src="js/v2.6.10/vue.min.js"></script></head><body><!--v-html="message"会覆盖标签中其他内容v-html="message" 可以解析内容中html标签--><div id="app"><p v-html="message">aaa</p></div><script>/*创建一个vue对象*/var app = new Vue({el: '#app',data:{message: '<b>Hello Vue!</b>'}})</script></body>
</html>

三者的区别:

插值表达式不会覆盖标签中原本的内容,v-text和v-HTML会覆盖标签中原本的内容
v-HTML能解析内容中的标签,插值表达式和v-text不能解析

2.4 v-on

作用:为标签绑定事件

有两种写法

在标签后面写v-on:事件类型="调用的函数"
@事件类型="调用的函数"

调用的函数定义在Vue对象的methods属性中,也可以传参

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!--导入vue.js--><script src="js/v2.6.10/vue.min.js"></script></head><body><div id="app"><!--v-on:click="函数名" 为标签添加事件@click="test2(2)"--><input type="button" value="按钮1" v-on:click="test1(1)"/><input type="button" value="按钮2" @click="test2(2)"/></div><script>/*创建一个vue对象*/var app= new Vue({el:'#app',data:{message: '<b>Hello Vue!</b>',name:""},methods:{//在vue中声明函数test1(a){this.message = this.message.split("").reverse().join("");},test2(a){this.name = "tom";}}})</script></body>
</html>

2.5 v-model

作用:便捷的设置和获取表单元素的值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!--导入vue.js--><script src="js/v2.6.10/vue.min.js"></script></head><body><div id="app"><!--v-model="变量" 把表单元素的value值 绑定到vue对象data中--><input type="button" value="按钮2" @click="test2(2)"/><input v-model="name"/></div><script>/*创建一个vue对象*/var app= new Vue({el:'#app',data:{message: '<b>Hello Vue!</b>',name:""},methods:{//在vue中声明函数test2(a){this.name = "tom";}}})</script></body>
</html>

2.6 v-show

作用:根据给定值的真假,切换元素的显示状态

原理:修改标签对应的display属性,实现显示和隐藏,效率高,v-show后面的值最终都会被解析为布尔值,为true表示显示,false表示隐藏

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 导入vue.js --><script src="js/v2.6.10/vue.min.js"></script></head><body><!--v-show="布尔值" true-显示 false-隐藏  控制标签display属性 隐藏显示标签的,效率高--><div id="app"><img v-show="isShow" src="img/3.jpg" /><img v-show="age>18" src="img/4.jpg" /></br> <!--age>18为true,显示 age<=18为false 隐藏--><input type="button" value="切换" v-on:click="oper()"><script>var v = new Vue({el: '#app',data:{isShow:true,age:15},methods:{oper(){this.isShow=!this.isShow;this.age = 19;}}})</script></body>
</html>

2.7 v-if

作用:根据v-if后面的表达式真假切换元素的显示状态,和v-show作用相同,但有一些差别

原理:当表达式为false时,表示隐藏,会直接将该标签删除,为true时又会重新创建该标签,效率比v-show低

注意区分v-show和v-if的区别

2.8 v-else

作用:v-else必须紧跟在v-if的后面,表示当if的条件不成立时,if后面的隐藏了,else后面的显示,当if条件成立,if后面显示,else后面隐藏

2.9 v-bind

作用:为元素绑定一个属性,写在v-bind后面的元素的值是一个变量,可以在vue的data中对其进行修改以达到动态改变的目的

写法:有两种

v-bind:
:

第二种写法是在元素之前直接加一个冒号即可

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 导入vue.js --><script src="js/v2.6.10/vue.min.js"></script></head><body><!--需求: 标签的属性值可以 动态修改v-bind:属性名="变量名" 一旦为属性添加v-bind 值就是一个在data中定义的变量了还可以简写为:属性名--><div id="app"><img v-bind:src="imgurl[index]" :title="array[index]"><input type="button" @click="oper()" value="操作" /></div><script>var v = new Vue({el:"#app",data:{imgurl:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"],array:["苹果手机","华为手机"],index:0,},methods:{oper(){if(this.index!=this.imgurl.length-1){this.index++;}else{this.index=0;}}}})</script></body>
</html>

特殊:给class属性绑定一个bind,可以动态切换class

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 导入vue.js --><script src="js/v2.6.10/vue.min.js"></script><style>.active{color: red;}</style></head><body><!--需求: 标签的属性值可以 动态修改v-bind:属性名="变量名" 一旦为属性添加v-bind 值就是一个在data中定义的变量了还可以简写为:属性名--><div id="app"><div v-bind:class="{active:isActive}">www</div><input type="button" @click="oper()" value="操作" /></div><script>var v = new Vue({el:"#app",data:{isActive: true},methods:{oper(){this.isActive = !this.isActive;}}})</script></body>
</html>

2.10 v-for

作用:根据数据生成列表结构

数组经常和v-for结合,通常将后端的数据以数组或集合的形式发送到前端,前端可以用v-for来将数组/集合中的内容显示到标签上(网页上)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.min.js"></script></head><body><ul id="uid"><li v-for="(user,index) in users">{{index+1}}姓名:{{user.name}}年龄:{{user.age}}性别:{{user.gender}}</li></ul><script>var v = new Vue({el:"#uid",data:{users:[{name:"jim",age:20,gender:"男"},{name:"tom",age:22,gender:"男"},{name:"lili",age:20,gender:"女"}],},})</script></body>
</html>

三. vue生命周期函数

vue对象在生命周期的每个阶段(创建前,创建后,挂载前,挂在后),都为我们提供了会自动执行的钩子函数,我们后端一般关注和标签挂载后,即mounted函数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.min.js"></script></head><body><ul id="uid"><li v-for="user in users">姓名:{{user.name}}年龄:{{user.age}}性别:{{user.gender}}</li></ul><script>var v = new Vue({el:"#uid",data:{users:[{name:"jim",age:20,gender:"男"},{name:"tom",age:22,gender:"男"},{name:"lili",age:20,gender:"女"}],student:{name:"张三",age:18,gender:"男"}},methods:{//自定义函数}, //vue对象生命周期 钩子函数 在生命周期的每个阶段为我们提供了一个函数,可以自动执行beforeCreate(){//vue对象创建前console.log("beforeCreate");},created(){//vue对象创建后console.log("created");},beforeMount(){//vue对象挂载前console.log("beforeMount");},mounted(){ //vue对象创建成功 且 与标签绑定后执行 这是我们常用的,在此自动的与后端交互console.log("mounted");}})</script></body>
</html>

vue.js入门

目录一. 框架概述二. vue常用命令 2.1 插值表达式 2.2 v-text 2.3 v-html 2.4 v-on 2.5 v-model 2.6 v-show 2.7 v-if 2.8 v-else 2.9 v-bind 2.10 v-for 三. vue生命周期函数目录一. 框架概述二. vue常用命令 2.1 插值表达式 2.2 v-text 2.3 v-html 2…...

编程日记 2024/7/27 8:13:21

API签名认证

前言（项目背景）： 这个API签名认证是API开放平台得一个重要环节，我们知道，这个API开发平台，用处就是给客户去调用现成得接口来完成某些事情得。在讲API签名认证之前，我们先模拟一个场景并且介绍…...

编程日记 2024/7/27 8:12:20

C#进阶-基于.NET Framework 4.x框架实现ASP.NET WebForms项目IP拦截器

在这篇文章中，我们将探讨如何在 ASP.NET WebForms 中实现IP拦截器，以便在 ASMX Web 服务方法和 HTTP 请求中根据IP地址进行访问控制。我们将使用自定义的 SoapExtension 和 IHttpModule 来实现这一功能，并根据常用的两种文本传输协议&#…...

编程日记 2024/7/27 8:11:19

前端（1）HTML

1、标签创建1.html文件，浏览器输入E:/frontheima/1.html，可以访问页面页面展示在VSCODE安装IDEA的快捷键，比如ctld复制一行、ctrlx剪切 <p id"p1" title"标题1">Hello,world!</p> <p id"p2"…...

编程日记 2024/7/27 8:09:17

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇嵌入式Linux驱动开发篇-第五十三章设备树下的platform驱动

i.MX8MM处理器采用了先进的14LPCFinFET工艺，提供更快的速度和更高的电源效率;四核Cortex-A53，单核Cortex-M4，多达五个内核 ，主频高达1.8GHz，2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…...

编程日记 2024/7/27 8:07:15

//^代表否定，匹配除了数字、字母、下划线的特殊字符。 private static final String SPECIAL_CHAR_PATTERN "[^a-zA-Z0-9_]"; Pattern pattern Pattern.compile(SPECIAL_CHAR_PATTERN); Matcher matcher pattern.matcher(userAccount); // 如果 find(…...

编程日记 2024/7/27 8:05:13

使用Java和Spring AMQP构建消息驱动应用

使用Java和Spring AMQP构建消息驱动应用大家好，我是微赚淘客系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！ 消息驱动应用程序在现代系统架构中扮演着重要角色，特别是在处理高并发和异步任务时。Spring AMQ…...

编程日记 2024/7/27 8:01:09

【NLP】提升文本生成多样性的实用方法

比如用T5模型，训练数据是inputText-outputText格式，预测时do_sample=False # 预测代码from transformers import TFAutoModelForSeq2SeqLM from transformers import AutoTokenizercheckpoint_local = "./path/" tokenizer = AutoTokenizer.from_pretrained(check…...

编程日记 2024/7/27 7:57:05

鸿蒙（HarmonyOS）下拉选择控件

一、操作环境操作系统: Windows 11 专业版、IDE:DevEco Studio 3.1.1 Release、SDK:HarmonyOS 3.1.0（API 9） 二、效果图三、代码 SelectPVComponent.ets Component export default struct SelectPVComponent {Link selection: SelectOption[]priva…...

编程日记 2024/7/27 7:56:03

Java类加载器实现机制详细笔记

1. 类加载器的基本概念类加载器（ClassLoader）：在Java中，类加载器负责将Java类动态加载到JVM中。它是实现动态类加载机制的核心组件，对于开发复杂应用程序（如插件系统、模块化设计等）至关重要。…...

编程日记 2024/7/27 7:55:03

Git之repo sync -l与repo forall -c git checkout用法区别(四十九)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏：多媒…...

编程日记 2024/7/27 7:53:01

【公式解释】《系统论》《控制论》《信息论》的共同重构：探索核心公式与深度解析

《系统论》《控制论》《信息论》的共同重构：探索核心公式与深度解析关键词：系统论、控制论、信息论、状态空间方程、系统矩阵。 Keywords: System theory, Control theory, Information theory, State-space equations, System matrices. 核心公式与三论共同之处在系统…...

编程日记 2024/7/27 7:50:59

电脑格式化好还是恢复出厂设置好？

电脑格式化好还是恢复出厂设置好？使用电脑的过程中，系统问题、病毒感染、性能下降等原因可能会导致我们考虑对电脑进行大规模的清理和恢复操作。本文将详细探讨电脑格式化和恢复出厂设置的区别、优缺点，以及不同场景选择哪种方法合适。选择电…...

编程日记 2024/7/27 7:49:58

使用 Windows 应用程序 SDK 构建下一代应用程序

微软面临的最大问题之一是如何让 Windows 再次成为吸引开发者的平台。无论用户使用什么设备和操作系统，都可以很容易地将 Web 前端放在支持桌面和移动用户的云原生应用程序上。我们处在一个奇怪的境地，唯一能利用最新 PC 硬件的应用程序是 Office、Phot…...

编程日记 2024/7/27 7:47:56

可消费的媒体类型和可生成的媒体类型

可消费的媒体类型和可生成的媒体类型在 Spring MVC 中，“可消费的媒体类型”和“可生成的媒体类型”是两个重要的概念，用于控制控制器方法处理和返回的内容类型。它们分别通过 consumes 和 produces 属性来指定。下面是它们的详细区别： 可…...

编程日记 2024/7/27 7:46:55

C++中指针与迭代器的区别

C中的迭代器和指针都是用于访问和操作内存中的数据结构的机制，但它们在使用方式和功能上有一些关键的区别。 #mermaid-svg-23bevhEih3Ch4ucl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-23bevhEih3Ch…...

编程日记 2024/7/27 7:43:52

若依框架 : 生成代码

6.生成代码 6.1.配置生成设置 ruoyi-generator -> src -> main -> resources -> generator.yml 由于案例中表都有前缀为 tta_ , 这里设置去掉 6.2.生成代码 6.2.1.导入数据库中的表 6.2.2.修改设置 6.2.2.1.设置生成信息点击编辑 -> 生成信息特别…...

编程日记 2024/7/27 7:41:49

RTMP协议解析

RTMP（Real Time Message Protocol）是一种由Adobe公司提出的应用层协议，主要用于实时音视频数据的传输。RTMP协议的主要有以下特点： 1. 多路复用：RTMP允许多个音视频数据流在单个TCP连接上进行传输。 2. 分包传输&…...

编程日记 2024/7/27 7:38:45

禁忌搜索算法（Tabu Search，TS）及其Python和MATLAB实现

禁忌搜索算法是一种现代启发式搜索方案，主要用于解决组合优化问题。该算法由George F. Lugeral于1986年首次提出，旨在增强局部搜索算法的性能，避免其陷入局部最优解。禁忌搜索利用一个称为“禁忌表”的数据结构，记住最近访问的解决…...

编程日记 2024/7/27 7:36:42

Meta发布Llama 3.1 405B模型：开源与闭源模型之争的新篇章

引言在人工智能领域，开源与闭源模型之争一直是热点话题。近日，Meta发布了最新的Llama 3.1 405B模型，以其强大的性能和庞大的参数规模，成为了开源模型中的佼佼者。本文将详细介绍Llama 3.1 405B模型的性能、功能及其在开源领域的…...

编程日记 2024/7/27 7:35:41

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/1/28 10:02:54

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

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

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

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2026/2/6 14:42:11

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具之外，还提供了基于网页版的 ESP LA…...

编程新知 2026/2/3 8:13:35

Axios请求超时重发机制

Axios 超时重新请求实现方案在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...

编程新知 2026/2/7 4:21:44

Java线上CPU飙高问题排查全指南

一、引言在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议，专门用于在数字音频设备之间传输数字音频数据。它由飞利浦（Philips）公司开发，以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2026/2/1 2:08:53

一. 框架概述

二. vue常用命令

2.1 插值表达式

2.2 v-text

2.3 v-html

2.4 v-on

2.5 v-model

2.6 v-show

2.7 v-if

2.8 v-else

2.9 v-bind

2.10 v-for

三. vue生命周期函数

相关文章：