vue2学习 -- 核心语法(二)

文章目录

- 1. 绑定样式
- - 1.1 绑定class
  - 1.2 绑定style
- 2. 渲染
- - 2.1 条件渲染
  - 2.2 列表渲染
  - - key的作用
- 3. 监视数据
- - 3.1 vue监视数据的原理_对象
  - 3.2 vue监视数据的原理_数组
- 4. 收集表单数据
- 5. 过滤器
- 6. 指令
- - 6.1 内置指令
  - 6.2 自定义指令
- 7. 生命周期

1. 绑定样式

1.1 绑定class

三种写法：

字符串写法

<!-- 字符串写法，适用于：样式的类名不确定，需要动态指定-->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>

数组写法

<!-- 数组写法，适用于：要绑定的样式个数不确定、名字也不确定-->
<div class="basic" :class="classArr">{{name}}</div>

对象写法

<!-- 对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
<div class="basic" :class="classobj">{{name}}</div>

1.2 绑定style

绑定style有对象和数组两种写法，与绑定class类似，但是用处不多。
在这里插入图片描述

2. 渲染

2.1 条件渲染

条件渲染：

v-if
写法：

<div v-if="表达式"></div>
<div v-else-if="表达式"></div>
<div v-else="表达式"></div>

适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：

v-if可以和：v-else-if、v-else一起使用，但要求结构不能被“打断”;
只有v-if 可以使用template;
vue2中v-if的优先级高于v-show,vue3中则相反

v-show
写法：

<div v-show="表达式"></div>

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

备注：
使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。

2.2 列表渲染

v-for指令

用于展示列表数据
语法：

<li v-for="(item,index) in xxx" :key="yyy">xxx</li>
// in和 of都可以

可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
使用列表渲染一个对象时，

<ul>
  <li v-for="(value,key) in car">{{key}} - {{value}}</li>
</ul>
<script>
...
person:{
          name:'钱多多',
          age:20
        }
...
</script>

key的作用

index作为key

在这里插入图片描述

id作为key

在这里插入图片描述

没有设置key时，vue会默认将index设置为key。

❓面试题：react、vue中的key有什么作用？(key的内部原理)

虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

旧虚拟DOM中找到了与新虚拟DOM相同的key
- 若虚拟DOM中内容没变，直接使用之前的真实DOM！
- 若虚拟DOM中内容变了，则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM,随后渲染到到页面。

用index作为key可能会引发的间题：
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
  会产生没有必要的真实DOM更新=>界面效果没问题，但效率低。
- 如果结构中还包含输入类的DOM:
  会产生错误DOM更新==>界面有问题。
开发中如何选择key?:
- 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

3. 监视数据

3.1 vue监视数据的原理_对象

在这里插入图片描述
vm实例在将data交给_data前会对其进行加工，不管是基本类型的数据，还是对象类型的数据，每个数据或者属性都会有getter/setter(数据劫持)，一旦调用setter就会触发页面数据的更改。

3.2 vue监视数据的原理_数组

首先来了解一下vue.set()
假设有以下数据：

data: {
        name:'十个勤天',
        age:'2',
        members:[
        {name:'蒋敦豪',rank:1},
        {name:'鹭卓',rank:2},
        {name:'李耕耘',rank:3},
        {name:'李昊',rank:4},
        {name:'赵一博',rank:5},
        {name:'卓沅',rank:6},
        {name:'赵小童',rank:7},
        {name:'何浩楠',rank:8},
        {name:'陈少熙',rank:9},
        {name:'王一珩',rank:10}
        ]
      }

在用户交互时，给data中members添加sex:'男'时，如果使用

vm._data.members.sex = '男'

那sex没有getter/setter，也就是无法做到响应式，vue也无法监视到；
但是我们可以使用

vue.set(vm._data.members,'sex','男')

但是vue.set()有个弊端，它只能是data下的对象或数组使用(比如members)，如果是data使用(比如给vm._data添加sex)，就会报错。

同样的，如果直接

vm._data.members[10] = {...}

也是无效的，因为vue将检测不到这个member；但是我们也可以使用

vue.set(vm._data.members,10,{...})

另外，通过vue包裹过的方法对数组进行修改,vue也能检测的到
在这里插入图片描述
总结：
Vue监视数据的原理：

vue会监视data中所有层次的数据。
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。

对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API:

Vue.set(target,propertyName/index,value)
vm.$set(target,propertyName/index,value)

如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

调用原生对应的方法对数组进行更新。
重新解析模板，进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法：

使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、everse()
Vue.set() 或者 vm.$set()
特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象(_data)添加属性！！！

4. 收集表单数据

若：< input type=“text”/>，则v-model收集的是value值，用户输入的就是value值。
若：< input type=“radio”/>，则v-model收集的是value值，且要给标签配置value值。
若：< input type=“checkbox”/>，
- 没有配置input的value属性，那么收集的就是checked(勾选or未勾选，是布尔值)
- 配置input的value属性：
  1. v-model的初始值是非数组，那么收集的就是checked(勾选or未勾选，是布尔值)
  2. v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤

5. 过滤器

举个例子 — 实现时间的格式化

<div id="root">
    <h1>现在的时间：{{time}}</h1>
        <!-- 使用过滤器 -->
    <h1>时间格式化：{{time | fmtTime}}</h1>
  </div>

  <script>
    new Vue({
      el: '#root',
      data: {
        time: 1722420040605
      },
      filters: {
        fmtTime(val) {
          return moment(val).format('YY-MM-DD HH:mm:ss');
        }
      }
    })

过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：

注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}} (前者是全局配置，后者是局部)
使用过滤器：{{ xxx | 过滤器名 }}或 v-bind:属性=" xxx | 过滤器名 "（插值语法或者v-bind）
备注：
过滤器也可以接收额外参数、多个过滤器也可以串联
并没有改变原本的数据，是产生新的对应的数据

6. 指令

6.1 内置指令

在这里插入图片描述

v-text

作用：向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的内容，{{ xx }}则不会。

v-html

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
- v-html会替换掉节点中所有的内容，{{ xx }}则不会。
- v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
- 一定要在可信的内容上使用v-html,永不要用在用户提交的内容上！

v-cloak（没有值）

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。(让v-clak隐藏)

v-once（没有值）

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

v-pre

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

6.2 自定义指令

自定义指令配置在derectives中。
现有以下样式：

<body>
  <div id="root">
    <h2>当前的n值是：<span v-text="n"></span></h2>
    <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
    <button @click="n++">n+1</button>
    <br>
    <input type="text" v-fbind="n">
  </div>
</body>

函数式

big(element, binding) {
        element.innerText = binding.value * 10
      },

❓函数式何时会被调用？
- 指令与元素成功绑定时（一上来）
- 指令所在的模板被重新解析时

对象式

 fbind: {
		// 指令与元素成功绑定时（一上来）
        bind(element, binding) {
          element.value = binding.value
        },
        // 指令所在元素被插入页面时
        inserted(element, binding) {
          element.focus()
        },
        // 指令所在的模板被重新解析时
        update(element, binding) {
          element.value = binding.value
        }
      }

注意：
表单获取焦点或者拿到父元素等操作只能在inserted中进行。

自定义指令的注意点：

指令名：指令名中使用kebab-case命名方式，若声明函数或者对象时出现-则需要使用原始写法：

'big-number'(element, binding) {
        element.innerText = binding.value * 10
      },
// 或者
'big-number': {
        ...
      },

指令函数中this指向window

7. 生命周期

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

vm的一生(vm的生命周期)：
将要创建= = =>调用beforeCreate函数。
创建完毕= = =>调用created函数。
将要挂载= = =>调用beforeMount函数。
(重要)挂载完毕= = =>调用mounted函数。= = = = = = = = = = = = >【重要的钩子】
将要更新= = =>调用beforeUpdatej函数。
更新完毕= = =>调用updated函数。
(重要)将要销毁= = =>调用beforeDestroy函数。= = = = =>【重要的钩子】
销毁完毕= = =>调用destroyed函数。

常用的生命周期钩子：