vue初识

最新推荐文章于 2024-08-11 00:23:30 发布
最新推荐文章于 2024-08-11 00:23:30 发布
阅读量287 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46338854/article/details/129029107
版权
  • 第一次接触vue，前端的html,css,jquery,js学习也有段时间了，就照着B站的视频简单看了一些，了解了一些简单的用法，这边做一个记录。

官网
工具：使用VSCode以及Live Server插件（能够实时预览）

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Vue基础</title>
	
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:" hello Vue!"
				}
			})
		</script>
	</body>
</html>

el:挂载点：设置Vue实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>el挂载点</title>
	
	</head>
	<body id="body">
		{{messgae}}
		<div id="app" class="abc">
			{{message}}
			<p>{{message}}</p>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				 el:"#app",
				//el:".abc",
				//el:"div",
				//el:"#body",
				data:{
					message:" hello Vue!"
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

Vue实例的作用范围是什么呢？

  • Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其它的选择器

  • 可以使用其它的选择器，但是建议使用ID选择器

是否可以设置其它的dom元素呢

  • 可以使用其它的双标签，不能使用html和body

data数据对象

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>data数据对象</title>
	
	</head>
	<body>
		<div id="app">
			{{message}}
			<h2>{{student.name}} ---{{student.mobile}}</h2>
			<ul>
				<li>{{hobbies[0]}}</li>
				<li>{{hobbies[2]}}</li>
			</ul>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:" hello Vue!",
					student:{
						name:"张三",
						mobile:"16789028"
					},
					hobbies: ["学习","喝酒","打球"]
					
				}
			})
		</script>
	</body>
</html>

常见指令

v-text

  • 作用：设置标签的内容
  • 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
  • 支持内部写表达式
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>v-text</title>
	
	</head>
	<body>
		<div id="app">
			{{message}}
			<h2 v-text="message+'a'">zhh</h2>
			<h2>{{message+'sd'}} asd</h2>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:" hello Vue!"
				}
			})
		</script>
	</body>
</html>

v-html

  • 作用：设置元素的innerHTML

  • 内容中有HTML结构会被解析成标签

  • v=text指令无论内容时什么.只会解析成文本

  • 解析文本使用v=text,需要解析html结构使用v-html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>v-html</title>
		
	
	</head>
	<body>
		<div id="app">
			{{message}}
			<h2 v-text="title"></h2>
			<h2 v-html="title"></h2>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:" hello Vue!",
					title:"<h3>abc<h3>"
				}
			})
		</script>
	</body>
</html>

v-on

  • v-on指令的作用是为元素绑定事件

  • 事件名不需要写on

  • 指令可以简写为@

  • 绑定的方法定义字methods属性中

  • 方法内部通过this关键字可以访问定义在data中数据

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>v-on</title>
	
	</head>
	<body>
		<div id="app">
			{{message}}
			<input type="button" value="测试事件绑定" v-on:click="func1">
			<input type="button" value="测试事件绑定简写" @click="func2">
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:" hello Vue!"
				},
				methods: {
					func1() {
						console.log("1");
						alert("2")
					},
					func2:function() {
						
						alert(this.message)
					}
				}
				
			})
		</script>
	</body>
</html>

v-on补充

  • 传递自定义参数，事件修饰符

  • 事件绑定的方法写成函数调用的形式，可传入自定义参数

  • 定义方法时需要定义形参来接收传入的实参

  • 事件的后面跟上.修饰符可以对事件进行限制

  • .enter可以限制触发的按键为回车

  • 事件修饰符有多种

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>v-on补充</title>
	<!-- -->
	</head>
	<body>
		<div id="app">
			<button @click="add(3,2)">加法计算</button>
			<input type="text" @keyup.enter="sayHi">
			
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:" hello Vue!"
				},
				methods: {
					add: function(a1,a2) {
						alert(a1+a2)
					},
					sayHi:function() {
						alert(666)
					}
				}
			})
		</script>
	</body>
</html>

v-bind

  • v-bind指令的作用是为元素绑定属性

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

    简

  • 写的可以直接省略v-bind,只保留:属性名

  • 需要动态的增删改class建议使用对象的方式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<style>
			.active{
				border: 1px solid red;
			}
		</style>
		<title>v-bind</title>
	
	<!--  -->
	</head>
	<body>
		<div id="app">
			{{message}}
			<img v-bind:src="imgSrc" alt=""><br>
			<img :src="imgSrc" alt="" :title="message+'404'" :class="isActive?'active':''"> 
			<img :src="imgSrc" alt="" :title="message+'404'" :class="{active:isActive}"> 
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:" hello Vue!",
					imgSrc:"../img/monkey.gif",
					isActive:true
				}
			})
		</script>
	</body>
</html>

v-show

  • v-show指令的作用是根据真假切换元素的显示状态

  • 原理是修改元素的display，实现显示隐藏

  • 指令后面的内容，最终都会被解析为布尔值

  • 值为true元素显示，值为false，元素隐藏

  • 数据改变之后，对应元素的显式状态会同步更新

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>v-show</title>
	<!--
	 -->
	</head>
	<body>
		<div id="app">
			<input type="button" value="切换显示状态" @click="changeInShow">
			<button @click="addAge">累加年龄</button>
			<br>
			<img src="../img/monkey.gif" alt="" v-show="isShow">
			<br>
			<img src="../img/monkey.gif" alt="" v-show="age>40">
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:" hello Vue!",
					isShow:true,
					age:34
				},
				methods:{
					changeInShow: function() {
						this.isShow=!this.isShow;
					},
					addAge:function() {
						this.age++;
					}
				}
			})
		</script>
	</body>
</html>

v-if

  • v-if指令的作用是：根据表达式的真假切换元素的显式状态

  • 本质是通过操控dom元素来切换显示状态

  • 表达式的值为true,元素存在于dom树中,为false,从dom树中移除

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>v-if</title>
	<!-- 
		v-if指令的作用是：根据表达式的真假切换元素的显式状态
		本质是通过操控dom元素来切换显示状态
		表达式的值为true,元素存在于dom树中,为false,从dom树中移除
		频繁的切换v-show,反之使用v-if,前者的切换消耗小
	 -->
	</head>
	<body>
		<div id="app">
			<button @click="changeShow">切换显示状态</button>
			<button @click="changeAge">增加年龄</button>
			<img src="../img/monkey.gif" alt="" v-if="true">
			<img src="../img/monkey.gif" alt="" v-if="isShow">
			<img src="../img/monkey.gif" alt="" v-if="age>40">
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:" hello Vue!",
					isShow:true,
					age:30
				},
				methods: {
					changeShow: function() {
						this.isShow=!this.isShow;
					},
					changeAge: function() {
						this.age++;
						console.log(this.age)
					}
				}
			})
		</script>
	</body>
</html>

v-for

  • v-for指令的作用是根据数据生成列表结构

  • 数组经常与它结合使用

  • 语法是(item,index) in数据

  • item和index可以结合其它指令一起使用

  • 数组长度的更新会同步到页面上，是响应式的

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>v-for</title>
		<!--
		 -->
	
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in hobbies" :title="item">
					{{index+1}}兴趣有：{{item}}
				</li>
			</ul>
			<h2 v-for="it in students">
				{{it}}
				{{it.name}} {{it.age}}
			</h2>
			{{message}}
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:" hello Vue!",
					hobbies:["打球","睡觉","打游戏"],
					students:[
						{name: "abc",
						age:"34"},
						{name:"rty",
						age: "45"}
					]
				
				}
			})
		</script>
	</body>
</html>

v-model

  • 获取和设置表单元素的值(双向数据绑定)

  • v-model指令的作用是设置和获取表单元素的值

  • 绑定的数据会和表单元素值相关联

  • 绑定的数据<---->表单元素的值

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>v-model</title>
	<!-- -->
	</head>
	<body>
		<div id="app">
			{{message}}
			<button @click="setM">修改message</button>
			<input type="text" v-model="message" @keyup.enter="getM">
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:" hello Vue!"
				},
				methods: {
					getM:function() {
						alert(this.message)
					},
					setM:function(){
						this.message="aaaa"
					}
				}
			})
		</script>
	</body>
</html>

使用常用指令实现小功能

计数器

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>计数器</title>
		<style>
			#app {
			  width: 480px;
			  height: 100px;
			  margin: 200px auto;
			}
			.input-num {
			  margin-top: 20px;
			  height: 100%;
			  display: flex;
			  border-radius: 10px;
			  overflow: hidden;
			  box-shadow: 0 0 4px black;
			}
			.input-num button {
			  width: 150px;
			  height: 100%;
			  font-size: 40px;
			  color: gray;
			  cursor: pointer;
			  border: none;
			  outline: none;
			}
			.input-num span {
			  height: 100%;
			  font-size: 40px;
			  flex: 1;
			  text-align: center;
			  line-height: 100px;
			}
		  </style>
	</head>
	<body>
		<div id="app">
			<div class="input-num">
			<button @click="sub">-</button>
			<span>{{num}}</span>
			<button v-on:click="add">+</button>
			</div>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					num:1
				},
				methods: {
					sub:function() {
						if(this.num>0){
							this.num--
						}else {
							alert("到最小值了")
						}
					},
					add: function(){
						if ((this.num) < 10) {
							this.num ++;
						}else {
							alert("到最大值了")
						}
					}
				}
			})
		</script>
	</body>
</html>

图片切换

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<!-- <link rel="stylesheet" href="../css/index.css"/> -->
		<title>图片切换</title>
	
	</head>
	<body>
		<div id="app">
			<!-- <button @click="next">测试</button> -->
			<img src="../img/prev.png" alt="" @click="prev" v-if="num>0">
			<img v-for="(item,index) in imgSrcs"
			 :src="item" alt="" v-show="num==index" >
			 <img src="../img/next.png" alt="" @click="next" v-if="num!=10">
		
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
		 var app=new Vue({
			el: "#app",
			data: {
				message: "hi",
				num:0,
				imgSrcs:["../img/00.jpg",
				"../img/01.jpg",
				"../img/02.jpg",
				"../img/03.jpg",
				"../img/04.jpg",
				"../img/05.jpg",
				"../img/06.jpg",
				"../img/07.jpg",
				"../img/08.jpg",
				"../img/09.jpg",
				"../img/10.jpg",

			]
				
			},
			methods: {
				prev:function() {
					// if(this.num>0){
					
					// 	//alert("--")
					// }

					this.num--;
				},
				next:function() {
					// if(this.num<10){
						
					// 	//alert("++")
					// }
					this.num++;
				}

			}
		 })
		</script > 
		</body>
		</html>
&*Savior
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 项目初识 路由 router.md
06-11
vue 项目初识 路由 router 并进行初步配置以及简单的组件实现，初学vue router可以参考
初识Vue.html
07-29
初识Vue.html
Vue初识
m0_63186875的博客
07-18 746
Node.js是一种开源运行环境，基于Chrome V8 JavaScript引擎，使JavaScript能够在服务器端运行。它采用事件驱动、非阻塞I/O模型，非常适合构建高性能、高并发的网络应用。Node.js支持模块化编程，具有庞大的生态系统。
VUE初识
weixin_45591890的博客
11-30 119
1MVVM结构 MVC: model (模型) view(视图) controller(控制器) MVVM: Model(模型) View (视图) viewModel(视图模型) 数据双向绑定 --v-model来指令来实现 2 Vue的使用 (1) 安装的一个环境 nodejs ​ 傻瓜式安装 (2) idea安装nodejs插件 (3) 创建一个static web项目 (4) ...
01vue初识_vue_principle9nn_
10-03
"01vue初识_vue_principle9nn_" 涉及的是Vue的基础应用部分，这通常包括Vue的核心概念、安装、基本结构以及一些基础的指令和API。 1. **Vue核心概念**： - **数据绑定**：Vue的核心特性之一是双向数据绑定，通过`v...
详解Vue爬坑之vuex初识
08-30
Vue.js 是一款流行的前端框架，用于构建用户界面。在开发大型 Vue 项目时，随着组件数量的增加，组件间的数据传递成为一个挑战。Vue 的状态管理工具 Vuex 提供了一个集中式的存储解决方案，使得在子组件之间共享和...
vue-community
04-03
2. **README.md**：这个文件会提供项目的基本信息、安装指南、使用方法、贡献指南等，是初识项目的重要入口。 3. **LICENSE**：文件规定了项目使用和分发的法律条款，常见的有MIT、Apache 2.0等。 4. **package....
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 341
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
vue的diff算法的【双端比较】策略
yiguoxiaohai的博客
08-08 292
vue的diff算法的双端比较策略
前端已经学会vue，做粒子效果
wj0712的博客
08-08 1061
这些学习内容将帮助你有效地实现粒子效果，并将其整合到你的 Vue 项目中。
Vue启动时报异常 ‘error:03000086:digital envelope routines::initialization error‘
最新发布
拥有必珍惜
08-11 264
nodejs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制，nodeJs v17 之前版本没影响，但 V17 和之后版本会出现这个错误。然后再执行 npm run serve ，则能成功运行项目。将NodeJS切换到17以下版本，再进行启动。方法一：Vscode或者cmd命令行输入命令。使电脑上的 node 版本能适应项目的版本。
vue实现PC端图片放大缩小可鼠标拖动，鼠标滚轮控制放大缩小完整代码付效果图
a_靖的博客
08-07 272
vue实现放大缩小，拖动盒子完整代码付效果图
简单介绍下vue3中为什么使用ref包裹数组会失去push的方法呢？
m0_62626838的博客
08-07 215
2、简单的说就是当你使用ref定义一个响应式的数组时，此时你的数组时响应式的，但是当你对数组做push等方法时，就失去响应式了，这是因为在 Vue 的响应式系统中，属性的添加或删除被视为改变原始对象的引用，而不是改变原始对象本身。1、有的小伙伴在使用vue3的过程中想省事情，针对vue3的两种响应式，即ref与reactive往往会只选择使用ref,然后就报错数组没有push方法了。不，可以解决，要记住ref在setup中写要加上.vue,在模板结构中使用不加.value。
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
weixin_44784401的博客
08-09 858
写一个Vue2和vue3的自定义指令（以复制指定作为示例）
vue前端项目--路由vue-router
As_Yua的博客
08-07 861
早期的网站开发中，服务器负责生成完整的 HTML 页面，并将其发送给客户端展示。每个 URL 对应一个特定的控制器(Controller)，该控制器负责处理请求并生成相应的 HTML 内容。这种方式有利于搜索引擎优化（SEO），因为搜索引擎可以轻松抓取完整的 HTML 内容。缺点是页面更新时需要重新加载整个页面，导致用户体验不佳，且 HTML 和业务逻辑混杂在一起，难以维护。随着 Ajax 技术的出现，前后端分离成为可能。
Vue3+Element-plus+setup使用vuemap/vue-amap实现高德地图API相关操作
weixin_72439307的博客
08-07 370
本文主要是在vue3中使用el-amap组件实现地图的展示以及相关窗体信息内容自定义渲染
Vue设置滚动条自动保持到最底端
Lipn_的博客
08-09 411
实现滚动条始终保持在最底端
vue中v-html 后端返回html + script js中click事件不生效
记录常见的问题以及解决办法
08-07 253
思路： 1.获取到后端返回的html 2.通过正则表达式 之后 截取script 中的 js 逻辑 3.获取body标签 之后创建一个 script 标签 4.把我们截取的 script中的代码放到我们创建的 script标签中 5.把script标签 放到body中
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

&*Savior

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值