【vue】vue学习记录总结

傻傻有内涵的我

已于 2024-05-09 16:30:41 修改

阅读量281

点赞数 3

分类专栏： vue 文章标签： vue.js 学习笔记

于 2024-05-09 16:02:39 首次发布

本文链接：https://blog.csdn.net/qq_45852108/article/details/138313828

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、插值语法

写法：{{ xxx }}

<div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}!</h3>
</div>

    <script> 
        new Vue({
            el:'#root', 
            data:{ 
                name:'abc',
            }
        })
    </script>

打印： 你好，abc！

二、vue指令

1. v-text

v-text:向其所在的节点中渲染 文本内容

文本有html结构<h3></h3>之类的也当字符串输出
- 举例：输出<h3>abc</h3>
1.1 v-text VS {{xxx}}
- 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

2. v-html

v-html: 向指定节点中渲染 包含html结构 的内容

文本有html结构<h3></h3>之类的会解析html输出
- 举例：输出
  abc
严重注意：v-html有安全性问题
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
- 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！！
2.1 v-html VS {{xxx}}
- 与插值语法的区别：
  - v-html会替换掉节点中所有的内容，{{xx}}则不会
  - v-html可以识别html结构

3. v-show

v-show：条件渲染 (动态控制节点是否展示)

写法：v-show=“表达式”

适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

4. v-if

v-if：条件渲染（动态控制节点是否存存在）

写法：
- v-if=“表达式”
- v-else-if=“表达式”
- v-else
- 适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断

4.1 v-show VS v-if

参数切换频率特点
v-show 高隐藏
v-if 低移除
- 所以，使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

参数	切换频率	特点
`v-show`	高	隐藏
`v-if`	低	移除

5. v-else-if

v-else-if：条件渲染（动态控制节点是否存存在）

6. v-else

v-else：条件渲染（动态控制节点是否存存在）

7.v-for

v-for：遍历数组 / 对象 / 字符串

遍历，用于展示列表数据
语法：<li v-for="(item, index) in xxx" :key="yyy">，其中key可以是index，也可以是遍历对象的唯一标识
可遍历：数组⭐️、对象⭐️、字符串（用的少）、指定次数（用的少）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<li v-for="(p,index) in persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<h2>汽车信息（遍历对象）</h2>
			<ul>
				<li v-for="(value,k) in car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<h2>遍历字符串</h2>
			<ul>
				<li v-for="(char,index) in str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<h2>遍历指定次数</h2>
			<ul>
				<li v-for="(number,index) in 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
    </body>
</html>

在这里插入图片描述

8. v-on

v-on：绑定事件监听，可简写为@

用法：v-on:click 或者 @click
@click="demo" 和 @click="demo($event)"效果一致，但后者可以传参

  <div id="root">
        <h2>hello,{{name}}</h2>
        <button v-on:click="show1">点我提示信息1</button>
        <button @click="show2($event,66)">点我提示信息2</button>
    </div>

<script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{
                name:'abc'
            },
            methods:{
                show1(event){
                    console.log(event)
                },
                show2(evnet,num){
                    console.log(event,num)
                }
            }
        })
</script>

9. v-bind

v-bind: 单向绑定+解析表达式，可简写为:

10.v-model

v-model: 双向数据绑定

双向绑定一般都应用在表单类元素上（如：<input>、<select>、<textarea>等）

10.1 数据绑定（v-bind VS v-model）

单向绑定（v-bind）：数据只能从data流向页面
（人话：页面只能接收，页面修改的东西后端拿不到）
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
（人话：页面接收，修改的啥后端拿到啥）

11.v-slot

12.v-pre

13.v-once

14.v-memo

15.v-cloak

三、事件处理

1. 事件修饰符

prevent：阻止默认事件（⭐️常用）
stop：阻止事件冒泡（⭐️常用）
once：事件只触发一次（⭐️常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

使用方式：

@click.prevent
修饰符可以 连续写，比如可以这么用：@click.prevent.stop="showInfo"

		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件 -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡 -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
			</div>

			<!-- 事件只触发一次 -->
			<button @click.once="showInfo">点我提示信息</button>

			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件 -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>

<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>

2. 键盘事件

前提：键盘上的每个按键都有自己的名称和编码，例如：Enter（13）
Vue中常用的按键别名：
- 回车：enter
- 删除：delete (捕获“删除”和“退格”键)
- 退出：esc
- 空格：space
- 换行：tab (❗特殊，必须配合keydown去使用)
- 上：up
- 下：down
- 左：left
- 右：right

<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
		</div>

🔆注意：

系统修饰键（用法特殊）：ctrl、alt、shift、meta
配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
配合keydown使用：正常触发事件

可以使用keyCode去指定具体的按键，比如：@keydown.13="showInfo"，但不推荐这样使用
Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名