Vue 学习笔记

Vue 学习笔记
文章目录
1. Hello word
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>hello word</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                message: "hello world",
                content: 1
            }
        },
        mounted() {
            setInterval(() => {
                this.content++
            }, 1000)
        },
        template: '<div>{{message}}&nbsp;{{content}}</div>'
    }).mount('#root');
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
```
2. 指令基本用法

v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
v-show 显示内容（同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用不能单独使用否则报错模板编译错误
v-bind 动态绑定作用：及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
v-once 进入页面时只渲染一次不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>反转、显示/隐藏</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                message: "hello world",
                show: true
            }
        },
        methods: {
            handleBtnClick1() {
                this.message = this.message.split("").reverse().join("");
            },
            handleBtnClick2() {
                this.show = !this.show;
            },
        },
        template: `
        <div>
            <span v-if="show">{{message}}</span>&nbsp;
            <button v-on:click="handleBtnClick1">反转</button>&nbsp;
            <button v-on:click="handleBtnClick2">显示/隐藏</button>
        </div>
        `
    }).mount('#root');
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
```
3. 生命周期

 4. 计算属性、侦听器

computed：当计算属性依赖的内容发生变更时，才会重新执行计算
methods：只要页面重新渲染，就会重新计算
watch：可以设置监听一个表达式或函数的结果变化，变化时执行回调函数，回调函数得到的参数为变化前后的新值和旧值，表达式支持单个变量和一个简单的属性访问路径，需要监听更复杂的表达式，需要使用函数取代。可以说 computed的底层实现是 watch。
- computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存
- computed 和 watcher 都能实现的功能，建议使用 computed，因为更加简洁
5. v-if 和 v-show

v-if 隐藏的原理：需要隐藏时（v-if为false时）直接删除而不显示
v-show 隐藏则是在需要隐藏时（v-show为false时）给该标签添加"display:none"属性让其不显示
- 如果是频繁使用显示和隐藏操作，用v-show比较好。不会频繁创建删除标签操作，性能好。
- 如果不是频繁操作以上两种方式都不错。
- 如果是有多层判断可使用 v-if v-else-if v-else
6. 更新组件数据
- 使用数组变更函数
- 直接替换数组
- 直接更新数组内容
- 直接添加对象的内容，也可以自动的展示出来
7. 事件修饰符

stop: 防止事件冒泡
prevent：取消默认事件
capture：捕获事件
self：只会触发自己范围内的事件，不会包含子元素
once：只执行一次的点击
passive：提早告诉，提高性能

 8. 组件

组件是页面的一部分。
- 组件具有复用性，数据隔离。
- 局部组件：定义了，要注册之后才能使用，性能较高。定义名字建议大写字母开头，驼峰命名。
- 全局组件：定义了，就可以处处使用，性能不高，使用简单。定义名字建议小写字母单词，中间横杆连接。
- 局部组件使用时，要做一个名字和组件间的映射对象，不写映射，Vue 也会自动尝试帮你做映射。
相关阅读:
常见弱口令汇编
 应用程序通过 Envoy 代理和 Jaeger 进行分布式追踪 —— Ingress Controller + Http服务 + Grpc服务（三）
AES高级加密协议的动机阐述
 【Java】Groovy 语言应用场景以及积累
 Fourier变换的微分性质及其证明
 SpringBoot整合RabbitMQ实现消息延迟队列
 golang 函数式编程库samber/mo使用： Future
chatgpt赋能python：Python数据处理中如何选取指定范围的数据
 vue3-puzzle-vcode接入后端验证
 [附源码]计算机毕业设计基于SpringBoot智能家电商城
原文地址：https://blog.csdn.net/ygqygq2/article/details/125506708

文章目录

1. Hello word

2. 指令基本用法

3. 生命周期

4. 计算属性、侦听器

5. v-if 和 v-show

6. 更新组件数据

7. 事件修饰符

8. 组件