崔崔Vue学习笔记整理

最新推荐文章于 2024-10-11 16:26:01 发布

前端打工人崔崔

最新推荐文章于 2024-10-11 16:26:01 发布

阅读量152

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_40629046/article/details/109487696

版权

1.关于Vue的理解：Vue是一种渐进式的JavaScript框架

2. Vue的特点：轻量级的框架，双向数据绑定，指令，插件化。

3.Vue语法：

				new Vue({
						el:"#app", 用于挂载要管理的元素
					data:{  //定义数据												
						}
					})

4. V-model获取和设置表单元素的值双向数据绑定：

	1.指令的作用是便捷的设置和获取表单元素的值

    2.绑定的数据会和表单的数据关联

    3.二者相互绑定，不论哪一方发生变化，另一方都会变化。

5.指令：

5.1 v-text 等同于{{xxx}}

		<span v-text="msg"></span> 

		<!-- 和下面的一样 -->

		<span> {{msg}} </span>

5.2 v-html

		v-html = "xxx" 内容按照html进行插入

5.3 v-show和v-if

:v-show是通过元素的display的属性设置元素是否存在，而v-if是通过元素DOM节点是否存在来设置

5.4 v-if v-else-if v-else

条件当满足某些条件的时候才会显示出来才会显示即当结果为真的时候才会显示等同于JavaScript 0、null、undefined、false为假其他为真

5.5 v-for 循环遍历

	<div v-for ="(item,index) in arr">{{item}}  </div>

item代表数组中的每一个元素，index代表下标。

	<div v-for = "(val,key) in obj">{{val}}{{key}} </div>

val代表对象的属性值，key代表的是属性

	<div v-for = "(val,key,index) in obj"></div>

val代表属性值，key代表属性，index代表属性的下标

5.6 v-on绑定对象简写 @绑定事件。

.stop:相当于阻止事件冒泡的方法等于 event.stopPropagation() 正常情况下先执行最里面的绑定的函数然后再向外冒泡

.capture 在事件冒泡过程中，如果外面的事件加了capture 将会优先执行带有capture的最外层的函数。例如：有四层div 13层加入了capture事件那么事件的冒泡顺序就是先从外向里执行capture再从里向外依次冒泡。

.prevent 阻止事件默认行为等于 event.preventDefault() 比如阻止单选框的默认事件点击不会出现对勾 a链接点击以后不会出现刷新页面的情况。

.self 将事件绑定在自身只有本身被触发的时候才会触发自身绑定的事件即事件冒泡的过程中会跳过带有self的。

.once 绑定了once的事件在执行一次之后就销毁，下次点击时不会继续触发如果是冒泡到它上面也会失效同时它所绑定的阻止冒泡事件也会失效
.keypress，keydown，keyup 当触发键盘事件的时候触发还可以绑定专门的按键比如 enter shift ctrl等 keypress 可以获取ASCII值
.left- (2.2.0) 只当点击鼠标左键时触发。

.  right` - (2.2.0) 只当点击鼠标右键时触发。

.middle` - (2.2.0) 只当点击鼠标中键时触发。

.passive- (2.3.0) 以{ passive: true }` 模式添加侦听器

5.7 v-bind 简写为：bind绑定事件：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

v-bind 简写成：可以给元素绑定class属性，有两种绑定方式一种是对象的方式一种是数组的方式
对象的方式绑定{ 属性：属性值} 属性值可以使变量也可以是true和false true是显示 false是不显示还可以通过其他的事件来控制对象属性值的来决定是否显示。
数组的绑定方式 [‘xxx’,‘xxx’] 这种绑定方式如果加上引号就相当于可以直接绑定给元素如果不加引号就相当于是变量可以在 model中寻找这个变量如果找到了变量将这个变量的值添加上去