Vue——Vue核心：样式绑定、条件渲染、列表渲染、数据监视、收集表单数据、过滤器、内置和自定义指令、生命周期-CSDN博客

本文链接：https://blog.csdn.net/Sakura_0413/article/details/130260670

这里写自定义目录标题

class与style绑定
- class样式
- style样式
条件渲染
列表渲染
- key的原理
Vue数据监视
收集表单数据
过滤器
内置指令
自定义指令
生命周期

class与style绑定

class样式

写法：
:class=“xxx”，xxx可以是字符串、对象、数组
字符串写法试用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定名字确定但不确定用不用

style样式

:style=“{fontSize:xxx}”,其中xxx是动态值
:style=“[a,b]”，其中a、b是样式对象

<body>
    <div id="root">
        <!-- 绑定class样式：字符串写法，适用于：样式的类名不确定，需要动态指定  -->
        <div class="base" v-bind:class="mood" @click="change">点击切换样式</div><br>

        <!-- 绑定class样式：数组写法，适用于：要绑定的样式个数不确定，码功能自也不确定  -->
        <div class="base" :class="classArr">点击添加样式</div><br>

        <!-- 绑定class样式：对象写法，适用于：要绑定的样式个数确定，码功能自也确定，但要动态决定用不用 -->
        <div class="base" :class="classObj">点击添加样式</div><br>

        <!-- 绑定style样式：以对象形式或数组形式，数组里嵌套对象 -->
        <div class="base" :style="styleObj">style绑定</div><br>
        <div class="base" :style="[styleObj,styleObj2]">style绑定</div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data() {
                return {
                    mood: '',
                    classArr: ['style1', 'style2', 'style3'],
                    classObj: {
                        style1: false,
                        style2: false,
                    },
                    styleObj: {
                        // 以对象的形式存储css样式，fontSize对应css中的font-size，将其修改为大驼峰形式
                        //这些变量名都要对应css中的样式，不是随便命名的
                        fontSize: '40px',
                        color: 'pink',
                    },
                    styleObj2: {

                        backgroundColor: 'orange'
                    }
                }
            },
            methods: {
                change() {
                    const arr = ['happy', 'sad', 'normal']
                    const index = Math.floor(Math.random() * arr.length)
                    this.mood = arr[index]
                }
            },
        })
    </script>
</body>

条件渲染

v-if
写法：
（1）v-if=“表达式”
（2）v-else-if=“表达式”
（3）v-else
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除，页面中将不再存在该节点
注意：v-if、v-else-if、v-else可以配合使用，但要求结构不能被“打断”，（该逻辑与js中逻辑一致）
v-show
写法：v-show=“表达式”
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉（相当于display：none）

注意：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。（因为使用v-if=“false”后，该元素将被直接从html中移除，以后就无法获取了）

列表渲染

v-for指令
用于展示列表数据
语法：v-for=“(item,index) in xxx” :key=“yyy”
可遍历：数组、对象、字符串、指定次数

key的原理

当向页面添加新数据，且新数据放在旧数据前面，使用index作为key时：
在这里插入图片描述
当向页面添加新数据，且新数据放在旧数据前面，使用数据中的id作为key时：

key的内部原理：
1、虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2、对比规则：
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：若虚拟DOM中内容没有改变，直接使用之前的真实DOM（即复用）。若DMO中内容改变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
（2）旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到页面。
3、用index作为key可能引发的问题：
（1）若对数据进行：逆序添加、删除等破坏顺序操作：会产生没有必要的真实DOM更新。
（2）如果结构中还包含输入类的DOM，将会产生错误DOM更新，界面会出现问题
4、开发中如何选择key？
（1）最好使用每条数据的唯一标识作为key，如id、手机号、身份证号、学号等唯一值。
（2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

Vue数据监视

Vue监视数据的原理
1、vue会监视data中所有层次的数据
2、如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
（1）对象中后追加的属性，Vue默认不做响应式处理
（2）如果需要给后添加的属性做响应式，请使用如下API:
Vue.set(targer,propertyName/index,value)或vm.$set(targer,propertyName/index,value)
3、如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：通过调用原生对应的方法对数组进行更新；重新解析模板，进而更新页面
4、在Vue修改数组的某个元素一定要用到如下方法：
（1）使用这些API：push()/pop()/shift()/unshift()/splice()/sort()/reverse()
（2）Vue.set()或vm. $se t () 5 、注意： V u e . se t () 或 v m .$ set()不能给vm或vm的根数据对象添加属性！

收集表单数据

收集表单数据：
若：<input type="text"/>，v-model收集value值，用户输入的就是value值。
若：<input type="radio"/>，v-model收集的是value值，则需要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置了input的value属性：
（1）v-model的初始值是空字符串，那么收集的就是checked（勾选 or 未勾选，是布尔值）
（2) v-model的初始值是数组，那么收集的就是value组成的数组

v-model的三个修饰符：
lazy：失去焦点后收集数据
number：输入字符串转为有效的数字
trim：输入去掉前后空格

过滤器

定义：对要最示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理）
语法：
1.注册过滤器：Vue. filter (name,callback)或new Vue{filters{}}
2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性=“xxx | 过滤器名”
备注：
1、过滤器也可以接收额外参数、多个过滤器也可以申联
2、并没有改变原本的数据，是产生新的对应的数据

内置指令

v-bind/v-model/v-for/v-on/v-if/v-else/v-show

v-text

作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，而{{xxx}}不会。
不支持结构解析。

v-html

作用：向指定节点中渲染包含html结构的内容
与插值语法的区别：v-html会替换掉节点中的内容，而{{xxx}}不会。支持结构解析。
严重注意：v-html有安全性问题！
在网站上动态渲染任意HTML是非常危险的，容易导致XSS（冒充用户之手）攻击。一定要在可信的内容上使用v-html，永远不要用来用户提交的内容上！

v-cloak

v-cloak（没有值）：本质是一个特殊属性，Nue实例创建完毕后接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢是页面展示出{{xxx}}的问题。
在这里插入图片描述

v-once

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre

跳过其所在节点的编译过程。
可利用他跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

在这里插入图片描述

生命周期

生命周期：又名声明周期回调函数、生命周期函数、生命周期钩子。是Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm或组件实例对象
在这里插入图片描述

常用的生命周期钩子：
1、mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作
2、beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾工作。
关于销毁Vue实例：
1、销毁后借助Vue开发者工具看不到任何信息
2、销毁后自定义事件会失效，但原生DOM事件仍然有效
3、一般不会在beforeDestroy操作数据，因为即使操作了数据，也不会再触发更新流程了。