Vue常用知识

最新推荐文章于 2022-11-23 22:53:20 发布
最新推荐文章于 2022-11-23 22:53:20 发布
阅读量78 收藏
点赞数
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y519063548/article/details/118329425
版权

1.Vue入门

1.1 插值表达式{{ xxx }}
1.2 vue.js引用：

①下载后本地引用；
②引用在线js 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门案例</title>
</head>
<body>
	<div id="app">
		<!-- 插值表达式 {{}} -->
		<h1>{{hello}}</h1>
	</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
	const app=new Vue({
		el:("#app"),
		data:{
			hello:"测试"
		}
	});
</script>
</body>
</html>

2 常用指令

2.1 v-cloak指令

设置隐藏样式，在解析对应的数据前隐藏为编译的标签格式“{{xxx}}”

2.2 v-text 指令

直接展示解析后的数据

2.3 v-html指令

可解析并展示带有html标签的内容

2.4 v-pre指令

跳过解析，可在页面直接显示“{{xxx}}”

2.5 v-once指令

配置该标签只解析一次，即使后续对应的该值改变，页面数据不变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令练习</title>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" >
			测试1：测试v-cloak指令
			<h1 v-cloak>{{msg}}</h1>
			<hr>
			测试2：测试v-text指令
			<h2 v-text="msg"></h2>
			<hr>
			测试3：测试v-html指令<br>
			<span v-html="html"></span>
			<hr>
			测试4：测试v-pre指令:展现{{msg}}，不需要vue解析；v-pre直接跳过配置了该指令的表达式<br>
			<span v-pre >{{msg}}</span>
			<hr>
			测试5：测试v-once指令 元素只解析一次，之后用户随意修改，数据不变<br>
			<span v-once >{{one}}</span>
		</div>

		<script src="../js/vue.js">
		</script>
		<script>
			//sleep(1000);
			let app = new Vue({
				el: "#app",
				data: {
					msg: "测试数据",
					html: '<h3>测试html语法</h3>',
					one:'只加载一次'
				}
			})
		</script>

	</body>
</html>

在这里插入图片描述

3 数据双向绑定

3.1 v-model:只能标记可以编辑的标签；输入框以及vue属性两者任一变化另一个跟着变化，数据和页面两者同步修改

<body>
		<div id="app">
		<!-- v-model:只能标记可以编辑的标签 输入框以及vue属性两者任一变化另一个跟着变化
		数据和页面两者同步修改
		-->
		数据录入：<input type="text" v-model="msg" />
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app=new Vue({
				el: "#app",
				data: {
					msg: '测试数据'
				}
			})
		</script>
	</body>

4 常用事件

4.1 点击事件v-on:click

4.1.1 可直接配置事件操作内容
4.1.2 可简化操作v-on用@代替
4.1.3 配置方法时间，在methods中增加相关方法，在没有参数时可省略参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			数值：{{num}} 
			<!-- 1.1 直接编辑操作内容 -->
			<button v-on:click="num++">增加1</button>
			<!-- 1.2 v-on:简化操作@ -->
			<button @click="num--">减少1</button>
			<!-- 1.3 -->
			<button @click="addNum">增加1</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app=new Vue({
				el: "#app",
				data: {
					num: 1
				},
				methods: {
					/* addNum: function(){
						alert(111)
					} */
					//省略写法
					addNum(){
						this.num++;
					}
				}
			})
		</script>
	</body>
</html>
4.2 事件修饰符

4.2.1 stop 阻止事件冒泡
事件冒泡：由于嵌套关系，先执行内部事件，如果执行成功，则事件冒泡给外层事件
4.2.2 prevent 阻止默认事件
form表单的action提交,a标签的跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			数值：{{num}}
			<!--1. stop 阻止事件冒泡
			 事件冒泡：由于嵌套关系，先执行内部事件，如果执行成功，则事件冒泡给外层事件-->
			<div @click="addNum1">
				<button @click="addNum2">增加2</button>
				<button @click.stop="addNum2">增加1</button>
			</div>
			
			<!-- 2.prevent 阻止默认事件 -->
			<a href="http://www.baidu.com" @click.prevent="btnA">百度</a>
			<div>
				<form></form>
			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num: 1
				},
				methods: {
					addNum1() {
						this.num++;
					},
					addNum2() {
						this.num++;
					}
				}
			})
		</script>
	</body>
</html>

5.常用属性

5.1 v-model属性

1.number 将用户输入变为数字类型
2.trim 去除开头和结尾的空格，字符串中间的空格不能去除
3.lazy 懒加载，当input中控件失去焦点时再触发，–防止重复交互刷新

5.2 计算属性
  1. 计算属性如果调用多次，则有缓存机制，只计算一次
  2. 方法如果调用多次，则每次都要重新执行方法
    页面涉及多次调用并需要计算时使用计算属性
<body>
		<div id="app">
			<form>
				姓名：<input type="text" v-model="user.username"/><br />
				详情：<textarea v-model="user.info"></textarea><br />
				城市：<select name="city" v-model="user.city" multiple="multiple">
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="成都">成都</option>
				</select><br />
				性别：<input type="radio" name="sex" value="男" v-model="user.gender"/>男<input type="radio" name="sex" v-model="user.gender" value="女"/>女<br />
			</form>
			
			<!-- 1.number 将用户输入变为数字类型
				 2.trim 去除开头和结尾的空格
				 3.lazy 懒加载，当input中控件失去焦点时再触发，--防止重复交互刷新
			 -->
			<div>
				<input type="text" v-model.number="num" /><button @click="num+=10">增加10</button><br>
				<input type="text" v-model="name" />获取name长度{{name.length}}<br>
				<input type="text" v-model.trim="name1" />获取name长度{{name1.length}}<br>
				
				<input type="text" v-model.lazy="user.username" />观察响应{{user.username}}
			</div>
			
			<!-- 
				1. 计算属性如果调用多次，则有缓存机制，只计算一次
				2. 方法如果调用多次，则每次都要重新执行方法
				如果涉及
			 -->
			
			<div>
				用户输入:<input type="text" v-model="user.msg" /><br>
				数据展示：{{user.msg.split('')}}<br>
				数据展示：{{user.msg.split('').reverse()}}<br>
				数据展示：{{user.msg.split('').reverse().join('|')}}<br>
				数据展示：{{user.msg.split('').reverse().join('')}}<br>
				计算属性：{{reverse}}{{reverse}}{{reverse}}<br>
				{{reverseMe()}}{{reverseMe()}}{{reverseMe()}}
			</div>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					user: {
						username: '',
						info: '',
						city: ['上海','北京'],
						gender: '男',
						msg: ''
					},
					num: '',
					name: '',
					name1: ''
				},
				computed:{
					reverse(){
						console.log('计算属性执行');
						return this.user.msg.split('').reverse().join('')
					}
				},
				methods:{
					reverseMe(){
						console.log('方法执行');
						return this.user.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>

在这里插入图片描述

6 分支循环

6.1 分支

v-if 可以单独编辑使用 v-else/v-else-if 不可以单独使用必须和v-if联用

<body>
		<div id="app">
			分数：<input type="text" v-model="score" /><br>
			<div v-if="score>=90">优秀</div>
			<div v-else-if="score>=80">良好</div>
			<div v-else-if="score>=70">中等</div>
			<div v-else-if="score>=60">及格</div>
			<div v-else>你是最棒的</div>
			
			<!-- v-if 可以单独编辑使用 
				 v-else/v-else-if 不可以单独使用必须和v-if联用-->
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					score: '0'
				}
			})
		</script>
	</body>
6.2 循环结构

问题：什么样的数据需要使用循环1.数组 2.对象
语法：v-for 遍历展现的是标签
遍历对象时 直接遍历对象，则展现value的值 如：“value in user”
(value,key,index) in user 分别代表对象的 属性值：属性名：下标位置 从0开始

<body>
		<div id="app">
			<!-- 问题：什么样的数据需要使用循环1.数组 2.对象
				 语法：v-for 遍历展现的是标签
			-->
			<h1>循环遍历数组</h1>
			<p v-for="item in hobby" v-text="item"></p>
			<div v-for="i in hobby"> {{i}}</div>
			<hr />
			<h1>遍历对象</h1>
			<!-- 直接遍历对象，则展现value的值 
			(value,key,index) in user 分别代表对象的
			-->
			<div v-for="(value,key,index) in user">
			<span v-text="key"></span>:<span v-text="value"></span>:<span v-text="index"></span>
			</div>
			<hr />
			<div v-for="(j,i,index) in user">
			<span v-text="i"></span>:<span v-text="j"></span>:<span v-text="index"></span>
			</div>
			<div v-for="user in userlist" >
				<span v-text="user.id"></span>:<span v-text="user.name"></span>
			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					hobby: ['电脑','手机','平板'],
					user: {
						id: 100,
						name: 'tomcat猫'
					},
					userlist: [
						{id: 200,name: 'tomcat猫1'},
						{id: 300,name: 'tomcat猫2'},
						{id: 400,name: 'tomcat猫5'}
					]
				}
			})
		</script>
	</body>

7 生命周期函数

beforeCreate()、created()、beforeMount()、mounted()、beforeUpdate()、updated()、beforeDestroy()、destroyed()
一般不适用before函数

<body>
		
		<div id="app">
			<h3 v-text="msg"></h3>
			<button @click="destroy">销毁</button>
		</div>
		
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					msg: "vue生命周期"
				},
				
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("beforeCreate")
				},
				//在实例创建完成后被立即调用
				created(){
					console.log("created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount(){
					console.log("beforeMount")
				},
				//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
				mounted(){
					console.log("mounted")	
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("beforeUpdate")
				},
				//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
				updated(){
					console.log("updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用
				beforeDestroy(){
					console.log("beforeDestroy")	
				},
				//实例销毁后调用。
				destroyed(){
					console.log("destroyed")
				},
				methods:{
					destroy(){
						this.$destroy()
					}
				}
			})
		</script>
	</body>

8 数组用法

数组相关用法 队列/栈 push 压栈 pop 弹栈
push() 在最后追加元素
pop() 从最后删除元素
shift() 从开头删除元素 出现笔试题
unshift() 从开头追加元素
splice() 替换数据
sort() 排序按照字符编码编码顺序排列
reverse() 数组反转

<body>
		<div id="app">
			<!-- 数组相关用法  队列/栈 push 压栈 pop 弹栈
				push() 在最后追加元素
				pop()  从最后删除元素
				shift() 从开头删除元素   出现笔试题
				unshift() 从开头追加元素
				splice()  替换数据
				sort()    排序按照字符编码编码顺序排列
				reverse() 数组反转
			 -->
			 <!-- 对数据进行循环遍历-->
			 <span v-for="item in array">{{item}},</span><br>
			 
			 追加数据: <input type="text" v-model.number="num"/>
			 <button @click="push">push</button><br>
			 <button @click="pop">pop</button>
			 <button @click="shift">shift</button>
			 <button @click="splice1">替换第一个元素</button>
			 <button @click="splice2">将前3个数据改为num</button>
			 <button @click="splice3">将前3个数据改为num,num,num</button>
			 <button @click="splice4">删除第2个数据</button>
			 
			 
			 
			 
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					array: [1,2,3,4,5],
					num: ''
				},
				methods: {
					push(){
						this.array.push(this.num)
					},
					pop(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					splice1(){
						/* arg1: 操作数据的起始位置 下标从0开始
						   arg2: 操作的数量
						   arg3: 替换后的值 可以有多个值
						   案例1:替换第一个元素
						 */
						this.array.splice(0,1,this.num)
					},
					splice2(){
						//将前3个数据改为num
						this.array.splice(0,3,this.num)
					},
					splice3(){
						//将前3个数据改为num,num,num
						this.array.splice(0,3,this.num,this.num,this.num)
					},
					splice4(){
						//删除第2个数据  隐藏功能
						this.array.splice(1,1)
					}
				}
			}) 
		</script>
	</body>
y519063548
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 常用知识总结
木木木森林
04-19 1151
el只能在vue实例中使用。 ...
Vue知识点汇总【持更】
qq_45605043的博客
09-14 5774
一个前端小白的自学之路，完结之日即成为大白之日。
Vue常用知识点汇总
凯凯凯凯凯凯凯凯
11-23 1119
Vue常用知识点汇总
vue常用知识总结
Debug的博客
05-27 620
vue常用知识总结 vue简介 vue 响应式原理：Object.defineProperty。 vue 的作者：尤雨溪 java 出身。 vue 是什么：以数据驱动视图的单页面（spa）渐进式 MVVM 框架。 特性：数据双向绑定 模块化开发：为了不让所有的代码放在同一文件内看着不舒服（降低开发时间，提高开发效率）,每个部分都是一个独立的文件,哪里使用就引入到哪里，目的是好控制，减少代码复用 vue常用指令 -v-text 渲染文本，等价插值写法 插值：{{内容}} v-html 既可以渲
vue常用知识点总结
weixin_49175902的博客
10-21 5070
最近入职新的公司，整体来说还是不错的。前一阵子看了很多关于vue的知识点，自己理解着整理一下，再加深一下印象。也希望可以帮助到有需要的同学。理解错误的地方，欢迎指正。 1、对于Vue是一套渐进式框架的理解 答：Vue是渐进的，没有强主张，是个轻量视图。它只做了自己应该做的事，没有做多余的事。 2、vue.js的两个核心是什么？ 答：数据驱动和组件化。 3、vue中的模板编译原理 答：模板指的就是template。如果我们传了一个template，我们会把template转换成一个render函数，然后通过r
vue 常用知识点梳理
u013354006的博客
01-25 891
1、写出一个程序，接受一个十六进制的数，输出该数值的十进制表示。 var str = 'ABC123' function trans(str) { var len = str.length, code, resArr = [], sum = 0 for (var i = 0; i < len; i++) { code = (str.charCodeAt(i)) if (code > 48 && code < 58) {
Vue知识点总结
xfhgxhhhg的博客
08-02 6786
vue的知识框架。
Vue基础知识总结 3：vue常用标签
热门推荐
学Java，找哪吒
07-19 2万+
一、计算属性 1、合并两个字符串 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{fullName}}</div> <script src="../js/vue.js">&.
Vue知识点汇总
编程界明世隐的博客
04-09 1928
一、MVVM的理解 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View...
vue 基础知识总结
qq_40046544的博客
09-14 3251
官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用户构建用户界面的前端框架在创建 vue 实例期间，可以在 filters 节点中定义过滤器}}});ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向的一个空对象动态组件指的是动态切换组件的显示与隐藏。
QtConcurrent run 成员函数demo
07-29
使用Qtconcurrent run 成员函数demo
使用智能手机、智能手表和智能眼镜的人类活动数据集
07-29
使用智能手机、智能手表和智能眼镜的人类活动数据集 数据说明： 人类移动性和活动的研究在过去开启了数量惊人的研究，其中大多数包括使用分布在受试者身体上的传感器。最近，智能设备的使用尤为相关，因为它们无处不在，并且带有精确的微型传感器。无论是智能手机、智能手表还是智能眼镜，每种设备都可以用来描述补充信息，如情绪、精确的运动或环境条件。 首先，智能手机主要用于捕获上下文数据。使用两种应用程序:一种是基于SWIPE开源传感系统(SWIPE)的简单数据收集应用程序，以及用于获取用户活动真实数据(TimeLogger)的日志应用程序。SWIPE是一个使用智能手表和智能手机进行传感、记录和处理人类动态的平台。 智能手表主要用来捕捉使用者的心率。运动数据也被收集，但由于需要配置低采样频率，因此不处于数据集的核心，这将极大地增加数据集并消耗电池。使用基于SWIPE的应用程序。 最后，使用JINS MEME智能眼镜。该型号的优点是体积小，携带方便。它没有摄像头或屏幕:它只有三种传感器:加速度计(用于检测步数或活陀螺仪(用于头部运动)和眼动仪传感器(眨眼、眼睛方向)。使用JINSMEME的官方DataLog
【Transformer回归预测】基于EMD-Transformer实现多变量交通数据回归预测附matlab代码 (2).rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现开普勒优化算法KOA-Kmean-Transformer-LSTM组合状态识别算法研究.rar
最新发布
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现非洲秃鹫优化算法AVOA-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
22.Android—美图相册系统.zip
07-29
22.Android—美图相册系统
opencv+连通域统计+图像识别+统计物品数量
07-29
1、基于opencv实现 2、基于连通域实现了物品的统计与标色
编译原理课程设计Python实现基于 LR (1) 分析的类 C 语言语法分析器源代码+使用说明
07-29
编译原理课程设计Python实现基于 LR (1) 分析的类 C 语言语法分析器源代码+使用说明 本项目为基于 LR (1) 分析的类 C 语言语法分析器，可以实现针对一种类似 C 语言程序的 Token 序列（由 词法分析器 生成）进行语法分析，给出合法判断、出错位置及大致原因。 本项目提供的默认文法支持除了： 复杂的指针类型（如函数指针，行指针等） 关键字 typedef 及相关的类型定义 编译预处理指令 以外大部分的 C 语言语法规则。此外还有一些额外的关键字
Android开发的入门级教程，介绍如何安装Android环境和android studio，完全入门级，适合新手入门学习
07-29
Android开发的入门级教程，介绍如何安装Android环境和android studio，完全入门级，适合新手入门学习，可以加QQ群973763889，一起交流
vue开发常用的拓展知识
09-24
Vue开发常用的拓展知识包括HTML、CSS和JavaScript的回顾、Vue项目开发技巧和代码优化相关知识、Vue API中实用但容易忽略的属性和方法、实用的Vue项目开发工具、第三方库及接口知识等。此外，在开发时需要注意开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

y519063548

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

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

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

打赏作者

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

抵扣说明：

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

余额充值