8.26

  • Vue单文件组件中的template标签包裹的是XML标记语言
    • 区别于HTML，HTML标记语言较为松散，XML比较严格，编译器解析体积较小，松散的语法写编译器需要兼容的东西较多
      • XML所有元素都必须有关闭标签且均可以写成自闭合标签；
      • XML 的属性值须加引号；
      • 文档中的空格不会被删节；

对空值undefined和null进行不显示

  • Vue的双向绑定

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
v-model其实体现的就是Vue的双向绑定
它负责监听用户的输入事件来更新数据
实际上v-model是v-bind:value和v-on:input的语法糖
v-on:input=”???”

8.29

  • 局部指令和全局自定义指令避坑——单复数书写规范

局部指令的注册：在本组件中接受一个指令选项directives（注意复数）
全局指令的注册：在main.js文件中声明一个Vue.directive实例（注意单数）

8.30

  • 使用Vue的时候大多是改数据，然后自动更新UI，很少手动操作DOM；
  • 代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令；
  • 组件与指令的关系
    • Vue实例/组件用于 数据绑定、事件监听、DOM更新（非直接通过DOM的api更新，而是通过监听器更新）
    • Vue指令主要用于原生DOM操作，减少重复，即某个DOM操作经常使用或为复杂，就可以传函数给指令，将DOM操作封装为指令

（不再实例中使用DOM操作，而将所有DOM操作封装到directives中）

  • Vue进阶属性复习
  • directives指令

包括内置指令（@和：等）和自定义指令，类型有全局和局部之分
自定义指令常用五个指令选项/钩子函数
指令的作用主要是 操作DOM

  • mixins混入

分为全局和局部（常用局部）
混入的作用是：分发 Vue 组件中的可复用功能，作用是减少date、methods、钩子等构造选项的重复
局部声明：
可将其复用的部分抽离到一个mixins文件夹中
当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项
局部调用mixin（想要用它的功能就将它引入）：
引入import；注意路径写法
暴露接口，在本组件中添加混入选项mixins:[混入的单文件组件名称]
注意：
当组件和 mixin 对象含有同名选项时，这些选项将以恰当的方式进行“合并”（选项合并），会以组件自身的数据为优先
mixin 对象的钩子将在组件自身钩子之前调用，即mixin对象的钩子先被调用

  • extends继承

形式不同于mixin而已
声明一个MyVue的js文件，
作为Vue的扩展，往后不使用Vue，而使用自定义的Vue扩展即MyVue
原理同mixin类似，都是将共同的功能抽离到一个文件中方便调用，但是extend更为高级和抽象，extend文件中可以包含mixins选项

  • provide提供和inject注入 形成搭配，提供封装的功能后可供单个组件注入以复用
  • Vue中基本不用使用id名了
  • 循环v-for

特定语法:
若为对象：v-for=”(value,keyname)in obj” :key =”value.keyname”（一般key后的属性名要用不重名的）
若为数组：v-for=”(value,index)in arr” :key =”value.index”（一般key后的属性名要用不重名的，常用对象或者数组的属性名或者下标）
或 v-for=”item(index) in array” :value=”item.value” :key=”item.value”
声明：将对象或数组中的每一项 以 （value和keyname/index）代替，一般为数组（value和index）；对象为（value和keyname）注意后面需要绑定一个key变量
调用：当做普通对象使用，利用数据绑定

  • [ ] 参考用法：列表渲染

    记账项目疑难杂症记录

    10.21

  • [x] JS中null和undefined区别

两种写法几乎等价：在if语句中，都会被自动转为false，相等运算符甚至直接报告两者相等
undefined == null // true

  • 用法
  • null表示”没有对象”，即该处不应该有值

（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。

  • undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义

（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。

  • 总结：null更多的表示引用语义；而undefined更多的表示值语义

undefined： 声明了变量，但未赋值。例如：var a；
null：声明了某一变量，并赋值，只是值为空。例如：var obj = null。

  • —-那么什么时候变量赋值为null，有什么意义？

变量a赋值为Object类型， var a = {name: xiaoming}；
当对a进行一系列操作之后，不再需要变量a存在的时候， 人为地赋值a = null ——切断a与之前堆空间的联系，便于及时地把存储了{name: xiaoming}的堆内空间释放
注意，这只对Object类型(引用型)的变量有意义

10.25

  • Vuex问题
  • 在 Vue 组件中获得 Vuex 状态state

mutation只能被调用，不会有返回值，所有操作最终都会提交到state中，即store.commit()没有return
问题：其他组件无法通过store.commit()直接获取返回值
解决：state中声明新的变量，直接在mutation调用时修改state中的值，其他组件获取Vuex状态state即可

  • 解耦 的应用；各司其职，哪些变量该由谁获取就由谁获取，获取后再传参；
  • typescript中使用computed计算属性的功能，是用getter/setter方法实现的，否则只能在template模板中使用；

mutations里面的函数最多只能包含两个参数，通常第二个形参是对象形式名为载荷：payload，实参为{…}

11.7

  • input的datetime-local控件value初始化问题

ISOString时间包含毫毛级别，无法嵌入初始化的datetime-local中
解决办法：
①利用正则切割掉后部分的毫毛
②利用dayjs将ISOString转换为普通date，即datetime-local控件能接受的date（原生是Date.parse方法），再格式化date（√）

  1. //对初始化的ISOString值进行转换
  3. x(isoString:string) {
  4.   return dayjs(isoString).format('YYYY-MM-DDTHH:mm') 
  5.   //datetime-local控件支持日期和时间格式，其时间格式必须至少达到‘分’级别
  6. }
  • 附上input的type类型大全：

Vue学习疑惑清单 - 图1

  • 哈希表、js对象和表驱动编程的关系
  • 哈希表是一种数据结构，以key和value键值对的形式存储和读取，js对象正是以一种哈希表的形式进行存储的
    • 哈希表在其他语言中也有对应的实现方式，如python就叫哈希表、字典，java里有hashtable类，ruby也有hash类，elixir里叫maps，所以哈希表是一个相对较顶层的数据结构概念，不限于某个语言特性（如js对象）
  • 表驱动编程是一种小的编程范式，它应用了哈希表这一数据结构的特性
    • 其目的是减少简单情况下if -else或者switch的使用，通过查表替代if else
    • 简单应用场景如：
      • ①动态绑定class属性时，Vue会检查key对应的value是不是truthy值，是则实现对应key；
      • ②将某个条件（比如它是一个字符串或者最终会是一个字符串）作为key，从哈希表中去取对应的value，只要我们提前定义好key和value的关联，就能取到对应想要的数据

11.8

关于Vue中的生命周期图例
image.png