HTML

head中的
- meta的使用，description可以用来记录文章主要内容，方便搜索引擎使用
- <link rel="icon" href="./favicon.ico"> 引入ico

Vue

文件结构:

api 存放封装了Ajax的请求文件
components 公共组件存放目录
views 视图组件
App.vue 主组件，入口文件
main.ts 项目的路口文件
router.ts路由文件

打包部署在nginx上

使用npm run build 进行打包，将dist包放在/usr/share/nginx/html
即可，然后root路径要写全
本地使用vue，基于脚手架安装

npm create vue@latest
cd xxx
npm install
npm run dev

基础语法:
v-bind:xxx 绑定语法，可简写为:xxx 如果绑定的是多个值，比如是一个json数组，那么可以把xxx省略留下 v-bind: = aaa
v-on 监听事件简写为 @xxx 动态绑定事件 @[事件列表] = "事件函数"
<template> 不会被渲染，一般作为v-if根

第三个参数表示位置索引：

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

setup是在建立渲染之前就会调用
想要使用变量就必须要把变量return 出来即可

使用语法糖可以简化代码，不需要一个个return了

<script setup>  
   const msg = 'Hello Vite + Vue 3!'  
</script>  
<template>  
  <div id="app">  
    <h1>{{msg}}</h1>  
  </div></template>

使用reactive函数来返回一个响应式对象

<script setup>  
   import {reactive} from "vue";  
   const state = reactive({  
     msg: "hell world"  
   })  
   const setState = ()=>{  
     state.msg = "hello vite"  
   }  
</script>  
<template>  
  {{state.msg}}  
  <button @click="setState">click</button>  
</template>

使用ref来返回一个简单响应式对象

<script setup>  
    import {ref} from "vue";  
    const msg = ref(0);  
</script>  
<template>  
  <div id="app">  
    <button @click="msg++">count is: {{ msg }}</button>  
  </div></template>

computed对象函数，里面传进去计算逻辑

<script setup>  
import {computed, ref} from "vue";  
  const list = ref([1,2,3,4,5]);  
  const filterlist = computed(()=>{  
    return list.value.filter(item=>item>3)  
  })  
</script>  
<template>  
  <div>    <ul>      <li v-for="item in filterlist" :key="item">{{item}}</li>  
    </ul>  </div></template>

watch 监听数据的变化，如果数据变化就执行回调函数，剩下两个参数，immediate 控制立刻执行，deep开启深度监听

监听一个

	<script setup>  
import {ref, watch} from "vue";  
const count = ref(0);  
watch(count,(newCount, oldCount) => {  
  console.log(`new count is: ${newCount}, old count is: ${oldCount}`)  
})  
const increment = () => {  
  count.value++;  
}  
</script>  
<template>  
<button @click="increment">count is: {{count}}</button>  
</template>

监听多个数据，只需要把参数化成数组即可

watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
  console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])
})

immediate 在创建时立刻出发

watch(count, (newValue, oldValue)=>{
   console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
 },{
   immediate: true
 })

deep通过watch监听的ref对象是浅层监听的，直接修改嵌套的对象属性是不会回调的，但是开启之后就可以回调了

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state
  watch(state, ()=>{
    console.log('数据变化了')
  })
  const changeStateByCount = ()=>{
    // 直接修改不会引发回调执行
    state.value.count++
  }
</script>

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state 并开启deep
  watch(state, ()=>{
    console.log('数据变化了')
  },{deep:true})
  const changeStateByCount = ()=>{
    // 此时修改可以触发回调
    state.value.count++
  }
</script>

父组件传值给子组件: 1.引入子组件，使用子组件并绑定子组件中props中的属性 2. 子组件使用defineProps来接受父组件的传值

父组件
<script setup>  
import son from './components/money.vue'  
</script>  
  
<template>  
  <son  message="hello world"/>  
</template>
<!--子组件-->
<script setup>  
const props =  defineProps({  
  message : String  
})  
</script>  
<template>  
  {{message}}  
</template>

子组件传值给父组件: 1.子组件通过defineEmits来生成emit方法 2.子组件使用emit定义事件，并传递参数 3.父组件使用绑定子组件的事件，并绑定自己的函数，定义自己的函数使用传递的值

子组件
<script setup>  
const props =  defineProps({  
  message : String  
})  
const emit = defineEmits(['say']) //事件列表  
const hh = ()=>{  
  emit('say','hello world')  
}  
</script>  
<template>  
  {{message}}  
  <button @click="hh">click</button>  
</template>
父组件
<script setup>  
import son from './components/money.vue'  
const func = (msg,num)=>{  
  console.log(msg,num)  
}  
</script>  
<template>  
  <son  messoage="hello world" @say="func"/>  
</template>

模板使用新建一个ref 然后在 html 中的ref来进行绑定这个ref即可获得dom元素，但是会在onmounted之后才能访问

父组件默认不会获得子组件的dom因为有setup 所以可以使用

defineExpose({
	需要暴漏的属性和方法名或者一个匿名函数
})

通过provide和inject来跨层传递

顶层
provide('key',value) value可以是函数等
底层
const value = inject('key')

v-text 来更新文本内容，v-html来更新html元素

Express

支持前后端分离的简单框架

npm install express-generator -g
express --no-view server 新建项目
cd server
npm install
ET DEBUG = server:* & npm start 开启服务

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;


        ##自定义服务列表

}
http {
        ##

        sendfile on;
        tcp_nopush on;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;.
         ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # Virtual Host Configs
        ##
          include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;

Node.js

进度条

const ProgressBar = require('progress')  
const bar = new ProgressBar(':bar',{total:100})  
const timer =  setInterval(()=>{  
    bar.tick()  
    if (bar.complete){  
        clearInterval(timer)  
    }  
},100)

文件操作 require(‘fs’)

网络开发

const net = require('net')  
const server = net.createServer((c)=>{  
    console.log('客户端已连接')  
    c.on('end',()=>{  
        console.log('断开连接')  
    })  
})  
server.on('error',(err)=>{  
    throw err  
})  
server.listen(8124,()=>{  
    console.log('服务器已启动')  
})

on来绑定事件

udp 使用dgram模块
WebSocket 使用 ws模块，是对socket的具体实现
socket.io框架
常用api
express框架
koa框架
mongoose

QingQiu'Blog

前端学习

HTML

Vue

打包部署在nginx上

Express

Node.js