JS/Vue 学习小记
可能要写点轮子。。。先学学前端知识吧，记录一下。
遍历：
for(let i of S){i...}
for(let i in S){S[i]...}
数组增长：
S = []
S.push(1)
S.push([1, 2, 3])
S.pop()
JS 是弱类型的语言。目前感觉到的特性有：
- 数组不同元素可以是不同类型的
- 函数返回值不需要声明，直接
function F()就可以
JS 中对象用大括号表示，成员可以是各种类型，包括函数，且不需要声明。
const person = {
name: ['tyf', 'tomotake'],
age: 32,
bio() {console.log(`I am ${this.name[0]} and i love ${this.name[1]}`)},
intro() {console.log('hello!')}
};
记得带逗号
JS 中可以获取 html 中的按钮等元素，并进行修改。具体的：
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
// function
});
代表按这个按钮（click）之后会发生某些时间
找到对应的按钮也需要相应设置。如在只有一个按钮的前提下，可以直接
<button>按钮</button>
但是如果有很多个按钮的话，就需要指定某些特征，常见的有 class 和 id。具体的：
<button class="cl">按钮 1</button>
<button id="lb">按钮 2</button>
这样，找按钮的时候的可以区分开了。
const bt = document.querySelector('.cl')
const bt = document.querySelector('#lb')
其中 class 前用点，id 前用 #
此外，还可以用 const bt = document.getElementById('lb') 来获取 id 的元素。
为元素添加事件可以使用 addEventListener。常见的：click、mouseover、keydown 等，其中 keydown（按下键盘）还可以读取按下的是哪个键：
textBox.addEventListener("keydown", (event) => {
output.textContent = `You pressed "${event.key}".`;
});
存在 event 的 key 中。
事件冒泡：
点击一个 button 时，同时还会点击这个 button 所在的 <div> 和 <body>，因此如果对这两个元素也设置 event listener 的话也会收到 click 的信号。而收到信号的顺序是从内到外，从小到大的。这就是 冒泡。
Vue 在加上 <script src='./vue.min.js'></script> 之后就可以使用 Vue 了
使用 = new Vue({}) 来创建一个 Vue 对象。其中大括号内部有 4 种值：
data()用于存储值，可以用{{}}来访问methods存储函数computed存储函数，但是调用里面的函数时不用加小括号，且如果该函数中的响应值未发生变化，则多次调用只执行一次watch侦听器，某个响应式的值是否发生变化
绑定：<p ...></p> 常见的有：
v-text="..."和某个响应式变量绑定。是单向绑定，即变量的变化会影响页面的变化，但反过来不行v-model="..."同上，双向绑定v-for="..."循环。如<p v-for="(item, key, index) in obj">内容为{{item}} {{key}} {{index}} {{item}}</p>v-show="..."决定某个块是否显示。
splice：删去数组一段连续元素
如：
a = [1,2,3,4,5]
a.splice(1,3)
console.log(a)
输出 [1,5]，也就是从第 1 个元素起（0-index），删去 3 个元素。
Vue 的挂载过程是将 Vue 实例与 DOM 元素（个人理解 DOM 元素就是代表页面的元素，Vue 实例需要和这个元素建立关系才能让页面渲染实例）建立联系，让 Vue 可以控制 DOM 元素的渲染和更新。
一般就是通过 new Vue([.. el:'#app']) 或者 $mount('#app') 实现
mounted 钩子：在挂载完成之后能执行一次。
const 如果指向一个非数值类型变量，其内容是可以变的（因为 const 只是限定了地址不能变）
挂载指将一个 vue 实例连接到 DOM 中的过程
API：不同网站有接口，可以通过 API 发送请求
router - 路由，大概就是在不刷新的情况下能链接到一个新的页面。
在 App.vue 的 template 中这么写：
<router-link to="/">首页</router-link>
<router-view></router-view>
其中，to 后面的杠代表点击“首页”之后会链接到哪里，其实 router link 和 <a href=".."> 在作用上差不多。
接着，通过 router view 进行访问
在 router.js 中的内容（也可以新建一个 router 文件然后写在里面）：
import { createRouter, createWebHashHistory } from 'vue-router'
import ListH from './components/ListH.vue'
import BlogH from './components/BlogH.vue'
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path:"/",
component:ListH
},
{
path:'/blog',
component:BlogH
}
]
})
export default router
使用了 createRouter 等组件建立了一个路由组件，这个组件中包含两个部分：根目录下的 ListH 和 blog 目录下的 BlogH（之所以有个 H 是因为默认是 multi-word，不加会报错），每个元素内部 path 和 component 都有。
最后再通过 export default 传到父组件中。
父组件和子组件：我用了你，我就是父组件，你就是子组件。子组件可以通过 export default 将数据导入到父组件中（父组件只需 import XXX 导入子组件数据即可）
动态路由：对多个相似组件设置不同的 path。
<template>
<h1>列表</h1>
<ul>
<li v-for="item in bloglist" :key="item">
<router-link :to="'/blog/' + item.id">{{ item.title }}</router-link>
</li>
</ul>
</template>
注意这里 to 前面要加冒号表示绑定。/blog/item.id
当使用 $route.params.id 的时候注意一下是字符串类型的，因此用 switch 的时候得加上双引号，另外 JavaScript 中双等于是判断值是否相同，三等于才是完全相同。
