web前端——VUE

1.什么是框架？

①概述

框架结构就是基本功能，把很多基础功能已经实现了、封装了。在基础语言之上，对各种基础功能进行封装，方便开发者，提高开发效率

②前端框架

javaScript是原生的

vue.js： 是一个js框架，不是代替js的，是对js进行了封装

UI框架：将前端常用的的一些组件（表单，表格，消息提示）进行封装（对html和css进行了封装） 

③后端框架 

mybatis--jdbc

spring

2.什么是 Vue.js？

vue.js是一个js框架，不是代替js的，是对js进行了封装。Vue (读音 /vjuː /，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架。

https://v2.cn.vuejs.org/icon-default.png?t=N7T8https://v2.cn.vuejs.org/

3.Vue.js 优点

①体积小 压缩后 33K
②更高的运行效率
用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的DOM 操作计算出来并优化的技术，最后在计算完毕才真正将 DOM 操作提交
③双向数据绑定,简化 Dom 操作
通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象,把更多的精力投入到业务逻辑上. MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开
④生态丰富、学习成本低
市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件，来即用实现快速开发，对初学者友好、入门容易、学习资料多

4.vue安装

①方式 1:直接用 <script> 引入

新建一个vue项目普通模式
导入 js 文件
<script src="js/vue.js"></script>

②方式 2:命令行工具 (CLI)

安装教程给出了更多安装 Vue 的方式，请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时

③ 第一个 Vue 程序

● 导入开发版本的 Vue.js
● 创建 Vue 实例对象，设置 el 属性和 data 属性
● 使用简洁的模板语法把数据渲染到页面上 
<!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">
			{{ message }},{{ name }}<!-- {{  }} 差值表达式，可以获取data中定义的数据-->
			<input v-model="name"/>
		</div>
		<script>
			/* 
			 创建一个vue对象
			 */
			var app = new Vue({
			  el: '#app',//绑定挂载点，可以使用其他的选择器，建议使用id选择器，不能使用body,html与vue对象绑定
			  data: {//定义数据，可以定义多个
			    message: 'Hello Vue!',
				name:"jim"
			  }
			})
		</script>
	</body>
</html>

5.Vue 指令

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性

①差值表达式

{{  }} 差值表达式，可以获取data中定义的数据，插入一个值不影响标签中的其他内容，不能解析内容中的html标签

<p>{{ message }} aaaa</p>

②v-text

作用是设置标签的文本内容 ，默认写法会替换全部内容，不能解析内容中的html标签，使用差值表达式可以替换指定内容，内部支持写表达式
<p v-text="message">博客</p>
<p>{{message}}博客</p>

③v-html

作用是设置元素的 innerHTML ，内容中有 html 结构会被解析为标签，内部支持写表达式
<p v-html="message">博客</p> 
<!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" 不能解析内容中的html标签
		     v-html="message" 可以解析内容中html标签
		-->
		<div id="app">
			<!-- ①{{  }} 差值表达式  插入一个值不影响标签中的其他内容-->
			<p>{{ message }} aaaa</p>
			<!-- ②v-html 会覆盖标签中的其他内容 -->
			<p v-html="message">aaaa</p>
			<!-- ③v-text 会覆盖标签中的其他内容-->
			<p v-text="message">aaaa</p>
		</div>
		<script>
			/* 
			 创建一个vue对象
			 */
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!'
			  }
			})
		</script>
	</body>
</html>

 ④v-on

作用是为元素绑定事件 ，事件名不需要写 on 指令可以简写为@，绑定的方法定义在methods 属性中,可以传入自定义参数
<input type="button" value="按钮" v-on:click="test(1,2)" />
<input type="button" value="按钮" @click="test" />
   methods:{
    test(a,b) {
       alert(a);
   }
}

 ⑤v-model

作用是便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联，绑定的数据<---->表单元素的值 双向数据绑定
<input type="text" v-model="message"/>
<p>{{message}}</p>
data:{
  message:""
} 
<!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">
			<input type="button" value="按钮" v-on:click="test1(1)"/>
			<input type="button" value="按钮" @click="test2(2)"/>
			<input v-model="name"/>
			 <p>{{message}}</p>
			 <p>{{name}}</p>
		</div>
		<script>
			/* 
			 创建一个vue对象
			 */
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!',
				name:""
			  },
			  methods:{//在vue中声明函数
				  test1(a){
					this.message = this.message.split("").reverse().join("");
				  },
				  test2(a){
				  	this.name = "tom";			  
				  }
			  }
			})
		</script>
	</body>
</html>

⑥v-show

作用是根据真假切换元素的显示状态，原理是修改元素的 display，实现显示隐藏，指令后面的内容，最终都会解析为布尔值，值为 true 元素显示，值为 false 元素隐藏 ，数据改变之后，对应元素的显示状态会同步更新
<img v-show="isShow" src="img/3.jpg" />
<img v-show="age>18" src="img/3.jpg" />
data:{
isShow:true,
age:20
}

⑦v-if

作用是根据表达式的真假切换元素的显示状态，本质是通过操纵 dom 元素来切换，显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除 ，频繁的切换 v-show，反之使用 v-if，前者的切换消耗小 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				width: 100px;
				height: 100px;
			}
		</style>
		<!-- 导入vue.js -->
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<!-- 创建一个标签 -->
		<!-- 
		 v-show ="布尔值" true-"显示" false-"隐藏" 控制标签display属性，隐藏显示标签的，效率高
		 v-if = "布尔值" true-"显示" false-"隐藏" 会在隐藏时，删除了标签，显示时重新创建标签，效率低
		    v-if 可以和 v-else 联合使用，两个必须紧挨着
		 -->
		<div id="app">
			<img v-show="isShow" src="img/1.jpg"/>
			<img v-show="age>18" src="img/2.jpg"/>
			
			<img v-if="isShow" src="img/1.jpg"/>
			<img v-if="age>18" src="img/2.jpg"/>
			<img v-else src="img/1.jpg"/>
            <input type="button" @click="oper()" value="操作"/>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			   isShow:true,
			   age:15
			  },
			  methods:{//在vue中声明函数
				oper(){
					this.isShow = !this.isShow;
					this.age = 15;
				}
			  }
			})
		</script>
	</body>
</html>

⑧v-bind

作用是为元素绑定属性 ，完整写法是 v-bind：属性名 ，简写的话可以直接省略 v-bind，只保留：属性名

<img v-bind:src="imgSrc" /> <img :src="imgSrc" />

<img :title="imgTitle" :src="imgSrc" />
data:{
  imgSrc:'img/3.jpg'
  imgTitle:"这是一张图片"
}
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>
data:{
  isActive :true
} 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				width: 200px;
				height: 200px;
			}
			.active{
				color:red;
				background-color:aqua;
			}
		</style>
		<!-- 导入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]"/>
			
			<div v-bind:class="{active:isActive}">wwww</div>
			
            <input type="button" @click="oper()" value="操作"/>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
			     imgurl:["img/1.jpg","img/2.jpg"],
				 array:["苹果手机","华为手机"],
				 index:0,
				 isActive:true
			  },
			  methods:{
				oper(){
					this.index++;
					this.isActive = !this.isActive
				}
			  }
			})
		</script>
	</body>
</html>

⑨v-for

作用是根据数据生成列表结构，数组经常和 v-for 结合，使用语法是（item，index）in 数据
item 和 index 可以结合其他指令一起使用，数组长度的更新会同步到页面上是响应式的
为循环绑定一个 key 值 :key=”值” 尽可能唯一
<li v-for="item in array">
 {{item}}省
</li>
<li v-for="(item,index) in array">
{{index+1}}{{item}}省
</li>
<li v-for="(item,index) in objects">{{index+1}}{{item.name}}{{item.age}}
</li>
data:{
 array:['陕西','山西','河南'],
 objects:[
 {name:'admin',age:23},
 {name:'jim',age:22}
]
} 
<!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">
		   <ul>
			   <li v-for="user in users">
				   姓名:{{user.name}}
				   年龄:{{user.age}}
				   性别:{{user.gender}}
			   </li>
		   </ul>
		   {{student.name}} {{student.age}}
		</div>
		<script>
			
			var app = new Vue({
			  el: '#app',
			  data: {
			   users:[//数组，模拟从后端响应回来的数据
				   {name:"jim",age:20,gender:"男"},
				   {name:"jYY",age:19,gender:"男"},
				   {name:"jkk",age:15,gender:"女"}
			   ],
			   student:{name:"张三",age:20}
			  }			
            })
		</script>
	</body>
</html>

⑩Vue 实例生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会
beforeCreate: function () {
console.log('beforeCreatea ’);
},
created: function () {
console.log('createda ' );
},
beforeMount:function(){
console.log('beforeMounta’);
},
mounted:function(){
console.log('mounteda’);
} 
<!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">
			
		</div>
		<script>
			
			var app = new Vue({
			  el: '#app',
			  data: {
			   users:[

			   ]
			  },
			  beforeCreate(){
				  console.log("beforeCreate")
			  },
			  created(){
				  console.log("created")
			  },
			  beforeMount(){
				  console.log("beforeMount")
			  },
			  mounted(){//vue对象创建成功且与标签绑定后执行，这是我们常用的，再次自动的与后端交互
				  console.log("created")
			  }
			})
		</script>
	</body>
</html>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/746844.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

一文了解Linux中的内存映射

一文了解Linux中的内存映射

目录 一、概念 工作原理&#xff1a; 特点&#xff1a; 适用场景&#xff1a; 二、详解mmap&#xff08;&#xff09;函数 1. mmap的基本概念 2. mmap的特点 3. mmap的用途 4. mmap的优缺点 三、实验 实验一&#xff1a;基础读写实验 实验二&#xff1a;证明开始显…
阅读更多...
three.js基础环境搭建

three.js基础环境搭建

three.js three.js介绍安装threejs文件资源目录介绍本地静态服务器vscode配置live-server插件nodejs配置本地静态服务器项目的开发环境引入threejs 基础知识右手坐标系程序结构 three.js介绍 three.js官网 Three.js是一款基于WebGL的JavaScript 3D库&#xff0c;它使得开发者能…
阅读更多...
Spring统一功能

Spring统一功能

文章目录 一、什么是统一功能二、拦截器2.1 什么是拦截器2.2 拦截器的使用2.3 案例&#xff1a;不拦截前端的请求2.4 拦截器是如何实现的 ---- >分析DispatcherServlet源码分析 三、适配器模式四、统一数据返回格式五、统一异常六、案例&#xff1a;在图书管理系统使用统一功…
阅读更多...
Linux系统启动流程

Linux系统启动流程

init程序类型&#xff1a; ①、SysV&#xff1a;init&#xff0c;centos 5之前&#xff0c;配置文件/etc/init.d/ ②、Upstart: init&#xff0c;centos 6&#xff0c;配置文件/etc/init.d/ /etc/init/ ③、Systemd:Systemd&#xff0c;centos 7&#xff0c;配置文件/usr/li…
阅读更多...
鸿蒙开发系统基础能力：【@ohos.systemTime (设置系统时间)】

鸿蒙开发系统基础能力：【@ohos.systemTime (设置系统时间)】

设置系统时间 本模块用来设置、获取当前系统时间&#xff0c;设置、获取当前系统日期和设置、获取当前系统时区。 说明&#xff1a; 本模块首批接口从API version 7开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import systemTime …
阅读更多...
第三十三篇——互联网广告：为什么Google搜索的广告效果好？

第三十三篇——互联网广告：为什么Google搜索的广告效果好？

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 对于信息的利用&#xff0c;再广告这个维度中去洞察&#xff0c;你又能发…
阅读更多...
在低版本Excel中创建次级下拉列表

在低版本Excel中创建次级下拉列表

在低版本中indirect函数不支持选区&#xff0c;创建次级下拉列表得依靠“名称管理”给选区命名。 (笔记模板由python脚本于2024年06月26日 06:24:22创建&#xff0c;本篇笔记适合常用Excel处理数据的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www…
阅读更多...
3.任务的创建与删除

3.任务的创建与删除

1.什么是任务&#xff1f; 任务可以理解为进程/线程&#xff0c;创建一个任务&#xff0c;就会在内存开辟一个空间。 任务通常都含有while(1)死循环 2.任务创建与删除相关的函数 3.CUBEMAX相关配置 编辑一个led1闪烁的任务
阅读更多...
JAVA开发的一套医院绩效考核系统源码：KPI关键绩效指标的清晰归纳

JAVA开发的一套医院绩效考核系统源码：KPI关键绩效指标的清晰归纳

KPI是关键绩效指标&#xff08;Key Performance Indicators&#xff09;的缩写&#xff0c;它是一种用于衡量员工或组织绩效的量化指标。这些指标通常与组织的目标和战略相关&#xff0c;并帮助管理层评估员工和组织的实际表现。KPI还可以为员工提供清晰的方向&#xff0c;使他…
阅读更多...
怎么把不同的文件做成二维码？多种文件类型在线生码的制作方法

怎么把不同的文件做成二维码？多种文件类型在线生码的制作方法

扫码来展示文件是现在很多场景下会使用的一种内容展示方法&#xff0c;这种方式能够简化其他人获取文件的流程&#xff0c;从而提升文件传播的效率&#xff0c;用户可以存储二维码&#xff0c;随时扫码查看文件内容。文件生成二维码支持多种类型的文件使用&#xff0c;比如ppt、…
阅读更多...
PS教程29

PS教程29

图层蒙版 以案例来解释蒙版的作用 将这两张图片原框背景切换将图二的背景选中使用套索工具选中区域切换图一CtrlA全选CtrlC复制编辑-选择性粘贴-贴入即可贴入如果位置不对用移动工具进行调整 这就是图层蒙版 图层蒙版本质作用&#xff1a;是临时通道&#xff0c;支持黑白灰三种…
阅读更多...
什么是凸/非凸数据？

什么是凸/非凸数据？

简单来说&#xff0c;数据集D中任意两点的连线上的点&#xff0c;也会在数据集D内&#xff0c;那么数据集D就是一个凸集。 如下图&#xff0c;左边非凸&#xff0c;右边为凸
阅读更多...
【华为OD机试|01】最远足迹（Java/C/Py/JS）

【华为OD机试|01】最远足迹（Java/C/Py/JS）

目录 一、题目介绍 1.1 题目描述 1.2 备注&#xff1a; 1.3 输入描述 1.4 输出描述 1.5 用例 二、Java代码实现 2.1 实现思路 2.2 详细代码 2.3 代码讲解&#xff1a; 三、C语言实现 3.1实现步骤 3.2 实现代码 3.3 代码详解 四、Python实现 4.1 实现步骤 4.2 …
阅读更多...
Linux开发讲课16--- 【内存管理】页表映射基础知识2

Linux开发讲课16--- 【内存管理】页表映射基础知识2

ARM32页表和Linux页表那些奇葩的地方 ARM32硬件页表中PGD页目录项PGD是从20位开始的&#xff0c;但是为何头文件定义是从21位开始&#xff1f; 历史原因&#xff1a;Linux最初是基于x86的体系结构设计的&#xff0c;因此Linux内核很多的头文件的定义都是基于x86的&#xff0c…
阅读更多...
离线安装docker-v26.1.4，compose-v2.27.0

离线安装docker-v26.1.4，compose-v2.27.0

目录 ​编辑 1.我给大家准备好了提取即可 2.安装docker和compose 3.解压 4.切换目录 5.执行脚本 6.卸载docker和compose 7.执行命令 “如果您在解决类似问题时也遇到了困难&#xff0c;希望我的经验分享对您有所帮助。如果您有任何疑问或者想分享您的经历&#xff0c;…
阅读更多...
Java 8 新特性：Lambda表达式让你的代码焕然一新——掌握它，让编程变得轻松又高效！

Java 8 新特性：Lambda表达式让你的代码焕然一新——掌握它，让编程变得轻松又高效！

前言 Java 8 是 Java 发展史上的一次重要里程碑。作为企业级开发语言&#xff0c;它在性能和功能上做了巨大的提升。这其中&#xff0c;Lambda表达式是一个关键的新特性&#xff0c;它为 Java 语言带来了函数式编程的概念。本篇文章将深入探讨Lambda表达式&#xff0c;并结合热…
阅读更多...
[油猴脚本] Image To Ascii 快速转换审计网站图片中敏感信息插件

[油猴脚本] Image To Ascii 快速转换审计网站图片中敏感信息插件

项目地址:https://github.com/MartinxMax/ImageToAscii 导入 将ImagetoAscii.user.js导入油猴 进行按照 访问网站分析图片 当鼠标靠近图片时会出现分析按钮 通过审查图片信息,我们可以快速发现这张图片存在PHP代码。 当然在渗透测试中,你可以快速查看上传的图片木马中PHP代码…
阅读更多...
vuejs3用gsap实现动画

vuejs3用gsap实现动画

效果 gsap官网地址&#xff1a; https://gsap.com/ 安装gsap npm i gsap 创建Gsap.vue文件 <script setup> import {reactive, watch} from "vue"; import gsap from "gsap"; const props defineProps({value:{type:Number,default:0} }) cons…
阅读更多...
多线程思维导图

多线程思维导图

多线程 线程是一个程序内部的一条执行流程 多线程的好处————消息通信&#xff0c;网页浏览等等 多线程是指从软硬件上实现多条执行流程的技术 并发和并行同时执行 多线程的创建 Java.Long包下的Thread类 定义一个子类…
阅读更多...
RT-Thread使用HAL库实现双线程控制LED交替闪烁

RT-Thread使用HAL库实现双线程控制LED交替闪烁

如何创建工程我的其他文中你面有可以进去查看 1创建线程&#xff08;以动态方式实现&#xff09; 1-2创建函数入口 1-2启动函数 main.c文件源码 /** Copyright (c) 2006-2024, RT-Thread Development Team** SPDX-License-Identifier: Apache-2.0** Change Logs:* Date …
阅读更多...
最新文章

Copyright @ 2022~2023