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

vue.js入门

news 文章来源：https://blog.csdn.net/qq_64782704/article/details/140666150 2025/4/21 4:36:04

目录

一. 框架概述

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

三者的区别: 

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

2.4 v-on

作用:为标签绑定事件

有两种写法

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

调用的函数定义在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中对其进行修改以达到动态改变的目的

写法:有两种

  1. v-bind:
  2. :

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

<!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签名认证

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

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

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

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

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

前端（1）HTML

1、标签 创建1.html文件&#xff0c;浏览器输入E:/frontheima/1.html&#xff0c;可以访问页面 页面展示 在VSCODE安装IDEA的快捷键&#xff0c;比如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工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…...

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

Java正则表达式判断有无特殊字符

//^代表否定&#xff0c;匹配除了数字、字母、下划线的特殊字符。 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构建消息驱动应用 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 消息驱动应用程序在现代系统架构中扮演着重要角色&#xff0c;特别是在处理高并发和异步任务时。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&#xff08;API 9&#xff09; 二、效果图 三、代码 SelectPVComponent.ets Component export default struct SelectPVComponent {Link selection: SelectOption[]priva…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

C中的迭代器和指针都是用于访问和操作内存中的数据结构的机制&#xff0c;但它们在使用方式和功能上有一些关键的区别。 #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&#xff08;Real Time Message Protocol&#xff09;是一种由Adobe公司提出的应用层协议&#xff0c;主要用于实时音视频数据的传输。RTMP协议的主要有以下特点&#xff1a; 1. 多路复用&#xff1a;RTMP允许多个音视频数据流在单个TCP连接上进行传输。 2. 分包传输&…...

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

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

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

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

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

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

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

Linux网络协议深度解析：从IP到TCP/IP堆栈

Linux网络协议深度解析是一个复杂而详细的主题&#xff0c;它涵盖了从基本的数据包传输到复杂的协议交互。以下是对"Linux网络协议深度解析&#xff1a;从IP到TCP/IP堆栈"这一主题的简要解析&#xff1a; IP协议&#xff08;Internet Protocol&#xff09; •作用:…...

编程日记 2024/7/27 7:30:37

AWS DMS MySQL为源端，如何在更改分区的时候避免报错

问题描述&#xff1a; 文档[1]中描述MySQL compatible Databases作为DMS任务的源端&#xff0c;不支持MySQL 分区表的 DDL 更改。 在源端MySQL进行分区添加时&#xff0c;日志里会出现如下报错&#xff1a; [SOURCE_CAPTURE ]W: Cannot change partition in table members…...

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

Java从基础到高级特性及应用

Java&#xff0c;作为一门历史悠久且广泛应用的编程语言&#xff0c;自1995年问世以来&#xff0c;便以其跨平台性、面向对象、自动内存管理等特点&#xff0c;在软件开发领域占据了举足轻重的地位。从桌面应用到企业级系统&#xff0c;从移动开发到云计算服务&#xff0c;Java…...

编程日记 2024/7/27 7:27:34

JavaScript(17)——事件监听

什么是事件&#xff1f; 事件是在编程时系统内发生的动作或发生的事情&#xff0c;比如用户在网页上单击一个按钮 什么是事件监听&#xff1f; 就是让程序检测是否有事件产生&#xff0c;一旦有事件触发&#xff0c;就立刻调用一个函数做出响应&#xff0c;也称为绑定事件或…...

编程日记 2024/7/27 7:25:32

Dav_笔记11：SQL Tuning Overview-sql调优 之 4

开发高效的SQL语句 本节介绍了提高SQL语句效率的方法： ■验证优化程序统计信息 ■审查执行计划 ■重构SQL语句 ■重组索引 ■修改或禁用触发器和约束 ■重组数据 ■随着时间的推移维护执行计划 ■尽可能少地访问数据 验证优化程序统计信息 查询优化器在确定最佳执行…...

编程日记 2024/7/27 7:23:30

vue3引入openlayers

安装ol包 OpenLayers作为 ol npm包提供&#xff0c;它提供了官方支持的API的所有模块。 官方地址&#xff1a;ol npm install ol模块和子模块约定 具有CamelCase名称的OpenLayers模块提供类作为默认导出&#xff0c;并且可能包含其他常量或函数作为命名导出&#xff1a; i…...

编程日记 2024/7/27 7:22:30

大数据管理中心设计规划方案（可编辑的43页PPT）

引言&#xff1a;随着企业业务的快速发展&#xff0c;数据量急剧增长&#xff0c;传统数据管理方式已无法满足高效处理和分析大数据的需求。建立一个集数据存储、处理、分析、可视化于一体的大数据管理中心&#xff0c;提升数据处理能力&#xff0c;加速业务决策过程&#xff0…...

编程日记 2024/7/27 7:21:29

Android --- 广播

广播是什么&#xff1f; 一种相互通信&#xff0c;传递信息的机制&#xff0c;组件内、进程间&#xff08;App之间&#xff09; 如何使用广播&#xff1f; 组成部分 发送者-发送广播 与启动其他四大组件一样&#xff0c;广播发送也是使用intent发送。 设置action&#xff…...

编程日记 2024/7/27 7:17:24

AR 眼镜之-蓝牙电话-实现方案

目录 &#x1f4c2; 前言 AR 眼镜系统版本 蓝牙电话 来电铃声 1. &#x1f531; 技术方案 1.1 结构框图 1.2 方案介绍 1.3 实现方案 步骤一&#xff1a;屏蔽原生蓝牙电话相关功能 步骤二&#xff1a;自定义蓝牙电话实现 2. &#x1f4a0; 屏蔽原生蓝牙电话相关功能 …...

编程日记 2024/7/27 7:15:23

stl-set

目录 目录 内部自动有序、不含重复元素 关于能不能自己造一个cmp&#xff0c;还挺复杂。 访问&#xff1a;只能用迭代器且受限 添加元素&#xff1a;没有pushback&#xff0c;用insert 复杂度&#xff1a;ologn ​编辑 查找元素find&#xff08;&#xff09;&#xff1…...

编程日记 2024/7/27 7:14:22