Vue基础了解

news2024/10/7 0:11:12

目录

1、什么是Vue.js

2、Vue的优点

3、Vue的安装

4、Vue程序 

5、Vue指令

代码演示： 

6、Vue实例的生命周期

1、什么是Vue.js

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

2、Vue的优点

  1. 体积小：压缩后33K

  2. 高效率：基于虚拟dom，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，最后在计算完毕才真正将DOM操作提交。

  3. 双向数据绑定,简化Dom操作：通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象,把更多的精力投入到业务逻辑上

  4. 生态丰富,学习成本低

3、Vue的安装

直接用<script>引入

下载 Vue.js 并导入 <script src="js/v2.6.10/vue.min.js"></script> 文件

 

4、Vue程序 

  1. 导入开发版本的Vue.js
  2. 创建Vue实例对象，设置el属性和data属性
  3. 使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<!-- 创建一个标签
		     {{message}} 插入一个值,不影响标签中的其他内容 -->
			 <!-- v-html="message”，v-text="message”会覆斋标签中其他内容
			      {{message}},v-text="message”不能解析内容中html频签
				  v-html="message”可以解析内容中html标签-->
		<div id="app">
			<p>{{message}}  aaaaa</p>
			<p v-html="message">bbbbb</p>
			<p v-text="message">aaaa</p>
		</div>
		<script>
			// 创建一个vue对象
			var app=new Vue({
				el:'#app',
				data:{
					message: '<b>hello Vue!</b>'
				}
			})
		</script>
	</body>
</html>

5、Vue指令

Vue指令作用
v-text

设置标签的文本内容。

默认写法会替换全部内容,使用差值表达式可以提高指定内容。

v-html

设置元素的innerHTML

内容中有html结构会被解析为标签

v-on

元素绑定事件

事件名不需要写on指令可以写成@

绑定的方法定义在methods属性中,可以传入自定义参数

v-model

便捷的设置和获取表单元素的值.

绑定的数据会和表单的数据值相关联。

绑定的数据<--->表单元素的值 ，双向的数据绑定。

v-show

根据真假切换元素的显示状态。

原理是修改元素的display,实现显示隐藏。

指令后面的内容,最终都会解释为布尔值。

值为true元素显示,值为false元素隐藏。

数据改变之后,对应元素的显示状态会同步更新

v-if

根据表达式的真假切换元素的显示状态。

本质通过操作dom元素来切换。

显示状态表达式的值为true，元素存在于dom中，为false，从dom中移出。

频繁的切换v-show，反之使用v-if，前者的切换消耗小。

v-bind

为元素绑定数据属性。

完整写法是v-bind:属性名(:属性名) 

v-for

根据数据生成列表结构。

数据经常和v-for结合。

使用语法是(item,index)in 数据,item和index可以结合其他指令一起使用。

数据长度的更新会同步到页面上是响应式的。

为循环绑定一个key值：key="值" 尽可能唯一。

代码演示： 

v-html  ， v-text

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

 v-on/@

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="v2.6.10/vue.min.js"></script>
	</head>
	<!-- v-on为标签添加事件 -->
	<body>
		<div id="app">
			<input type="button" value="按钮1" v-on:click="test1(1)" />
			<input type="button" value="按钮2" @click="test2(2)"/>
		</div>
		<script>
			var app=new Vue({
				el:'#app',
				data:{
					messgae:'<b>Hello Vuel</b>',
					name:""
				},
				methods:{
					test1(a){
						alert(this.messgae+":"+a);
					},
					test2(a){
						alert(this.messgae+":"+a);
					}
				}
			})
		</script>
	</body>
</html>

 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">
			{{ message }},{{name}}
			
			<input v-model="name"/>
		</div>
		<script>
			var app=new Vue({
				el:'#app',
				data:{
					message: 'hello vuel',
					name: "jim"
				}
			})
		</script>
		
	</body>
</html>

 v-show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="v2.6.10/vue.min.js"></script>
		<!-- v-show
		   根据真假切换元素的显示状态 
		通过修改元素的display，实现显示隐藏 ,效率高-->
	</head>
	<body>
		<div id="app">
			<img v-show="isShow" src="../img/1.jpg" />
			<img v-show="age>16" src="../img/2.jpg" />
			<div>sss</div>
			<input type="button" @click="oper()" value="操作" />
		</div>

	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				isShow: true,
				age: 11
			},
			methods: {
				oper() {
					this.isShow = !this.isShow;
					this.age = 19;
				}
			}
		})
	</script>
</html>

 v-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="v2.6.10/vue.min.js"></script>
		<!-- v-if
		      根据真假切换元素的显示状态
		(与v-show不同，他是直接彻底删除，显示时重新创建)效率低
		v-if 可以 v-else  联合使用  两个必须紧挨着-->
	</head>
	<body>
		<div id="app">
			<img v-if="isShow" src="../img/4.jpg">
			<img v-if="age>18" src="../img/5.jpg"/>
			<img v-else src="../img/3.jpg"/>
			<input type="button" @click="oper()" value="操作"/>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:'#app',
			data:{
				isShow:true,
				age:10
			},
			methods:{
				oper(){
				this.isShow=!this.isShow
				this.age=19;
			}
			}
		})
	</script>
</html>

 v-bind

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="v2.6.10/vue.min.js"></script>
		<!-- v-bind
		     是为元素绑定属性
			 v-bind:属性名="变量名"  简写为 :属性名
			 一旦为属性添加v-bind值 就是一个在data中定义的变量了-->
		<style>
			.active {
				color: rebeccapurple;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<!-- :title="array[index]" 鼠标停留时的提示信息-->
		<div id='app'>
			<img v-bind:src="imgurl[index]" :title="array[index]" />
			<!-- 我们可以传给 v-bind:class 一个对象，以动态地切换 class: -->
			<div v-bind:class="{ active: isActive }">wwww</div>
			<input type="button" @click="oper()" value="操作" />
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				imgurl: ["../img/1.jpg", "../img/2.jpg", "../img/3.jpg"],
				array: ["苹果手机", "华为手机"],
				index: 0,
				isActive:true
			},
			methods: {
				oper() {
					this.index++;
					this.isActive=!this.isActive;
				}
			}
		})
	</script>
</html>

 v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="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}}
			{{student.gender}}
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: { //数组  模拟从后端响应回来的数据 数组 集合
				users: [{
						name: "jim",
						age: 18,
						gender: "男"
					},
					{
						name: "liu",
						age: 19,
						gender: "女"
					},
					{
						name: "mei",
						age: 15,
						gender: "男"
					},
					{
						name: "wang",
						age: 18,
						gender: "女"
					}
				],
				student: {
					name: "bei",
					age: 10,
					gender: "男"
				}
			},methods:{//自定义函数
				
			},//vue对象生命周期 钩子函数，在生命周期的每个阶段为我们提供了一个函数，可以自动执行
			beforeCreate(){
				console.log("beforeCreate")
			},
			created(){
				console.log("created")
			},beforeMount(){
				console.log("beforeMount")
			},
			mounted(){//vue 对象创建成功 且 与标签绑定后执行，这是我们常用的，在此自动的与后端交互
				console.log("created")
			}
		})
	</script>
</html>

6、Vue实例的生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程。

例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。

同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

钩子函数，在生命周期的每个阶段为我们提供了一个函数，可以自动执行

beforeCreate: function () {
console.log('beforeCreatea ’);
},
created: function () {
console.log('createda ' );
},
beforeMount:function(){
console.log('beforeMounta’);
},
mounted:function(){     //常用
console.log('mounteda’);
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

canvas画二维码并生成图片（微信原生可用，其余的平台可以自行尝试）

canvas画二维码并生成图片（微信原生可用，其余的平台可以自行尝试）

效果展示&#xff1a; 1.首先创建weapp.qrcode.esm.js文件&#xff0c;将以下代码复制上去&#xff08;适用于微信原生小程序&#xff09;&#xff0c;建议创在utils文件下 /*** weapp.qrcode.js v1.0.0 (https://github.com/yingye/weapp-qrcode#readme)*/(function (global,…
阅读更多...
AMEYA360：三星HBM产品KHAA84901B-JC17介绍！

AMEYA360：三星HBM产品KHAA84901B-JC17介绍！

三星公司是韩国最大的跨国企业之一&#xff0c;成立于1938年&#xff0c;总部位于首尔。公司业务涵盖电子产品、半导体、通信设备、家电、金融、化学等多个领域。三星电子是三星集团旗下最大的子公司&#xff0c;主要生产智能手机、平板电脑、电视、笔记本电脑等电子产品。三星…
阅读更多...
JAVA编程题期末题库【中】

JAVA编程题期末题库【中】

8.计算邮资 程序代码: public static void main(String[] args) {// 计算邮资//if多分支语句//创建对象java.util.Scanner inputnew java.util.Scanner(System.in); //提示输入用户&#xff0c;输入邮件的重量System.out.println("邮件的重量&#xff1a;");int wei…
阅读更多...
python办公自动化之pandas

python办公自动化之pandas

用到的库&#xff1a;pandas 实现效果&#xff1a;创建一张空白的表同时往里面插入准备好的数据 代码&#xff1a; import pandas # 准备好要写入的数据&#xff0c;字典格式 data{日期:[7.2,7.3],产品型号:[ca,ce],成交量:[500,600]} dfpandas.DataFrame(data) # 把数据写入…
阅读更多...
【java实习评审】 项目详情模块，如何设计关联表，提高查询性能

【java实习评审】 项目详情模块，如何设计关联表，提高查询性能

大家好&#xff0c;本篇文章分享一下【校招VIP】免费商业项目“推评分16”第一期电影详情模块 java同学的文档周最佳作品。 1、本项目是基于年轻人的喜好&#xff0c;更个性的电影推荐网站。筛选各分类的知名电影&#xff0c;并给出推荐理由和下载链接。另外&#xff0c;通过…
阅读更多...
谷粒商城实战(046集群学习-rabbitmq集群)

谷粒商城实战(046集群学习-rabbitmq集群)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第370p-第p370的内容 文章目录 简介搭建集群节点加入集群实现镜像集群 简介 两种模式 搭建集群 运行脚本&#xff0c;之后查看容器 查看界面 节…
阅读更多...
linux中find命令和exec的强大组合用法

linux中find命令和exec的强大组合用法

如何将 find 命令与 exec 一起使用 Find 是一个已经非常强大的命令&#xff0c;用于根据许多条件搜索文件。exec 命令使您能够处理 find 命令的结果。 我在这里分享的例子只是一瞥。find-exec 命令组合在一起为您提供了在 Linux 命令行中执行操作的无限可能。 find 和 exec 命令…
阅读更多...
UG_NX11.0之Windows11中安装出错及解决方法

UG_NX11.0之Windows11中安装出错及解决方法

UG_NX11.0之Windows11中安装出错及解决方法 文章目录 UG_NX11.0之Windows11中安装出错及解决方法1. 安装出错2. 解决方法1. 设置以兼容性模式运行2. 配置环境变量 3. 再次安装问题解决4. 安装后可删除配置的环境变量(可选) 1. 安装出错 以管理员身份运行Launch.exe,如下 点击D…
阅读更多...
Linux操作系统--软件包管理（保姆级教程）

Linux操作系统--软件包管理（保姆级教程）

RPM软件包的管理 大多数linux的发行版本都是某种打包系统。软件包可以用来发布应用软件&#xff0c;有时还可以发布配置文件。他们比传统结构的.tar和.gz存档文件有几个优势。如它们能让安装过程尽可能成为不可分割的原子操作。 软件包的安装程序会备份它们改动过的文件。如果…
阅读更多...
算法基础--------【图论】

算法基础--------【图论】

图论&#xff08;待完善&#xff09; DFS:和回溯差不多 BFS:进while进行层序遍历 定义: 图论&#xff08;Graph Theory&#xff09;是研究图及其相关问题的数学理论。图由节点&#xff08;顶点&#xff09;和连接这些节点的边组成。图论的研究范围广泛&#xff0c;涉及路径、…
阅读更多...
【VMware】使用和管理 vSphere+（一）：监控 vSphere+ 基础架构

【VMware】使用和管理 vSphere+（一）：监控 vSphere+ 基础架构

目标读者 本指南面向打算使用和管理 vSphere 的任何用户。本信息适用于已在内部部署环境中使用 vSphere 且熟悉虚拟化概念的读者。 《使用和管理 vSphere》提供了有关使用 vSphere 服务的信息&#xff0c;例如从 VMware Cloud 控制台 监控 vSphere 基础架构、查看订阅计费以及更…
阅读更多...
前端vue使用onlyoffice控件实现word在线编辑、预览（仅列出前端部分需要做的工作，不包含后端部分）

前端vue使用onlyoffice控件实现word在线编辑、预览（仅列出前端部分需要做的工作，不包含后端部分）

简介 ONLYOFFICE 文档 是一个开源办公套件&#xff0c;包括文本文档、电子表格、演示文稿和可填写表单的编辑器。 它提供以下功能&#xff1a; 创建、编辑和查看文本文档、电子表格、演示文稿和可填写表单&#xff1b; 与其他队友实时协作处理文件。 基于这个控件&#xff0c;…
阅读更多...
Steam夏促史低游戏推荐 Steam夏促哪有游戏值得入手

Steam夏促史低游戏推荐 Steam夏促哪有游戏值得入手

steam夏季促销来袭&#xff0c;有这很多的游戏都进行打折出售&#xff0c;而且还有这很多的游戏都迎来了史低&#xff0c;简直是白送&#xff0c;很多玩家都想趁着这个时间入手自己喜欢的游戏&#xff0c;为了方便大家了解&#xff0c;下面我给大家带来steam夏季促销史低的游戏…
阅读更多...
学习笔记——动态路由——OSPF（OSPF协议的工作原理）

学习笔记——动态路由——OSPF（OSPF协议的工作原理）

八、OSPF协议的工作原理 1、原理概要 (1)相邻路由器之间周期性发送HELLO报文&#xff0c;以便建立和维护邻居关系 (2)建立邻居关系后&#xff0c;给邻居路由器发送数据库描述报文(DBD)&#xff0c;也就是将自己链路状态数据库中的所有链路状态项目的摘要信息发送给邻居路由器…
阅读更多...
【PHP项目实战训练】——后台-RBAC权限管理原理

【PHP项目实战训练】——后台-RBAC权限管理原理

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…
阅读更多...
JVM原理（一）：JVM运行时数据区域的分析

JVM原理（一）：JVM运行时数据区域的分析

1. 程序计数器 程序计数器是一块较小的内存空间&#xff0c;它可以看作是当前线程所执行的字节码的行号指示器。 作用 在Java虛拟机的概念模型里&#xff0c;字节码解释器工作时就是通过改变这个计数器的值来选取下一条需要执行的字节码指令&#xff0c;它是程序控制流的指示…
阅读更多...
React Native 开发常见问题及注意事项

React Native 开发常见问题及注意事项

本文只是使用时积累的一些经验 开发环境 1、Android Studio 依赖项下载慢 如果发现依赖下载非常慢&#xff0c;动不动十几KB的 参考&#xff1a;加速 Android Studio 依赖项下载 也可以切换数据源 修改 android/build.gradle中的jcenter()和google() repositories {// goo…
阅读更多...
UI设计必备的6个网站，赶紧收藏！

UI设计必备的6个网站，赶紧收藏！

6个UI设计必备网站&#xff0c;找素材、找灵感一步到位&#xff0c;赶紧收藏起来吧&#xff01; 1、菜鸟图库 UI图片素材-UI图片模板免费下载 - 菜鸟图库 菜鸟图库提供了超多免费设计素材&#xff0c;在这里你可以找到平面、UI、电商等设计类素材&#xff0c;还有大量的高清背…
阅读更多...
【2024年更新】ZF关注度指数大合集（包含8类数据）

【2024年更新】ZF关注度指数大合集（包含8类数据）

数据简介&#xff1a;共包含8类数据 1. 地方ZF环境关注度指数&#xff1a;2007-2021 2. 地方ZF数字关注度指数&#xff1a;1999-2021 3. 省级ZF数字关注度指数&#xff1a;2001-2024 4. 农业新质生产力ZF关注度指数&#xff1a;2001-2024 5. 新质生产力ZF关注度指数&#…
阅读更多...
蚂蚁- 定存

蚂蚁- 定存

一&#xff1a;收益变动&&收益重算 1.1: 场景组合 1: 澳门元个人活期&#xff0c;日终余额大于0&#xff0c;当日首次、本周本月非首次系统结息&#xff0c;结息后FCDEPCORE_ASYN_CMD_JOB捞起进行收益计算 【depc_account_revenue_detail】收益日 > 【depc_accoun…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023