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

1. 绑定样式

1.1 绑定class

三种写法：

1. 字符串写法

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

2. 数组写法

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

3. 对象写法

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

1.2 绑定style

绑定style有对象和数组两种写法，与绑定class类似，但是用处不多。

2. 渲染

2.1 条件渲染

条件渲染：

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中则相反

2. v-show
   写法：

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

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

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

2.2 列表渲染

v-for指令

1. 用于展示列表数据
2. 语法：

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

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

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

key的作用

1. index作为key

2. id作为key

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

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

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

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

3. 用index作为key可能会引发的间题：

   • 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
     会产生没有必要的真实DOM更新=>界面效果没问题，但效率低。
   • 如果结构中还包含输入类的DOM:
     会产生错误DOM更新==>界面有问题。

4. 开发中如何选择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监视数据的原理：

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

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

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

3. 如何监测数组中的数据？

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

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

4. 在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');
        }
      }
    })

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

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

6. 指令

6.1 内置指令

1. v-text

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

---

2. v-html

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

---

3. v-cloak（没有值）

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

---

4. v-once（没有值）

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

---

5. 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>

1. 函数式

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

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

2. 对象式

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

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

自定义指令的注意点：

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

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

2. 指令函数中this指向window

7. 生命周期

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

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

常用的生命周期钩子：

1. mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2. beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1. 销毁后借助Vue开发者工具看不到任何信息。
2. 销毁后自定义事件会失效，但原生DOM事件依然有效。
3. 一般不会在beforeDestroy:操作数据，因为即便操作数据，也不会再触发更新流程了。