Vue的命令

yarn serve

Scoped 会给className加随机数，防止污染，App.vue最好别加，会添加不上子组件的布局

外面的组件可以用Layout标签了，这个标签封装了css样式

被选中的标签加样式active-class="selected"添加一个css然后给一个颜色。这样在选中时，标签上会多一个className

button,input{font:inherit}摁扭之类的字体一般都是默认，所以全局上继承一下样式，美观
:focus{outline: none;}当input设置边框为none时被选中时也不会有边框
<input type="text" placeholder="在这里输入备注"> placeholder占位符
height:7.9vh屏幕高度的7.9%
添加一个伪元素，是用来当被选中时做标记，但不能用border因为被选中时会把其他的标签挤下去，所以伪元素基本写法如下：

这种情况不可以用display:flex来定位，用float:right float:left将整个数字版分成两部分，左右浮动：

&.ok {height: 64px*2;float: right;}像这种 &.xxx就是父元素下的xxx和上边的， &可以看作是串联选择器的连接符

sass

在写css时可以用sass写起来更方便，抱着尝试的态度试了一下，但在安装node-sass时发现有无穷的坑，主要原因是文件大，并且可能被墙，于是找到了一替代品dart-sass，但也会报错，费劲周折找到 yarn add node-sass@npm:dart-sass 把node-sass内容改成dart-sass!解决

placeholder

模块化，上边的伪类要出现很多次，所以为了减少重复，引用这伪类。大概意思就是，不知道有哪些元素用到，但知道值是多少，先写个占位

%x{
    &::after{
        content:'';
        display: block;
        clear: both;
      }
}

box-shadow: inset 0 -5px 5px -5px fade-out(black, 0.5);input表单的背景颜色在下边边框有个渐变

想给最外边Layout的div加类的时候，发现div不是自己组件的，直接加载Layout的div上，外边组件传进来又改不了。并且后面项目还需给Layout的其他div加类，所以要接受一个类的前缀，给这个类做一个保底，怕万一外边传空，这样可以在自己组件添加外边组件的样式，还得切记！不要用带scoped的style<style scoped lang="scss">,可以再写一个style

:class="classPrefix" && "`${classPrefix}-content`"
classPrefix="layout"
.layout-content{color:red}

type script

prop 后边的Number是xxx传过来的运行时的类型 xxx：number是编译成js时的类型
as HTMLButtonElement强制指定类型
textContent 属性设置或者返回指定节点的文本内容。
在写网页备注时：
原生的HTML通过event.target.value得到input的值；自定义的可以直接得到value.

V-model

也就是说像input事件($event.target.value)要拿到这个用户输入的值，通常要做到，监听事件，而且要让默认值等于这个监听值才能拿到。V-model帮我做好了这些，直接v-model='x' data:{x=''}

splice

splice一定有一个索引前边声名一个

 const index=this.selectedTags.indexOf(tag)
 this.selectedTags.splice(index,1)

$emit与.sync

当更新外部数据时，因为标签是外部数据所以不能直接push，要用$emit通知父元素，这$emit同时接受两个参数，一个是'update:dataSource',[...this.dataSource,name] update:dataSource用来通知父组件我要更新，后边的是更新内容，用...this.dataSource传输之前的数据，name为新数据.父元素标签上多一个.sync<Tags :dataSource.sync="tags"/> 如果这个事件直接写在传参里，可以用$event拿到
知识点，这个if(this.dataSource)在ts里一定要有，他可能是空，一定要有个if判断才不会报错
在收集数据时又用到外部数据，大概理解为外部数据用this.$emit拿到后喊一下谁能用，后面跟用的数据内容
回看视频时候发现两点！！。Vue作者在设计这个$emit时把第一个参数，通知外边这个参数起名为update:必须要加，不知道为什么。第二点，后边的事件被放到$event上了,为了简单，在传参的函数后边直接.sync 父元素在接收到这个数据当一个初始值传给子组件，同时监听他的变化时，.sync会帮你完成，光标部分，所以可以删除这个监听变化

类组件的Component的写法

类组件吧Component写到外边，因为里面都是数据

@watch

可以理解成盯着看，在数据变化的时候才会监听。他可以接受一个函数和一个属性，这个函数不会往深了看自己的值变化，只看自己的地址是否变化，所以类似n+1的变化监听不到。这时可以选择第二个属性deep:true，是否往深了看！Watch可以模仿computed，将watch变成一个对象，有个handler一个函数，函数后面第二个值immediat：ture第一次是否触发。还有个deep:true

在监听数据变化时，数据有可能不变，但直接写成this.$emit('update:value',type)会一直更新，我并不想，所以用Watch因为他只监听有变化的数据！！！

computed

是计算属性，用来计算一个属性的值。可以直接当属性调用自动缓存，依赖不变的时候（值没变），值不会重新计算。 watch是监听属性，用来监听数据的变化执行一个函数，immediat：ture表示让值最初时候watch就执行，deep表示对对象里面的变化进行深度监听

自定义类型，设置初始值

如果有初始值，可以不写类型，ts可以自己推断。意思就是说可以删除type Record={},但ts若推不出来还是要声名，还是规矩点吧

parseFloat

parseFloat(value)将数字变成字符串

数据类型

猜测：上边的recordList类型必须是:Record[]因为，不加[]ts不知道是其中的哪个一个，下边的record默认值就是数组里的内容所以Record不用加[]

localStorage

将数据缓存到window中，切记只支持字符串，所以一定要用JSON.stringify(我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。) window.localStorage.setItem(JSON.stringify(this.recordList.push(this.record))) setItem是用于保存，getItem用于读取，所以，可以设置一个默认初始值，这初始值读取缓存。

record.createdAt=new Date()
createdAt?:Date;

JSON.parse() 方法用来解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象。提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换 (操作)。将保存的时间也记录下来。 要深拷贝一份数据，否则在Watch时他检查到地址没变，你只是把之前的值覆盖掉了而已，log出来的内容是两次一样的

Rails里面有讲数据迁移，老师只是简单的概述了一下

js与ts的配合

当组件中引入一个js，用require()并且后边加上.model; 如果是export default导出的就.default 然后把js后缀改成了ts，报错的地方加上类型，如果用到外组件的数据类型，可以把数据类型放到全局，文件名为xxx.d.ts，一定是.d.ts为后缀结尾，这样可以引用外部的类型了custom.d.ts
如果你遇到：已经在 custom.d.ts 中定义了 RecordItem, 但RecordItem仍然标红，显示未定义你可以：在 eslintrc.js 中加一行配置： "globals": { "RecordItem": true }

保存后彻底关闭编辑器后，重新打开当前项目
如果还有类似的情况（如Tag），也可按照此方法解决

window.alert('添加成功')

添加提示成功或失败

Vue Router

路由时，因为跳转页面不确定。有个：id用来占位

获取路由id

this.$route.params.id文档查的，文档里有route和router route用来获取路由信息的，router是路由器用来转发的。特别说一下，push到404时有bug，会死循环，所以用replace

共用数据

将数据写到特别高的一层，渲染页面层，添加一个window属性，但报错了，声名一下类型即可。在其他地儿用数据时候，window.tagList即可拿到，这样数据同步了，不需要每个组件都去window.localStorage.getItem，都去的后果，当数据变化，其他组件需要手动刷新才能同步，将数据写到特别高的一层，解决这个问题

Exclude

Tag里除了id要其他属性

updateTag与update的属性一致，所以vue提供了一个写法

猜测：

函数里面调用自身函数可以，叫做递归，但函数里定义一个对象，这个对象不能调用自己的函数

Computed

计算属性，用来监听。这里的基础知识，store.count是store里的值，在外边用

count2=store.count
add(){
stord.addcount()
}
这个count2只是引用了store.count里面的值是0，所以在外边+1时候，不会被监听store的数据变化，所以页面不会变化。所以要加到computed里来监听

而这recordList存的是一个对象的地址，这个地址复制到外边，

VueX

mutation接受两个参数，state.是为了避免this，另一个参数如果是个对象对象里有id和name可以写成

updateTag(state,payload:{id: string, name: string}) {
      const {id,name}=payload;

（'payload是官方给的名字'）这样就可以同时取到id和name了。commit没有返回值！

Mixin

在ts中用mixin有些麻烦，吧mixin声明成组件，然后外部使用时候不继承vue，继承mixin() 出自官方文档Extend and Mixins | Vue Class Component (vuejs.org)

代码回滚

git log得到版本
git reset --hard a6ede69ef4596831dac800c30cbb3083e7eeb04f

:V-bind

这个修饰符也可以**简写为'：'**这个是用来绑定事件，比如给子组件传一些数据，函数等，如果不加绑定的修饰符，你传过去的就是字符串，绑定符用来绑定事件。

directives

创造指令，可以接受一个一个名称例如X 再接受多个函数，要用的时候在标签上V-X即可触发函数事件。函数如图，中间的update和componentUpdated传闻基本不咋用， 注意ininfo.arg，拿到了click， 此时拿到了用户监听的方法和值，info.value unbind是在元素即将死亡时，删除，记得清理垃圾！！

Mixin

可以理解为把组件的内容复制到实例中来，就是个复制粘贴，可以粘贴到多个组件。当自身和mixin有共同属性如钩子，data等，则优先取组件自身

Provide / Inject

传递给多个子组件函数或者对象，但他不是响应式！数据无法得到更新

require

ts组件导入js时，import 无法操作了,用require导出时export{model}

.d.ts

在ts中要标注清楚数据类型才可以，自定义类型时，可以放到.d.ts中。d代表定义自定义button时会丢失许多button的功能，如鼠标悬浮，右键点击等用这个.native
parseInt能将localStorage的内容变成字符串创建标签id时考虑到，如果id不是从缓存取，用自增的方式，那每次取到的id会重复出现